个人开发知识库（239-283）

Sep 11 2023 · knowledge-base

239. 代码提交规范

代码要每天都提交一次！不要按功能完成再提交，确保服务器能备份到最新的代码，确保本地不会因为硬盘坏了而丢失代码（即使是万分之一的概率）。

提交的时候只要确保基本的编译不会出错就可以了，只是提交到你的 feature 分支，不会影响到 master 分支的完整性的。到时候一个功能开发完成了再通过测试后

再合并到主分支就可以了。

参考 devOps 的操作流程。

CI / CD 持续集成 / 持续部署（交付） continuous integration

continuous deployment（delivery）

240. 命名规范

命名：数组： menus menuList Nodes records

对象： data menuInfo menuDict

Map: menuMap

Set: menuSet

241. img标签的 onerror 事件处理

用 img标签的 **onerror（@error）事件 **解决图片的src地址访问不到报错（或者图片裂开）的问题

原生：

VUE:

242. 可拖拽的视口

cursor: col-resize;

243. 获取外部样式的方法

window.getComputedStyle( ele ) 获取该元素的所有外部样式对象（有width属性 …） // 返回值是整数

ele.getBoundingClientRect( ).top / bottom / left / right 返回一个矩形对象，包含那4个属性 // 返回值是精确的带小数点的

ele.offsetWidth / offsetHeight / offsetLeft / offsetTop // 返回的是整数

244. package.json 文件中的依赖类型区别

package.json 文件中的 dependencies（项目的依赖）和 devDependencies（开发所需要的模块）和 peerDependencies 的区别：

（1）、如果没有发布 npm 包，那么依赖放在哪里没有区别；

（2）、为了规范，如果是一直使用的包（项目中会一直用，如 ant-design-vue、day.js等），放到 dependencies 中; （这里的依赖是一定会被下载的）

如果是开发时需要用到，上线后（线上环境）不会用到的，如 webpack、eslint、prettier、各种-loader、stylelint等…，放到 devDependencies 中

（3）、peerDependencies 解决核心库被下载多次，统一核心库的版本问题（项目依赖了 vuex 和 vant 这两个子库，而这两个依赖又都同时依赖了 vue 这个框架。在字库中分别声明 peerDependencies 防止重复安装 vue）

（4）、peerDependenciesMeta 对 peerDependencies 的修饰，增加一些可选项的配置

245. CSS 字体 font-weight 属性的跨平台差异

关于 css 字体的一些学问 font-weight 属性在不同操作系统（常见win和mac）上的显示效果的不同

（0）、关于 win 和 mac 的默认字体（不设置font-family属性，会自动读取操作系统的默认字体来显示的）

（1）、win上：600为分界线。600往前一个效果，600往后一个效果

  mac上：每一个值显示的效果都不一样

（2）、因为操作系统和浏览器的原因，字体在不同操作系统设备上显示的粗细会有所不同。这是 font-weight 这个属性存在的兼容性问题

（3）、使用 @font-face 引入自定义字体，font-family 使用该字体名称（字体后缀名 .ttf .otf .fnt ）

246. Vue 中多个组件使用 window.onresize 的问题

vue 中多个组件使用 window.onresize，只有一个生效，导致其他的给覆盖。

247. JavaScript 引擎和编译器

js引擎（spiderMonkey、V8 …）（js解析器）和 js编译器（babel （es6 转 es5，转化 jsx 语法，兼容旧版浏览器，ts语法）、 tsc （typescript compiler）、 swc （speedy web compiler））

248. CommonJS 和 ES Module 的区别

commonJS （服务端 node）和 ES Module 的区别：

(1)、require 和 import 的

(2)、CommonJS 的思路就是将函数当作模块

249. JS的对象遍历是无序的

JS的对象遍历是无序的（因为对象本身就没有存储顺序）。但是数组是有的，有index索引，记录每个元素的顺序。

250. JS（V8）垃圾回收机制

JS（V8）垃圾回收机制： GC -----> Garbage Collecton 垃圾回收 垃圾收集器（自动回收机制）（C / C++ 就没有）

标识无用变量方法（GC 跟踪每个变量是否有用，无用变量打上标记，回收其占用内存）：标记清除（V8）和引用计数

标记清除会导致内存空间分配不连续（内存碎片）、分配速度慢

标记整理：

引用计数（跟踪记录每个值被引用的次数。

）

上面即循环引用的例子

回收

251. Vue 动态绑定属性名

vue 动态绑定属性名

252. Vue 中 v-for 支持的类型

vue 中 v-for 支持的类型（比原生的 for 屌很多的） in / of 这两个都可以，作用完全一样（跟原生是不一样的）

