wjnba的博客

一、BEM基础介绍 定义：BEM（Block Element Modifier）是由Yandex团队提出的前端CSS类名命名方法论，通过块、元素、修饰符三部分构建清晰的组件结构，是现代前端开发中广泛采用的CSS模块化方案。 核心价值：提升CSS代码可维护性、避免样式冲突、支持组件复用，尤其适配中大型前端项目。 基础标识：双下划线__连接块与元素，双连字符--表示修饰符，示例：.menu__item--active。 二、BEM核心概念 组成部分 描述 示例 核心作用 Block（块） 独立且有意义的组件 .header、.menu、.card 表示可独立复用的基础组件 Element（元素） 块的组成部分 .menu__item、.card__title 块的从属部分，无法独立存在 Modifier（修饰符） 块/元素的状态/变体 .menu--vertical、.card__button--disabled 表示组件的不同状态或样式变体 三、命名语法规则1. 基本语法结构123456789/* 块 */.block {}/* ...

什么是this？定义：调用函数时，call后面的第一个值 如何找到this？由定义可知，this就是call后面的第一个值，只要确定了call后面的值，即可找到this。换句话说，只需要把函数调用改成带有call的调用即可 函数调用JS（ES5）里面有三种函数调用形式： 123func(p1, p2) obj.child.method(p1, p2)func.call(context, p1, p2) 一般，初学者都知道前两种形式，而且认为前两种形式「优于」第三种形式。 从看到这篇文章起，你一定要记住，第三种调用形式，才是正常调用形式： 1func.call(context, p1, p2) 其他两种都是语法糖，可以等价地变为 call 形式： 12345func(p1, p2) 等价于func.call(undefined, p1, p2)obj.child.method(p1, p2) 等价于obj.child.method.call(obj.child, p1, p2) 请记下来。（我们称此代码为「转换代码」，方便下文引用） 至此我们的函数调用只有一种形式： 1func.call ...

一般的企业级开发分支共有5种类型 master，最终发布版本，整个项目中有且只有一个。 develop，项目的开发分支，原则上项目中有且只有一个。 feature，功能分支，用于开发一个新的功能。 release，预发布版本，介于develop和master之间的一个版本，用于测试。 hotfix，修复补丁，用于修复master上的bug，直接作用于master。 SourceTree一般开发模式：1、开发任务都是在develop分支上完成的，当开发中需要增加一个新的功能时，可新建feature分支，用于增加新功能，并且不影响开发中的develop源码，当新功能增加完成后，完成feature分支，将新功能合并到develop中，更新develop上的代码。操作： ①分支选择develop，点击Git工作流，选择“建立新的功能”，以功能命名分支，并把生成的分支推到远程仓库，如下图： ②完成功能开发后，将当前分支指向该分支（如上图“首页”分支），点击“Git工作流”，选择“完成功能”，将新功能合并到develop中，更新develop上的代码，如下图： 2、当开发到一定阶段，可 ...

1. 基本匹配正则表达式只是我们用于在文本中检索字母和数字的模式。例如正则表达式 cat，表示: 字母 c 后面跟着一个字母 a，再后面跟着一个字母 t。 1"cat" => The cat sat on the mat 正则表达式 123 会匹配字符串 “123”。通过将正则表达式中的每个字符逐个与要匹配的字符串中的每个字符进行比较，来完成正则匹配。 正则表达式通常区分大小写，因此正则表达式 Cat 与字符串 “cat” 不匹配。 1"Cat" => The cat sat on the Cat 2. 元字符元字符是正则表达式的基本组成元素。元字符在这里跟它通常表达的意思不一样，而是以某种特殊的含义去解释。有些元字符写在方括号内的时候有特殊含义。 元字符如下: 元字符 描述 . 匹配除换行符以外的任意字符。 [ ] 字符类，匹配方括号中包含的任意字符。 否定字符类。匹配方括号中不包含的任意字符 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 ? 匹配前面的子表达式零次或一 ...

Vue2每次都把整个Vue导入，例如Vue2的 main.js 文件中的代码 12345678import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(App)}).$mount('#app') 但很明显我们的项目中不可能用到Vue所有的API，因此很多模块其实是没有用的 那么在Vue3中，对外暴露了很多的API供开发者使用，我们可以根据自己的需求，将所需要的API从Vue中导入。例如 main.js 中的代码 1234import { createApp } from 'vue';import App from './App.vue'createApp(App).mount('#app') 利用了 import 和 export 的导入导出语法，实现了按需打包模块的功 ...

Vue3 1.Vue3 简介 2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王） 耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者 github 上的 tags 地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3 带来了什么1.性能的提升 打包大小减少 41% 初次渲染快 55%, 更新渲染快 133% 内存减少 54% … 2.源码的升级 使用 Proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-Shaking … 3.拥抱 TypeScript Vue3 可以更好的支持 TypeScript 4.新的特性 Composition API（组合 API） setup 配置 ref 与 reactive watch 与 watchEffect provide 与 inject … 新的内置组件 Fragment Teleport Suspense 其他改变 ...

在做可视化大屏项目难免会考虑到屏幕适配的难题，如果有一个适配各种屏幕的基础容器组件处理这个事情，我们就可以放心写业务，下面介绍在vue中如何通过锁定宽高比的方式来进行屏幕适配。 组件特点1.自动监听浏览器窗口变化,动态计算出高宽比,无视页面放大缩小 2.适用于各种屏幕,常用作项目最外层基础容器 3.突破浏览器中 font-size 最小 12px 限制 组件实现新增LargeScreenContainer.vue文件，在文件里面创建一个外层包裹容器，根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091 ...

前面在图片懒加载一文中讲到什么是图片懒加载和用js怎么实现懒加载，本文记录一下图片懒加载插件 vue-lazyload的使用。 一、安装依赖包npm1npm i vue-lazyload -S yarn1yarn add vue-lazyload 二、全局注册插件1234567891011// 引入插件import VueLazyload from 'vue-lazyload'// 注册插件const loadimage = require('./assets/loading.gif')const errorimage = require('./assets/error.gif')Vue.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1}) 配置项参数说明： 键 描述 默认值 选项 preLoad 表示lazyload的元素,距离页面底部距离的百分比.计算值为(p ...

js命名应遵循 简洁、语义化 的原则 一、变量命名方法: 小驼峰式命名法命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量） 123456//好的命名方式let maxCount = 10;let tableTitle = '啦啦啦';//不好的命名方式let setConut = 10;let getTitle = '啦啦啦'; 临时变量1：作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。2：循环变量可以简写，比如：i，j，k等。 s：表示字符串。例如：sName，sHtml； n：表示数字。例如：nPage，nTotal； b：表示逻辑。例如：bChecked，bHasLogin； a：表示数组。例如：aList，aGroup； r：表示正则表达式。例如：rDomain，rEmail； f：表示函数。例如：fGetHtml，fInit； o：表示以上未涉及到的其他对象，例如：oButton，oDate； g：表示全局变量，例如：gUserName，gLoginTime； 二、常量 某 ...

媒体查询（Media Queries） 媒体查询（Media Queries）是 CSS3 中的一个特性，它允许你根据设备的特性（如宽度、高度、颜色等）来应用不同的 CSS 样式。这使得开发者能够为不同的设备（如桌面电脑、平板电脑、手机等）或同一设备的不同状态（如横屏或竖屏）创建特定的布局和样式。 媒体查询由两部分组成：媒体类型（Media Type）和媒体特性（Media Features）。 媒体类型：描述了设备的一般类别，如 all（所有设备）、screen（电脑屏幕、平板电脑、智能手机等）、print（打印机和打印预览）等。 媒体特性：描述了设备的具体特性，如 width（视口宽度）、height（视口高度）、color（设备颜色位数）等。 媒体查询的基本语法如下： 1234css@media mediaType and (mediaFeature1: value1) and (mediaFeature2: value2) { /* CSS 规则 */ } 例如，如果你想为宽度小于 768px 的设备设置特定的样式，你可以这样写： 12345 ...