1、遍历数组（字符串）

2、遍历对象 value - key - index

         （键值对索引）

3、遍历数字

4、遍历 itarable（可迭代）对象

**key 属性 ** ）

Vue3.x 新增自动生成唯一的 key 值

Vue2.x 必须写key

VNode 虚拟节点

template中的每一个标签元素 vue 都会转化成一个个的 VNode

template -> VNode -> 真实DOM

虚拟DOM ？可以干嘛？

（1）、做 diff 算法（绑定 v-for 的 key）

（2）、跨平台。vue 可以写 PC Web / 移动端 / H5 / 小程序 / 甚至桌面端 / 安卓 / IOS … 靠的是 VDOM 的转换

253. position: fixed 的定位特性

position: fixed; 一般都是相对于屏幕视窗（浏览器窗口）来进行定位。（屏幕尺寸大小）

所以设置 width 要动态计算 calc（）函数除非

254. Vue 组件库相关

Vue 组件库相关

（1）、直接用

main.js 文件
// 组件库
import Element from 'element-ui'

Vue.use(Element) // 使用组件库的所有组件（全部加载，不管用没用到）

（2）、lazy-use ** 按需引入**

main.js 文件
// 组件库
import './lazy_use' // use lazy load components

lazy_use.js 文件
import Vue from 'vue'
import { Input, List, Dropdown, Tooltip ... } from 'ant-design-vue' // 按需引入

Vue.use(Input)
Vue.use(List)
Vue.use(Dropdown)
Vue.use(Tooltip)
...

如果仅仅是完成上面的操作，还是不能实现真正的按需加载的。

需要下载 babel-plugin-component 插件并且在 babel.config.js 文件中进行对应的插件配置（按需引入的组件库和按需引入的样式）

以上，就可以做到按需引入了。

重写组件库样式：

1、建element-ui.scss文件在style文件夹中，在index.scss中@import引入，然后在 App.vue 文件的 style 中 @import 引入

2、建global.less文件重写 antdv 样式，在 main.js 中直接 import 该文件

这样就可以了。

element-ui 的 layout 布局中的响应式布局

<el-col :lg="{span:'12-25'}"></el-col>

.el-col-lg-12-25 {
    width: 48%;
}

:lg=“{span:‘12-25’}” 和 .el-col-lg-12-25 =======> 即 el-col-lg-12-25 设置的 width 就是 :lg=“{span:‘12-25’}” 对应的宽度（12-25 就是从第12列到第25列的意思）

255. property 和 attribute 的区别

property 和 attribute 的区别（类似 $attr 和 $props）

1、 property（如 style,className,childNodes,classList …）

（1）、 指的是操作 DOM 的属性像获取到DOM后设置 xxx.style.color、xxx.className、xxx.childNodes、xxx.firstChild …

（2）、值只能是字符串（操作JS）

（3）、长属性名是驼峰写法

2、 attribute（如 id,class,src,title,alt …）

（1）、 指的是操作 HTML 的属性像设置和获取DOM元素的属性 xxx.getAttribute(‘class’)、xxx.setAttribute(‘title’, ‘cusTitle’)

（2）、值可以是数组/ 对象等（HTML）

（3）、属性名

e.g.

$listeners （vue3 deprecated）

v-bind=“$attrs” v-on=“$listeners” $options ===> options API 整个获取自定义属性

事件监听的具体使用：

父组件：

子组件：

这里的v-on=“$listeners” 就相当于继承了父组件中的除了 @run 之外的所有事件监听了（也就是红框框出来的那些事件）

也相当于：

替代了手动写$emit 事件。

所以，这个 @run 在父组件定义就行了。在子组件这里再次定义的话就相当于你执行了两次 run 了。

256. Vue 的 install

257. flex 和 grid 布局

flex （一维 / 单行） grid （二(多)维 / 多行）

让最后一行列表左对齐

(1)、grid

 display: grid;
 justify-content: space-around;
 grid-template-columns: repeat(auto-fill, 30%);

// 子元素
width: 30%;
height: 100px;
background: pink;
margin: 12px;

(1)、flex

粗暴点，直接给最后一个 margin-right
在后面套两个
(空元素占位)

258. JSON Schema

JSON Schema

JSON : JavaScript Object Notation js对象（万物皆对象）注释

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。key 和 value 都是字符串

JSON Schema 是一套 JSON规范，用于校验JSON的工具。(格式有点类似于AST？) 就是一份JSON文件的说明文档，叼一点，可以生成form表单（插件支持）和做数据（字段）校验

包含了「表单数据描述」和「表单校验」功能。

基本格式：

json格式是不支持注释的，所以可以用 json schema 来定义json，在json文件里加个description字段就可以了。title是定义标题的。

field widget 组件

语法：定义了一系列的规则（关键字） ajv: JSON Schema 的校验器

组成：

1、schema：用于描述表单数据的 JSON Schema

2、ui-schema：（ui 也可直接配置在 schema 中）用于配置表单展示样式

3、error-schema ：用于配置表单校验错误文案信息

…

关键字：

1、$schema 关键字：声明了针对哪个版本的JSON Schema标准编写模式。

2、$id 属性：为JSON Schema实例声明一个唯一标识符；声明了一个解析$ref 的URI时的基础URI

3、$ref 属性：引用同一个JSON Schema文件或其他JSON Schema文件中的JSON Schema实例片段。这个属性的值通常是一个相对或者绝对URI，# 符号后面的部分是JSON指针

4、dependencies 关键字：属性依赖：如果JSON实例拥有对应的属性名name，则也必须有name对应的propertyset数组内的所有属性名

5、definitions 关键字：这个关键字可以在JSON Schema实例中定义一个可以在这个JSON Schema实例中被引用的JSON子模式。

259. position 和 flex 的冲突

同一个盒子同时使用 position 和 flex 会产生冲突（flex居中和子元素 position: absolute 之间产生的冲突），给盒子外面再套一层 div，相对 div 定位

260. 声明式编程

声明式编程（函数式编程 是其中一种）与之对应的是命令式编程

261. React

React

（1）、开发 web 页面

（2）、React Native 开发移动端跨平台

（3）、React VR 开发虚拟现实web应用

依赖包： react / react-dom（渲染到不同平台的依赖，比如 react web 和 react native ） / babel

vue只要数据更新,会自动进行render,视图上显示的是最新的数据。

而react默认不会自动执行render (可以是 html元素或组件--------类组件和函数式组件)的，要在数据更行后手动执行一下render拿到最新数据

script标签中加 type=“text/babel” 为了能让 babel 解析 jsx 代码

函数的返回值默认是 undefined （没写 return 的话）

es6的 class 默认是绑定的严格模式下的，所以 class 里的 this 如果原本是指向 window 的，会变成 undefined （使用 babel 转换的代码也是，默认都是开启严格模式）

262. 禁止移动端的触摸事件

禁止移动端的触摸事件（touch event），可以强制不显示浏览器的滚动条（比如 safari 会自动显示滚动条）

** touch-event: none;**

263. VUE_BASE_API 配置

VUE_BASE_API 在 .env等配置文件中：

（1）、完整的 url ：那就是 **base_url **+ api文件中的 ** request_url **

本地（开发）环境和测试环境都是这个的话，那访问的 api 就是

生产环境的 api

（2）、单纯写 /api 这个是在 nginx.config 配置文件中进行配置的。（nginx是部署在服务器上面的，不是在后端代码中的。nginx 服务配置项目）

1、如果是在开发环境中，那么访问的 baseUrl 就是 http://172.21.44.15:8080 + requestUrl 就是 /api/user/search

（如果没在vue.config.js文件中的devServer的proxy中设置 ‘/api’ 代理的话，那就会报 404 not found 错误。要改VUE_BASE_API的）

2、如果是在测试环境中，那么访问的 baseUrl 就是 http://api-test.xd0760.com + requestUrl 就是 /api/user/search

3、如果是在生产（正式）环境中，那么访问的 baseUrl 就是 https://api.xd0760.com + requestUrl 就是 /api/user/search

同理，VUE_BASE_API_UPLOAD 也一样，设置不同环境下的服务器存储文件（图片、视频等）的地址，如果是配置的 /uploads 的话，要注意对应环境，如果是测试环境就会报错了

264. 随机生成颜色

随机生成颜色

const createRandomColor = () => #${Math.random().toString(16).slice(-6)}

265. 监听本地存储变化

原生方法监听本地存储（localStorage）的变化：

window.addEventListener(‘storage’, (event) => {

console.log(‘storage changed’, event)

})

var orignalSetItem = localStorage.setItem

localStorage.setItem = function(key,newValue) { var setItemEvent = new Event(“setItemEvent”) setItemEvent.newValue = newValue window.dispatchEvent(setItemEvent) orignalSetItem.apply(this,arguments) }

window.addEventListener(“setItemEvent”, function (e) { alert(e.newValue) }) localStorage.setItem(“name”,“wang”)

266. 修改 node_modules 代码

修改 node_modules 上的代码：用 patch-package （依赖 git diff 实现的 patches 文件夹）呀

注意: 要改动的包在 package.json 中必须声明确定的版本，不能有~或者^的前缀。

（1）、安装patch-package

npm i patch-package --save-dev

（2）、修改完依赖后，运行patch-package创建patch文件 npx 执行 node_modules 文件夹下面的 .bin 可执行文件

npx patch-package 依赖名称
例子： npx patch-package element-ui

（3）、修改package.json的内容，在scripts中加入”postinstall”: “patch-package”，这个是为了npm install的时候自动为依赖包打上我们改过的依赖

 "scripts": {
　　...
　　"**postinstall**": "patch-package"
　　}

267. Vue 的各版本对比

vue 的各版本对比：

268. 编程英语

编程英语：

pseudo-element：伪元素

locale：特定语言环境的（当地的） ‘zh-CN’ ‘en-US’ （‘ar-EG’ 阿拉伯语言） toLocaleString() toLocaleLowerCase()

SDK： **software development kit **软件开发工具包

accessibility：无障碍（a11y） ----视 / 听 / 行动 / 理解

patch：打补丁

bundler：打包（工具）（webpack / browserify）

chunk：块

bundle：束

vendor：供应商（第三方库）

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。（不是多少个 chunk 就会对应生成多少个 bundle ，（虽然大部分情况下会是一一对应））

invoke：调用（函数调用等）

revoke：撤销

implicit：隐式的…

explicit：显式的…

hoisting：变量提升 (var关键字声明才会有)

indicate：表明，显示

anonymous：匿名的…

nested：嵌套的..

polygon：多边形

immutable：不可变的（immer 一直如此 immer.js）

coupon：优惠券

trie：字典树

traverse：遍历

linked list：链表

expanse ：花费（消耗 expansive 贵的）

manifest：清单文件（）

fallback： 兜底

estimate：估算

diagnostics：诊断

concurrent：并发

shims：垫片 shims.vue.ts

Polyfill：填充器

关于符号：（prettie）

semi：末尾加不加分号（“false” “true”）一行的结束

semicolon：分号

semi-spacing：强制分号间隔；分号前后是否空格

brackets：括号

comma：逗号

trailingComma：多行输入尾部加不加逗号

单引号： singleQoute

双引号： doubleQoute

wrap：换行（nowrap --- 一行显示 white-space 只有一行文字的时候） wrapper：包装器

269. 浏览器使用 export / import 语法

浏览器使用 export / import 语法：异步方法

默认是在 webpack/cli、 babel 等脚手架/编译工具中有集成 / 做了代码转换

（1）、使用 type=“module” （静态引入）

（2）、动态引入

（3）、解构（async / await）

270. 前端模块化

前端模块化（js 模块化规范） ---- UMD / CMD / AMD / ES Module （esm ） / CommomJS（cjs）

一、 CommonJS

用 module.exports 导出模块, 用 require 加载模块

CSS 模块化（防止文件命名/样式冲突）：

命名规范（BEM[ block__element—modifier ]、OOCSS [ 原子类类似 tailwind 思想 ]、SMACSS、ITCSS…）、

CSS Modules（主要 react 在用）、

为

CSS-in-JS （styled-components react在用，相当于 vue 的 style scoped）【 html-in-js： JSX 】 “all in js”

emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，使用css-modules的解决方案，主要是出于性能考虑。还有增加了包体积

271. Div+contenteditable 实现富文本输入框

Div+contenteditable 实现 可插入自定义内容（标签） 的输入框（简单的富文本输入框）

272. jenkins 和 docker 的区别

jenkins 是 java开发，用于自动化构建（打包）和部署项目 --- 配置命令，自动跑

docker 是 go开发，是个虚拟机，是容器

273. 第三方统一登录SSO

第三方统一登录SSO

带参数跳转回调会自己项目中。

274. chrome devtools

chrome devtools 开发者文档实用小技巧：

// $_ (获取控制台上一次的结果)

// $ 1-4 (获取 $0 的 previous 元素)

// $(’ 类名/id/属性名 ’) **$(‘.main’)** === document.querySelector(‘.main’) $ 就是 document.querySelector() 的别名（语法糖）

// :has() :contains()

// table / dir / clear() 代替 console.table / dir console.clear()

**// **监听事件？像 vue 一样在方法中打印当前元素的DOM对象事件 (e) / ($event) ? 使用 monitorEvents 这个 api 啊

// monitor 相当于 vue 中的 watch 了，对函数做监听？？取消就 unmonitor 了

// :has() 选择器和 :contains() 选择器

选中并删除所有带”关键字”的评论 $(‘.reply-wrap**:contains(关键字)**‘).remove()
选中并删除所有用户等级在三级以上的评论 $(‘.reply-wrap**:has(.l3),.reply-wrap:has(.l4),.replay-wrap:has(.l5),reply-wrap:has(.l6)**‘).remove()