原理图解

• 1、首先肯定是要先解析入口文件entry，将其转为AST(抽象语法书)，使用@babel/parser


• 2、然后使用@babel/traverse去找出入口文件所有依赖模块


• 3、然后使用@babel/core+@babel/preset-env将入口文件的AST转为Code


• 4、将2中找到的入口文件的依赖模块，进行遍历递归，重复执行1，2，3


• 5。重写require函数，并与4中生成的递归关系图一起，输出到bundle中

代码实现

webpack具体实现原理是很复杂的，这里只是简单实现一下，让大家粗略了解一下，webpack是怎么运作的。在代码实现过程中，大家可以自己console.log一下，看看ast，dependcies，code这些具体长什么样，我这里就不展示了，自己去看会比较有成就感，嘿嘿！！

目录

config.js

这个文件中模拟webpack的配置

const path = require('path')

module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    filename: 'main.js'

  }

}

入口文件

src/index.js是入口文件

// src/index

import { age } from './aa.js'

import { name } from './hh.js'



console.log(`${name}今年${age}岁了`)



// src/aa.js

export const age = 18



// src/hh.js

console.log('我来了')

export const name = '林三心'

1. 定义Compiler类

// index.js

class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {}

  // 重写 require函数,输出bundle

  generate() {}

}

2. 解析入口文件,获取 AST

我们这里使用@babel/parser,这是babel7的工具,来帮助我们分析内部的语法,包括 es6,返回一个 AST 抽象语法树

const fs = require('fs')

const parser = require('@babel/parser')

const options = require('./webpack.config')



const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  }

}



class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const ast = Parser.getAst(this.entry)

  }

  // 重写 require函数,输出bundle

  generate() {}

}



new Compiler(options).run()

3. 找出所有依赖模块

Babel 提供了@babel/traverse(遍历)方法维护这 AST 树的整体状态,我们这里使用它来帮我们找出依赖模块。

const fs = require('fs')

const path = require('path')

const options = require('./webpack.config')

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default



const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  }

}



class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const { getAst, getDependecies } = Parser

    const ast = getAst(this.entry)

    const dependecies = getDependecies(ast, this.entry)

  }

  // 重写 require函数,输出bundle

  generate() {}

}



new Compiler(options).run()

4. AST 转换为 code

将 AST 语法树转换为浏览器可执行代码,我们这里使用@babel/core 和 @babel/preset-env。

const fs = require('fs')

const path = require('path')

const options = require('./webpack.config')

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')



const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}



class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(this.entry)

    const dependecies = getDependecies(ast, this.entry)

    const code = getCode(ast)

  }

  // 重写 require函数,输出bundle

  generate() {}

}



new Compiler(options).run()

5. 递归解析所有依赖项,生成依赖关系图

const fs = require('fs')

const path = require('path')

const options = require('./webpack.config')

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')



const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}



class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    // 解析入口文件

    const info = this.build(this.entry)

    this.modules.push(info)

    this.modules.forEach(({ dependecies }) => {

      // 判断有依赖对象,递归解析所有依赖项

      if (dependecies) {

        for (const dependency in dependecies) {

          this.modules.push(this.build(dependecies[dependency]))

        }

      }

    })

    // 生成依赖关系图

    const dependencyGraph = this.modules.reduce(

      (graph, item) => ({

        ...graph,

        // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容

        [item.filename]: {

          dependecies: item.dependecies,

          code: item.code

        }

      }),

      {}

    )

  }

  build(filename) {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(filename)

    const dependecies = getDependecies(ast, filename)

    const code = getCode(ast)

    return {

      // 文件路径,可以作为每个模块的唯一标识符

      filename,

      // 依赖对象,保存着依赖模块路径

      dependecies,

      // 文件内容

      code

    }

  }

  // 重写 require函数,输出bundle

  generate() {}

}



new Compiler(options).run()

6. 重写 require 函数,输出 bundle

const fs = require('fs')

const path = require('path')

const options = require('./webpack.config')

const parser = require('@babel/parser')

const traverse = require('@babel/traverse').default

const { transformFromAst } = require('@babel/core')



const Parser = {

  getAst: path => {

    // 读取入口文件

    const content = fs.readFileSync(path, 'utf-8')

    // 将文件内容转为AST抽象语法树

    return parser.parse(content, {

      sourceType: 'module'

    })

  },

  getDependecies: (ast, filename) => {

    const dependecies = {}

    // 遍历所有的 import 模块,存入dependecies

    traverse(ast, {

      // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)

      ImportDeclaration({ node }) {

        const dirname = path.dirname(filename)

        // 保存依赖模块路径,之后生成依赖关系图需要用到

        const filepath = './' + path.join(dirname, node.source.value)

        dependecies[node.source.value] = filepath

      }

    })

    return dependecies

  },

  getCode: ast => {

    // AST转换为code

    const { code } = transformFromAst(ast, null, {

      presets: ['@babel/preset-env']

    })

    return code

  }

}



class Compiler {

  constructor(options) {

    // webpack 配置

    const { entry, output } = options

    // 入口

    this.entry = entry

    // 出口

    this.output = output

    // 模块

    this.modules = []

  }

  // 构建启动

  run() {

    // 解析入口文件

    const info = this.build(this.entry)

    this.modules.push(info)

    this.modules.forEach(({ dependecies }) => {

      // 判断有依赖对象,递归解析所有依赖项

      if (dependecies) {

        for (const dependency in dependecies) {

          this.modules.push(this.build(dependecies[dependency]))

        }

      }

    })

    // 生成依赖关系图

    const dependencyGraph = this.modules.reduce(

      (graph, item) => ({

        ...graph,

        // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容

        [item.filename]: {

          dependecies: item.dependecies,

          code: item.code

        }

      }),

      {}

    )

    this.generate(dependencyGraph)

  }

  build(filename) {

    const { getAst, getDependecies, getCode } = Parser

    const ast = getAst(filename)

    const dependecies = getDependecies(ast, filename)

    const code = getCode(ast)

    return {

      // 文件路径,可以作为每个模块的唯一标识符

      filename,

      // 依赖对象,保存着依赖模块路径

      dependecies,

      // 文件内容

      code

    }

  }

  // 重写 require函数 (浏览器不能识别commonjs语法),输出bundle

  generate(code) {

    // 输出文件路径

    const filePath = path.join(this.output.path, this.output.filename)

    // 懵逼了吗? 没事,下一节我们捋一捋

    const bundle = `(function(graph){

      function require(module){

        function localRequire(relativePath){

          return require(graph[module].dependecies[relativePath])

        }

        var exports = {};

        (function(require,exports,code){

          eval(code)

        })(localRequire,exports,graph[module].code);

        return exports;

      }

      require('${this.entry}')

    })(${JSON.stringify(code)})`



    // 把文件内容写入到文件系统

    fs.writeFileSync(filePath, bundle, 'utf-8')

  }

}



new Compiler(options).run()

7. 看看main里的代码

实现了上面的代码，也就实现了把打包后的代码写到main.js文件里，咱们来看看那main.js文件里的代码吧：

(function(graph){

      function require(module){

        function localRequire(relativePath){

          return require(graph[module].dependecies[relativePath])

        }

        var exports = {};

        (function(require,exports,code){

          eval(code)

        })(localRequire,exports,graph[module].code);

        return exports;

      }

      require('./src/index.js')

    })({

      "./src/index.js": {

          "dependecies": {

              "./aa.js": "./src\\aa.js",

              "./hh.js": "./src\\hh.js"

          },

          "code": "\"use strict\";\n\nvar _aa = require(\"./aa.js\");\n\nvar _hh = require(\"./hh.js\");\n\nconsole.log(\"\".concat(_hh.name, \"\\u4ECA\\u5E74\").concat(_aa.age, \"\\u5C81\\u4E86\"));"

      },

      "./src\\aa.js": {

          "dependecies": {},

          "code": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.age = void 0;\nvar age = 18;\nexports.age = age;"

      },

      "./src\\hh.js": {

          "dependecies": {},

          "code": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.name = void 0;\nconsole.log('我来了');\nvar name = '林三心';\nexports.name = name;"

      }

  })

大家可以执行一下main.js的代码，输出结果是：

我来了

林三心今年18岁了

结语

webpack具体实现原理是很复杂的，这里只是简单实现一下，让大家粗略了解一下，webpack是怎么运作的。在代码实现过程中，大家可以自己console.log一下，看看ast，dependcies，code这些具体长什么样，我这里就不展示了，自己去看会比较有成就感，嘿嘿！！

1. 概述

从我们接触前端开始，每个项目的根目录下一般都会有一个package.json文件，这个文件定义了当前项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等）。

当运行npm install命令的时候，会根据package.json文件中的配置自动下载所需的模块，也就是配置项目所需的运行和开发环境。

比如下面这个文件，只存在简单的项目名称和版本号。

{

  "name" : "yindong",

  "version" : "1.0.0",

}

package.json文件是一个JSON对象，这从他的后缀名.json就可以看出来，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本号。

当然很多人其实并不关心package.json的配置，他们应用的更多的是dependencies或devDependencies配置。

下面是一个更完整的package.json文件，详细解释一下每个字段的真实含义。

{

    "name": "yindong",

    "version":"0.0.1",

    "description": "antd-theme",

    "keywords":["node.js","antd", "theme"],

    "homepage": "https://zhiqianduan.com",

    "bugs":{"url":"http://path/to/bug","email":"yindong@xxxx.com"},

    "license": "ISC",

    "author": "yindong",

    "contributors":[{"name":"yindong","email":"yindong@xxxx.com"}],

    "files": "",

    "main": "./dist/default.js",

    "bin": "",

    "man": "",

    "directories": "",

    "repository": {

		"type": "git",

		"url": "https://path/to/url"

	},

    "scripts": {

      "start": "webpack serve --config webpack.config.dev.js --progress"

    },

    "config": { "port" : "8080" },

    "dependencies": {},

    "devDependencies": {

        "@babel/core": "^7.14.3",

        "@babel/preset-env": "^7.14.4",

        "@babel/preset-react": "^7.13.13",

        "babel-loader": "^8.2.2",

        "babel-plugin-import": "^1.13.3",

        "glob": "^7.1.7",

        "less": "^3.9.0",

        "less-loader": "^9.0.0",

        "style-loader": "^2.0.0",

        "webpack": "^5.38.1",

        "webpack-cli": "^4.7.0",

        "webpack-dev-server": "^3.11.2"

    },

    "peerDependencies": {

        "tea": "2.x"

    },

    "bundledDependencies": [

        "renderized", "super-streams"

    ],

    "engines": {"node": "0.10.x"},

	  "os" : [ "win32", "darwin", "linux" ],

    "cpu" : [ "x64", "ia32" ],

    "private": false,

    "publishConfig": {}

  }

  

2. name字段

package.json文件中最重要的就是name和version字段，这两项是必填的。名称和版本一起构成一个标识符，该标识符被认为是完全唯一的。对包的更改应该与对版本的更改一起进行。

name必须小于等于214个字符，不能以.或_开头，不能有大写字母，因为名称最终成为URL的一部分因此不能包含任何非URL安全字符。
npm官方建议我们不要使用与核心节点模块相同的名称。不要在名称中加js或node。如果需要可以使用engines来指定运行环境。

该名称会作为参数传递给require，因此它应该是简短的，但也需要具有合理的描述性。

3. version字段

version一般的格式是x.x.x, 并且需要遵循该规则。

package.json文件中最重要的就是name和version字段，这两项是必填的。名称和版本一起构成一个标识符，该标识符被认为是完全唯一的。每次发布时version不能与已存在的一致。

4. description字段

description是一个字符串，用于编写描述信息。有助于人们在npm库中搜索的时候发现你的模块。

5. keywords字段

keywords是一个字符串组成的数组，有助于人们在npm库中搜索的时候发现你的模块。

6. homepage字段

homepage项目的主页地址。

7. bugs字段

bugs用于项目问题的反馈issue地址或者一个邮箱。

"bugs": { 

  "url" : "https://github.com/owner/project/issues",

  "email" : "project@hostname.com"

}

8. license字段

license是当前项目的协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制。

"license" : "BSD-3-Clause"

9. author字段 contributors字段

author是具体一个人，contributors表示一群人，他们都表示当前项目的共享者。同时每个人都是一个对象。具有name字段和可选的url及email字段。

"author": {

  "name" : "yindong",

  "email" : "yindong@xx.com",

  "url" : "https://zhiqianduan.com/"

}

也可以写成一个字符串

"author": "yindong yindong@xx.com (https://zhiqianduan.com/)"

10. files字段

files属性的值是一个数组，内容是模块下文件名或者文件夹名，如果是文件夹名，则文件夹下所有的文件也会被包含进来（除非文件被另一些配置排除了）

可以在模块根目录下创建一个.npmignore文件，写在这个文件里边的文件即便被写在files属性里边也会被排除在外，这个文件的写法与.gitignore类似。

11. main字段

main字段指定了加载的入口文件，require导入的时候就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。

12. bin字段

bin项用来指定每个内部命令对应的可执行文件的位置。如果你编写的是一个node工具的时候一定会用到bin字段。

当我们编写一个cli工具的时候，需要指定工具的运行命令，比如常用的webpack模块，他的运行命令就是webpack。

"bin": {

  "webpack": "bin/index.js",

}

当我们执行webpack命令的时候就会执行bin/index.js文件中的代码。

在模块以依赖的方式被安装，如果存在bin选项。在node_modules/.bin/生成对应的文件，
Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本。

所有node_modules/.bin/目录下的命令，都可以用npm run [命令]的格式运行。在命令行下，键入npm run，然后按tab键，就会显示所有可以使用的命令。

13. man字段

man用来指定当前模块的man文档的位置。

"man" :[ "./doc/calc.1" ]

14. directories字段

directories制定一些方法来描述模块的结构, 用于告诉用户每个目录在什么位置。

15. repository字段

指定一个代码存放地址，对想要为你的项目贡献代码的人有帮助

"repository" : {

  "type" : "git", 

  "url" : "https://github.com/npm/npm.git"

}

16. scripts字段

scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

"scripts": {

  "start": "node ./start.js"

}

使用scripts字段可以快速的执行shell命令，可以理解为alias。

scripts可以直接使用node_modules中安装的模块，这区别于直接运行需要使用npx命令。

"scripts": {

  "build": "webpack"

}



// npm run build

// npx webpack

17. config字段

config字段用于添加命令行的环境变量。

{

  "name" : "yindong",

  "config" : { "port" : "8080" },

  "scripts" : { "start" : "node server.js" }

}

然后，在server.js脚本就可以引用config字段的值。

console.log(process.env.npm_package_config_port); // 8080

用户可以通过npm config set来修改这个值。

npm config set yindong:port 8000

18. dependencies字段, devDependencies字段

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

它们的值都是一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

当安装依赖的时候使用--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。

"devDependencies": {

        "webpack": "^5.38.1",

}

对象的每一项通过一个键值对表示，前面是模块名称，后面是对应模块的版本号。版本号遵循“大版本.次要版本.小版本”的格式规定。

版本说明

固定版本: 比如5.38.1，安装时只安装指定版本。
波浪号: 比如~5.38.1, 表示安装5.38.x的最新版本（不低于5.38.1），但是不安装5.39.x，也就是说安装时不改变大版本号和次要版本号。
插入号: 比如ˆ5.38.1, ，表示安装5.x.x的最新版本（不低于5.38.1），但是不安装6.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
latest: 安装最新版本。

19. peerDependencies字段

当我们开发一个模块的时候，如果当前模块与所依赖的模块同时依赖一个第三方模块，并且依赖的是两个不兼容的版本时就会出现问题。

比如，你的项目依赖A模块和B模块的1.0版，而A模块本身又依赖B模块的2.0版。

大多数情况下，这不构成问题，B模块的两个版本可以并存，同时运行。但是，有一种情况，会出现问题，就是这种依赖关系将暴露给用户。

最典型的场景就是插件，比如A模块是B模块的插件。用户安装的B模块是1.0版本，但是A插件只能和2.0版本的B模块一起使用。这时，用户要是将1.0版本的B的实例传给A，就会出现问题。因此，需要一种机制，在模板安装的时候提醒用户，如果A和B一起安装，那么B必须是2.0模块。

peerDependencies字段，就是用来供插件指定其所需要的主工具的版本。可以通过peerDependencies字段来限制，使用myless模块必须依赖less模块的3.9.x版本.

{

  "name": "myless",

  "peerDependencies": {

    "less": "3.9.x"

  }

}

注意，从npm 3.0版开始，peerDependencies不再会默认安装了。就是初始化的时候不会默认带出。

20. bundledDependencies字段

bundledDependencies指定发布的时候会被一起打包的模块.

21. optionalDependencies字段

如果一个依赖模块可以被使用， 同时你也希望在该模块找不到或无法获取时npm继续运行，你可以把这个模块依赖放到optionalDependencies配置中。这个配置的写法和dependencies的写法一样，不同的是这里边写的模块安装失败不会导致npm install失败。

22. engines字段

engines字段指明了该模块运行的平台，比如Node或者npm的某个版本或者浏览器。

{ "engines" : { "node" : ">=0.10.3 <0.12", "npm" : "~1.0.20" } }

23. os字段

可以指定你的模块只能在哪个操作系统上运行

"os" : [ "darwin", "linux", "win32" ]

24. cpu字段

限制模块只能在某种架构的cpu下运行

"cpu" : [ "x64", "ia32" ]

25. private字段

如果这个属性被设置为true，npm将拒绝发布它，这是为了防止一个私有模块被无意间发布出去。

"private": true

26. publishConfig字段

这个配置是会在模块发布时生效，用于设置发布用到的一些值的集合。如果你不想模块被默认标记为最新的，或者默认发布到公共仓库，可以在这里配置tag或仓库地址。

通常publishConfig会配合private来使用，如果你只想让模块被发布到一个特定的npm仓库，如一个内部的仓库。

"private": true,

"publishConfig": {

  "tag": "1.0.0",

  "registry": "https://registry.npmjs.org/",

  "access": "public"

}

27. preferGlobal字段

preferGlobal的值是布尔值，表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。

"preferGlobal": false

28. browser字段

browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。

"browser": {

  "tipso": "./node_modules/tipso/src/tipso.js"

},

链接：https://juejin.cn/post/6987179395714646024

介绍

• 我们说起捉包工具，可能大家比较熟悉的Fiddler工具，它是通过断点修改请求响应的方式，平时使用测试捉包也是很方便的，今天主角介绍另一个捉包工具whistle，这个工具比较轻，无需安装客户端只需通过终端node即可跑起捉取数据


• whistle用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能，更多内容介绍请查看官方文档

安装

1. 安装node 文档地址

$ node -v  // 查看node版本号

v12.0.0 //（建议12版本以上，不然手机捉包会有点问题）

2. 安装whistle

npm install -g whistle

或者直接指定镜像安装：

npm install whistle -g --registry=https://registry.npm.taobao.org

3. 使用whistle
   
   
   
   • 启动whistle: (以下指令，window系统不需要$符号）
   
   
   
   

   $ w2 start
   

   
   
   
   
   • 重启whsitle:
   
   
   
   

   $ w2 restart
   

   
   
   
   
   • 停止whistle:3
   
   
   
   

   $ w2 stop
   

   
   
   
   
   • 调试模式启动whistle(主要用于查看whistle的异常及插件开发):
   
   
   
   

   $ w2 run
   

   
   w2 start启动完即可查看本地ip，把ip拷贝到浏览器即可

在浏览器显示效果

4. 配置代理 更多配置请查看官方文档

抓取 Https 请求需要配置

• 电脑上安装根证书（现在安装证书也没那么麻烦，下载完直接点安装一步下一步就行）

   下载根证书：Whistle 监控界面 -> HTTPS -> Download RootCA

   下载完根证书后点击rootCA.crt文件，弹出根证书安装对话框。

   Windows 安装方法：

• 移动端需要在设置中配置当前Wi-Fi的代理，以 harmonyOS 为例：

• 手机上安装根证书

   iOS：

   Safari 地址栏输入 rootca.pro，按提示安装证书。  

   iOS 10.3 之后需要手动信任自定义根证书，设置路径：设置 --> 通用 --> 关于本机 --> 证书信任设置

   Android：

   用浏览器扫描 whistle 监控界面 HTTPS 的二维码下载安装，或者浏览器地址栏 rootca.pro 按提示安装。

   ca 证书安装完后可以在 Android 手机的“设置” -》“安全和隐私” -》“受信任的凭证” 里查看手机上有没有安装成功。

   部分浏览器不会自动识别 ca 证书，可以通过 Android Chrome 来完成安装。

• 电脑选择配置勾选捉取https：

• 最后捉取得效果图：

总结

• 其实使用并不难，按上面安装步骤来即可，这个捉包方法适用于捉取小程序体验版或测试版，不支持小程序正式版本，如果打开小程序正式版本，整个小程序请求接口都会异常无法请求；如果你的体验版小程序无法捉取，请尝试打开调试工具；（本文仅限学习，方便测试使用，还有更多好玩的东西，请移步到官方文档）

前言

招聘季节一般都在金三银四，或者金九银十。最近在这五六月份，陆陆续续面试了十几个高级前端。有一套考察算法的小题目。后台返回一个扁平的数据结构，转成树。

我们看下题目：打平的数据内容如下：

let arr = [

    {id: 1, name: '部门1', pid: 0},

    {id: 2, name: '部门2', pid: 1},

    {id: 3, name: '部门3', pid: 1},

    {id: 4, name: '部门4', pid: 3},

    {id: 5, name: '部门5', pid: 4},

]

输出结果

[

    {

        "id": 1,

        "name": "部门1",

        "pid": 0,

        "children": [

            {

                "id": 2,

                "name": "部门2",

                "pid": 1,

                "children": []

            },

            {

                "id": 3,

                "name": "部门3",

                "pid": 1,

                "children": [

                    // 结果 ,,,

                ]

            }

        ]

    }

]

我们的要求很简单，可以先不用考虑性能问题。实现功能即可，回头分析了面试的情况，结果使我大吃一惊。

10%的人没思路，没碰到过这种结构

60%的人说用过递归，有思路，给他个笔记本，但就是写不出来

20%的人在引导下，磕磕绊绊能写出来

剩下10%的人能写出来，但性能不是最佳

感觉不是在招聘季节遇到一个合适的人真的很难。

接下来，我们用几种方法来实现这个小算法

什么是好算法，什么是坏算法

判断一个算法的好坏，一般从执行时间和占用空间来看,执行时间越短，占用的内存空间越小，那么它就是好的算法。对应的，我们常常用时间复杂度代表执行时间，空间复杂度代表占用的内存空间。

时间复杂度

时间复杂度的计算并不是计算程序具体运行的时间，而是算法执行语句的次数。

随着n的不断增大，时间复杂度不断增大，算法花费时间越多。 常见的时间复杂度有

• 常数阶O(1)


• 对数阶O(log2 n)


• 线性阶O(n)


• 线性对数阶O(n log2 n)


• 平方阶O(n^2)


• 立方阶O(n^3)


• k次方阶O(n^K)


• 指数阶O(2^n)

计算方法

1. 选取相对增长最高的项


2. 最高项系数是都化为1


3. 若是常数的话用O(1)表示

举个例子：如f(n)=3*n^4+3n+300 则 O(n)=n^4

通常我们计算时间复杂度都是计算最坏情况。计算时间复杂度的要注意的几个点

• 如果算法的执行时间不随n的增加而增长，假如算法中有上千条语句，执行时间也不过是一个较大的常数。此类算法的时间复杂度是O(1)。 举例如下：代码执行100次，是一个常数，复杂度也是O(1)。

    let x = 1;

    while (x <100) {

     x++;

    }

• 有多个循环语句时候，算法的时间复杂度是由嵌套层数最多的循环语句中最内层语句的方法决定的。举例如下：在下面for循环当中，外层循环每执行一次，内层循环要执行n次，执行次数是根据n所决定的，时间复杂度是O(n^2)。

  for (i = 0; i < n; i++){

         for (j = 0; j < n; j++) {

             // ...code

         }

     }

• 循环不仅与n有关，还与执行循环判断条件有关。举例如下：在代码中，如果arr[i]不等于1的话，时间复杂度是O(n)。如果arr[i]等于1的话，循环不执行，时间复杂度是O(0)。

    for(var i = 0; i<n && arr[i] !=1; i++) {

    // ...code

    }

空间复杂度

空间复杂度是对一个算法在运行过程中临时占用存储空间的大小。

计算方法：

1. 忽略常数，用O(1)表示


2. 递归算法的空间复杂度=(递归深度n)*(每次递归所要的辅助空间)

计算空间复杂度的简单几点

• 仅仅只复制单个变量，空间复杂度为O(1)。举例如下：空间复杂度为O(n) = O(1)。

   let a = 1;

   let b = 2;

   let c = 3;

   console.log('输出a,b,c', a, b, c);

• 递归实现，调用fun函数，每次都创建1个变量k。调用n次，空间复杂度O(n*1) = O(n)。

    function fun(n) {

       let k = 10;

       if (n == k) {

           return n;

       } else {

           return fun(++n)

       }

    }

不考虑性能实现，递归遍历查找

主要思路是提供一个递getChildren的方法，该方法递归去查找子集。
就这样，不用考虑性能，无脑去查，大多数人只知道递归，就是写不出来。。。

/**

 * 递归查找，获取children

 */

const getChildren = (data, result, pid) => {

  for (const item of data) {

    if (item.pid === pid) {

      const newItem = {...item, children: []};

      result.push(newItem);

      getChildren(data, newItem.children, item.id);

    }

  }

}



/**

* 转换方法

*/

const arrayToTree = (data, pid) => {

  const result = [];

  getChildren(data, result, pid)

  return result;

}

从上面的代码我们分析，该实现的时间复杂度为O(2^n)。

不用递归，也能搞定

主要思路是先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储

function arrayToTree(items) {

  const result = [];   // 存放结果集

  const itemMap = {};  // 

    

  // 先转成map存储

  for (const item of items) {

    itemMap[item.id] = {...item, children: []}

  }

  

  for (const item of items) {

    const id = item.id;

    const pid = item.pid;

    const treeItem =  itemMap[id];

    if (pid === 0) {

      result.push(treeItem);

    } else {

      if (!itemMap[pid]) {

        itemMap[pid] = {

          children: [],

        }

      }

      itemMap[pid].children.push(treeItem)

    }



  }

  return result;

}

从上面的代码我们分析，有两次循环，该实现的时间复杂度为O(2n)，需要一个Map把数据存储起来，空间复杂度O(n)

最优性能

主要思路也是先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储。不同点在遍历的时候即做Map存储,有找对应关系。性能会更好。

function arrayToTree(items) {

  const result = [];   // 存放结果集

  const itemMap = {};  // 

  for (const item of items) {

    const id = item.id;

    const pid = item.pid;



    if (!itemMap[id]) {

      itemMap[id] = {

        children: [],

      }

    }



    itemMap[id] = {

      ...item,

      children: itemMap[id]['children']

    }



    const treeItem =  itemMap[id];



    if (pid === 0) {

      result.push(treeItem);

    } else {

      if (!itemMap[pid]) {

        itemMap[pid] = {

          children: [],

        }

      }

      itemMap[pid].children.push(treeItem)

    }



  }

  return result;

}

从上面的代码我们分析，一次循环就搞定了，该实现的时间复杂度为O(n)，需要一个Map把数据存储起来，空间复杂度O(n)

写在开头

• 近期我有写两篇文章，一篇是:petite-vue源码解析和掘金编辑器的源码解析，发现里面用到了Svelte这个框架


• 加上最近React17，vite大家也在逐步的用在生产环境中，我于是有了今天的思考

看前端的技术演进

• 原生Javascript - Jquery为代表的时代，例如，引入Jquery只要

<script src="cdn/jquery.min,js"></script>

• 接着便又有了gulp webpack等构建工具出现，React和Vue也在这个时候开始火了起来，随即而来的是一大堆工程化的辅助工具，例如babel,还有提供整套服务的create-react-app等脚手架


• 这也带来了问题，当然这个是npm的问题，每次启动项目前，都要安装大量的依赖，即便出现了yarn pnpm`等优化的依赖管理工具，但是这个问题根源不应该使用工具解决，而是问题本质是依赖本地化，代码和依赖需要工具帮助才能运行在浏览器中

总结就是：现有的开发模式，让项目太重，例如我要使用某个脚手架，我只想写一个helloworld演示下,结果它让我装500mb的依赖，不同的脚手架产物，配置不同，产物也不同

理想的开发模式

• 
  

  1.不需要辅助的工具配置，我不需要webpack这类帮我打包的工具，模块化浏览器本身就支持，而且是一个规范。例如vite号称不打包，用的是浏览器本身支持的esm模块化，但是它没有解决依赖的问题，因为依赖问题本身是依赖的问题，而不是工具的问题

  
  


• 
  

  2.不需要安装依赖，一切都可以import from remote,我觉得webpack5的Module Federation设计，就考虑到了这一点，下面是官方的解释：

  
  
  
  
  • 
    

    多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

    
    
  
  
  • 
    

    这通常被称作微前端，但并不仅限于此。

    
    
  
  
  
  

但是这可能并不是最佳实践，目前是有import from http，例如

import lodash from 'https://unpackage/lodash/es'

• 这里又会有人问，那你不都是要发请求吗，都是要每次启动的时候去远程拉取，还不如在本地呢。import from http我想只是解决了一个点的问题，就是不用手动安装依赖到本地磁盘


• 前段时间我写过，在浏览器中本地运行Node.js

这个技术叫WebContainers技术，感兴趣的可以去翻翻我公众号之前的文章

• 等等，别急。这些仅仅开了个头，新的技术往往要探索才能实现价值最大化，我想此处应该可以彻底颠覆现有的开发模式，而且应该就在3-5年内。

将几个新的前端技术理念融合？

• vite的不打包理念：直接使用浏览器支持的esm模块化


• WebContainers技术：让浏览器直接运行node.js


• import from remote,从一个个远程地址直接引入可以使用的依赖


• 现在很火的webIDE:类似remix编辑器，直接全部可以在云端搞定


• 浏览器的优化，天然有缓存支持

会发生什么变化？

• 我们所有的一切开始，都直接启动一个浏览器即可


• 浏览器中的webIDE,可以直接引入远程依赖，浏览器可以运行Node.js，使用的都是esm模块化，不需要打包工具，项目启动的时间和热更新时间都非常短，构建也是直接可以在浏览器中构建

这些看似解决了我们之前提出的大部分问题，回到今天的主题

回到主题

• 前端会不会回到操作原生dom的时代？


• 我觉得，有这个趋势，例如petite-vue,还有Svelte。

因为之前写过petite-vue源码解析了，我们今天就讲讲Svelte

Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

• 与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM

• 
  

  上面是官方的介绍，我们看看知乎这篇文章https://zhuanlan.zhihu.com/p/97825481,感觉他写得很好，这里照搬一些过来吧直接

  
  


• 
  

  React和Vue都是基于runtime的框架。所谓基于runtime的框架就是框架本身的代码也会被打包到最终的bundle.js并被发送到用户浏览器。

  
  


• 
  

  当用户在你的页面进行各种操作改变组件的状态时，框架的runtime会根据新的组件状态（state）计算（diff）出哪些DOM节点需要被更新

  
  

可是，这些被打包进去的框架，实在太大了。

(今天还在跟同事说，前年写的登录站点，纯原生手工打造，性能无敌)

• 100kb对于一个弱网环境来说，很要命，我们看看svelte减少了多少体积:

科普

• 虚拟dom并没有加快用户操作浏览器响应的速度，只是说，方便用于数据驱动视图，更便于管理而已，并且在一定程度上，更慢。真正最快的永远是：

currentDom.innerHtml = '前端巅峰';

所以Svelte并不是说多好，而是它的这种理念，可能未来会越来越成为主流

React17的改变

• 大家应该都知道，现有的浏览器都是无法直接解译JSX的，所以大多数React用户都需要使用Babel或者TypeScript之类的编译器来将JSX转换为浏览器能够理解的JavaScript语言。许多预配置的工具箱（如：Create React App 或者Next.js）内部也有JSX的转换。


• React 17.0，尽管React团队想对JSX的转换进行改进，但React团队不想打破现有的配置。这就是为什么React团队与Babel合作，为想要升级的开发者提供了一个全新的JSX转换的重写版本。


• 通过全新的转换，你可以单独使用JSX而无需引入React.

我猜想，或许React团队有意将jsx语法推动到成为es标准语法中去，剥离开来希望会大大提升。

重点

• 说了这么多，大家可能没理解到重点，那就是：大家都在想着减轻自身的负重，把丢下来的东西标准化，交给浏览器处理，这也是在为未来的只需要打开一个浏览器，就可以完成所有的事情做铺垫


• 而我，相信这一天应该不远了，据我所知已经有不少顶尖的团队在研发这种产品

前言

作为一名工程师，既然想要加入一个团队，并肩作战地协同开发项目，就必不可少要学会Git基本操作。面试过程中，面试官不止是考察1-3年的工程师，高级岗位也同样会考察团队协作的能力。相信小伙伴们经常会在面试中被问到以下问题吧，可以帮助你测试一下你的Git基础牢不牢固。

• 代码开发到一半，需要紧急切换分支修复线上问题，该怎么办？


• 代码合并有几种模式？分别有什么优缺点？


• git fetch和git pull有什么区别，有合并操作吗？


• git merge和git rebase有什么区别，它们的应用场景有哪些？


• git reset和git revert有什么区别，该如何选择，回滚后的<commit-id>还能找到吗？

如果你心中已有答案，那么可以选择跳过这篇文章啦，愉快地继续摸鱼~

如果你对这些概念还有些模糊，或者没有实际操作过，那么就需要好好阅读本篇文章啦！

接下来马上进入正文啦，本文分四个部分介绍，大家可以自由选择阅读。

• Git的区域示例图，帮助大家理解Git的结构。


• Git的基本使用场景，介绍一些常用git命令。


• Git的进阶使用场景，介绍一些高频出现的面试题目以及应用场景。


• 最后介绍Git的下载地址、基本配置和工具推荐。

Git的区域

画了一个简单的示意图，供大家参考

• 远程仓库（Remote）：在远程用于存放代码的服务器，远程仓库的内容能够被分布其他地方的本地仓库修改。


• 本地仓库（Repository）：在自己电脑上的仓库，平时我们用git commit 提交到暂存区，就会存入本地仓库。


• 暂存区（Index）：执行 git add 后，工作区的文件就会被移入暂存区，表示哪些文件准备被提交，当完成某个功能后需要提交代码，可以通过 git add 先提交到暂存区。


• 工作区（Workspace）：工作区，开发过程中，平时打代码的地方，看到是当前最新的修改内容。

Git的基本使用场景

以下命令远程主机名默认为origin，如果有其他远程主机，将origin替换为其他即可。

git fetch

# 获取远程仓库特定分支的更新

git fetch origin <分支名>



# 获取远程仓库所有分支的更新

git fetch --all

git pull

# 从远程仓库拉取代码，并合并到本地，相当于 git fetch && git merge 

git pull origin <远程分支名>:<本地分支名>



# 拉取后，使用rebase的模式进行合并

git pull --rebase origin <远程分支名>:<本地分支名>

注意

• 直接git pull 不加任何选项，等价于git fetch + git merge FETCH_HEAD，执行效果就是会拉取所有分支信息回来，但是只合并当前分支的更改。其他分支的变更没有执行合并。


• 使用git pull --rebase 可以减少冲突的提交点，比如我本地已经提交，但是远程其他同事也有新的代码提交记录，此时拉取远端其他同事的代码，如果是merge的形式，就会有一个merge的commit记录。如果用rebase，就不会产生该合并记录，是将我们的提交点挪到其他同事的提交点之后。

git branch

# 基于当前分支，新建一个本地分支，但不切换

git branch <branch-name> 



# 查看本地分支

git branch



# 查看远程分支

git branch -r



# 查看本地和远程分支

git branch -a



# 删除本地分支

git branch -D <branch-name>



# 基于旧分支创建一个新分支

git branch <new-branch-name> <old-branch-name> 



# 基于某提交点创建一个新分支

git branch <new-branch-name> <commit-id> 



# 重新命名分支

git branch -m <old-branch-name> <new-branch-name>

git checkout

# 切换到某个分支上

git checkout <branch-name>



# 基于当前分支，创建一个分支并切换到新分支上

git checkout -b <branch-name>

git add

# 添把当前工作区修改的文件添加到暂存区，多个文件可以用空格隔开

git add xxx



# 添加当前工作区修改的所有文件到暂存区

git add .

git commit

# 提交暂存区中的所有文件，并写下提交的概要信息

git commit -m "message"



# 相等于 git add . && git commit -m

git commit -am



# 对最近一次的提交的信息进行修改，此操作会修改commit的hash值

git commit --amend

git push

# 推送提交到远程仓库

git push 



# 强行推送到远程仓库

git push -f

git tag

# 查看所有已打上的标签

git tag 



# 新增一个标签打在当前提交点上，并写上标签信息

git tag -a <version> -m 'message' 



# 为指定提交点打上标签

git tag -a <version> <commit-id> 



# 删除指定标签

git tag -d <version> 

Git的进阶使用场景

HEAD表示最新提交 ；HEAD^表示上一次； HEAD~n表示第n次（从0开始，表示最近一次）

正常协作

• git pull 拉取远程仓库的最新代码


• 工作区修改代码，完成功能开发


• git add . 添加修改的文件到暂存区


• git commit -m 'message' 提交到本地仓库


• git push将本地仓库的修改推送到远程仓库

代码合并

git merge

自动创建一个新的合并提交点merge-commit，且包含两个分支记录。如果合并的时候遇到冲突，仅需要修改解决冲突后，重新commit。

• 场景：如dev要合并进主分支master，保留详细的合并信息


• 优点：展示真实的commit情况


• 缺点：分支杂乱

git checkout master

git merge dev

git merge 的几种模式

• git merge --ff （默认--ff,fast-farward）
  
  
  
  • 结果：被merge的分支和当前分支在图形上并为一条线，被merge的提交点commit合并到当前分支，没有新的提交点merge
  
  
  • 缺点：代码合并不冲突时，默认快速合并，主分支按时间顺序混入其他分支的零碎commit点。而且删除分支，会丢失分支信息。
  
  
  
  


• git merge --no-ff（不快速合并、推荐）
  
  
  
  • 结果：被merge的分支和当前分支不在一条线上，被merge的提交点commit还在原来的分支上，并在当前分支产生一个新提交点merge
  
  
  • 优点：代码合并产生冲突就会走这个模式，利于回滚整个大版本(主分支自己的commit点)
  
  
  
  


• git merge --squash（把多次分支commit历史压缩为一次）
  
  
  
  • 结果：把多次分支commit历史压缩为一次
  
  
  
  

git rebase

• 不产生merge commit，变换起始点位置，“整理”成一条直线，且能使用命令合并多次commit。


• 如在develop上git rebase master 就会拉取到master上的最新代码合并进来，也就是将分支的起始时间指向master上最新的commit上。自动保留的最新近的修改，不会遇到合并冲突。而且可交互操作（执行合并删除commit），可通过交互式变基来合并分支之前的commit历史git rebase -i HEAD~3


• 场景：主要发生在个人分支上，如 git rebase master整理自己的dev变成一条线。频繁进行了git commit提交，可用交互操作drop删除一些提交，squash提交融合前一个提交中。


• 优点：简洁的提交历史


• 缺点：发生错误难定位，解决冲突比较繁琐，要一个一个解决。

git checkout dev

git rebase master

git merge和git rebase的区别

• merge会保留两个分支的commit信息，而且是交叉着的，即使是ff模式，两个分支的commit信息会混合在一起（按真实提交时间排序），多用于自己dev合并进master。


• rebase意思是变基，改变分支的起始位置，在dev上git rebase master，将dev的多次commit一起拉到要master最新提交的后面(时间最新)，变成一条线，多用于整理自己的dev提交历史，然后把master最新代码合进来。


• 使用rebase还是merge更多的是管理风格的问题，有个较好实践：
  
  
  
  • 就是dev在merge进主分支（如master）之前，最好将自己的dev分支给rebase到最新的主分支（如master）上，然后用pull request创建普通merge请求。
  
  
  • 用rebase整理成重写commit历史，所有修改拉到master的最新修改前面，保证dev运行在当前最新的主branch的代码。避免了git历史提交里无意义的交织。
  
  
  
  


• 假设场景：从 dev 拉出分支 feature-a。
  
  
  
  • 那么当 dev 要合并 feature-a 的内容时，使用 git merge feature-a
  
  
  • 反过来当 feature-a 要更新 dev 的内容时，使用 git rebase dev
  
  
  
  


• git merge和git rebase 两者对比图
  
  
  
  • git merge图示
  
  
  • git rebase图示
  
  
  
  

取消合并

# 取消merge合并

git merge --abort

# 取消rebase合并

git rebase --abort

代码回退

代码回退的几种方式

• git checkout


• git reset
  
  
  
  • --hard：硬重置，影响【工作区、暂存区、本地仓库】
  
  
  • --mixed：默认，影响【暂存区、本地仓库】，被重置的修改内容还留在工作区
  
  
  • --soft：软重置，影响 【本地仓库】，被重置的修改内容还留在工作区和暂存区
  
  
  
  


• git revert

# 撤回工作区该文件的修改，多个文件用空格隔开

git checkout -- <file-name>

# 撤回工作区所有改动

git checkout .



# 撤回已经commit到暂存区的文件

git reset <file-name>

# 撤回已经commit到暂存区的所有文件

git reset .

# 丢弃已commit的其他版本，hard参数表示同时重置工作区的修改

git reset --hard <commit-id>  

# 回到上一个commit的版本，hard参数表示同时重置工作区的修改

git reset --hard HEAD^



# 撤销0ffaacc这次提交

git revert 0ffaacc     

# 撤销最近一次提交

git revert HEAD       

# 撤销最近2次提交，注意：数字从0开始

git revert HEAD~1      



# 回退后要执行强制推送远程分支

git push -f 

git reset和git revert的区别

• reset是根据来移动HEAD指针，在该次提交点后面的提交记录会丢失。

• revert会产生新的提交，来抵消选中的该次提交的修改内容，可以理解为“反做”，不会丢失中间的提交记录。

• 使用建议
  
  
  
  • 公共分支回退使用git revert，避免丢掉其他同事的提交。
  
  
  • 自己分支回退可使用git reset，也可以使用git revert，按需使用。
  
  
  
  

挑拣代码

git cherry-pick

• “挑拣”提交，单独抽取某个分支的一个提交点，将这个提交点的所有修改内容，搬运到你的当前分支。


• 如果我们只想将其他分支的某个提交点合并进来，不想用git merge将所有提交点合并进来，就需要使用这个git cherry-pick。

git cherry-pick <commit-id>

暂存代码

git stash

• 当我们想要切换去其他分支修复bug，此时当前的功能代码还没修改完整，不想commit，就需要暂存当前修改的文件，然后切换到hotfix分支修复bug，修复完成再切换回来，将暂存的修改提取出来，继续功能开发。


• 还有另一种场景就是，同事在远程分支上推送了代码，此时拉下来有冲突，可以将我们自己的修改stash暂存起来，然后先拉最新的提交代码，再pop出来，这样可以避免一个冲突的提交点。

# 将本地改动的暂存起来

git stash 

# 将未跟踪的文件暂存（另一种方式是先将新增的文件添加到暂存区，使其被git跟踪，就可以直接git stash）

git stash -u 

# 添加本次暂存的备注，方便查找。

git stash save "message" 

# 应用暂存的更改

git stash apply 

# 删除暂存

git stash drop 

# 应用暂存的更改，然后删除该暂存，等价于git stash apply + git stash drop 

git stash pop

# 删除所有缓存

git stash clear

打印日志

1. git log

可以显示所有提交过的版本信息，如果感觉太繁琐，可以加上参数  --pretty=oneline，只会显示版本号和提交时的备注信息。

2. git reflog

git reflog 可以查看所有分支的所有操作记录（包括已经被删除的 commit 记录和 reset 的操作），例如执行 git reset --hard HEAD~1，退回到上一个版本，用git log是看不出来被删除的，用git reflog则可以看到被删除的，我们就可以买后悔药，恢复到被删除的那个版本。

Git的下载、配置、工具推荐

• Git下载地址
  
  
  
  • git-scm.com/downloads
  
  
  
  


• 两种拉取代码的方式
  
  
  
  • https：每次都要手动输入用户名和密码
  
  
  • ssh ：自动使用本地私钥+远程的公钥验证是否为一对秘钥
  
  
  
  


• 配置ssh
  
  
  
  • ssh-keygen -t rsa -C "邮箱地址"
  
  
  • cd ~/.ssh切换到home下面的ssh目录、cat id_rsa.pub命令查看公钥的内容，然后复制
  
  
  • github的settings -> SSH and GPG keys-> 复制刚才的内容贴入 -> Add SSH key
  
  
  • 全局配置一下Git用户名和邮箱
    
    
    
    • git config --global user.name "xxx"
    
    
    • git config --global user.email "xxx@xx.com"
    
    
    • 
    
    
    
    
  
  
  
  


• Git 相关工具推荐
  
  
  
  • 图形化工具 SourceTree ：可视化执行git命令，解放双手
  
  
  • VSCode插件 GitLens：可以在每行代码查看对应git的提交信息，而且提供每个提交点的差异对比
  
  
  
  

结尾

阅读到这里，是不是感觉对Git相关概念更加清晰了呢，那么恭喜你，再也不怕因为误操作，丢失同事辛辛苦苦写的代码了，而且将在日常工作的协同中游刃有余。

• 💖建议收藏文章，工作中有需要的时候翻出来看一看~


• 📃创作不易，如果我的文章对你有帮助，辛苦大佬们点个赞👍🏻，支持我一下~


• 📌如果有错漏，欢迎大佬们指正~


• 👏欢迎转载分享，请注明出处，谢谢~

1. canvas实现时钟转动

实现以下效果，分为几步：

• 1、找到canvas的中心，画出表心，以及表框


• 2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度


• 3、使用定时器，每过一秒获取新的时间，并重新绘图，达到时钟转动的效果

1.1 表心，表框

画表心，表框有两个知识点：

• 1、找到canvas的中心位置


• 2、绘制圆形

//html



<canvas id="canvas" width="600" height="600"></canvas>



// js



// 设置中心点，此时300，300变成了坐标的0，0

ctx.translate(300, 300)

// 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)

ctx.arc(0, 0, 100, 0, 2 * Math.PI)

ctx.arc(0, 0, 5, 0, 2 * Math.PI)

// 执行画线段的操作stroke

ctx.stroke() 

让我们来看看效果，发现了，好像不对啊，我们是想画两个独立的圆线，怎么画出来的两个圆连到一起了：

原因是：上面代码画连个圆时，是连着画的，所以画完大圆后，线还没斩断，就接着画小圆，那肯定会大圆小圆连一起，解决办法就是：beginPath，closePath

ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0



// 画大圆

+ ctx.beginPath()

// 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)

  ctx.arc(0, 0, 100, 0, 2 * Math.PI)

  ctx.stroke() // 执行画线段的操作

+ ctx.closePath()



// 画小圆

+ ctx.beginPath()

  ctx.arc(0, 0, 5, 0, 2 * Math.PI)

  ctx.stroke()

+ ctx.closePath()

1.2 时针，分针，秒针

画这三个指针，有两个知识点：

• 1、根据当前时，分，秒去计算角度


• 2、在计算好的角度上去画出时针，分针，秒针

如何根据算好的角度去画线呢，比如算出当前是3点，那么时针就应该以12点为起始点，顺时针旋转2 * Math.PI / 12 * 3 = 90°，分针和秒针也是同样的道理，只不过跟时针不同的是比例问题而已，因为时在表上有12份，而分针和秒针都是60份

这时候又有一个新问题，还是以上面的例子为例，我算出了90°，那我们怎么画出时针呢？我们可以使用moveTo和lineTo去画线段。至于90°，我们只需要将x轴顺时针旋转90°，然后再画出这条线段，那就得到了指定角度的指针了。但是上面说了，是要以12点为起始点，我们的默认x轴确是水平的，所以我们时分秒针算出角度后，每次都要减去90°。可能这有点绕，我们通过下面的图演示一下，还是以上面3点的例子：

这样就得出了3点指针的画线角度了。

又又又有新问题了，比如现在我画完了时针，然后我想画分针，x轴已经在我画时针的时候偏转了，这时候肯定要让x轴恢复到原来的模样，我们才能继续画分针，否则画出来的分针是不准的。这时候save和restore就派上用场了，save是把ctx当前的状态打包压入栈中，restore是取出栈顶的状态并赋值给ctx，save可多次，但是restore取状态的次数必须等于save次数

懂得了上面所说，剩下画刻度了，起始刻度的道理跟时分秒针道理一样，只不过刻度是死的，不需要计算，只需要规则画出60个小刻度，和12个大刻度就行

const canvas = document.getElementById('canvas')

const ctx = canvas.getContext('2d')



ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0

// 把状态保存起来

+ ctx.save()



// 画大圆

ctx.beginPath()

// 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)

ctx.arc(0, 0, 100, 0, 2 * Math.PI)

ctx.stroke() // 执行画线段的操作

ctx.closePath()



// 画小圆

ctx.beginPath()

ctx.arc(0, 0, 5, 0, 2 * Math.PI)

ctx.stroke()

ctx.closePath()



----- 新加代码  ------



// 获取当前 时，分，秒

let time = new Date()

let hour = time.getHours() % 12

let min = time.getMinutes()

let sec = time.getSeconds()



// 时针

ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)

ctx.beginPath()

// moveTo设置画线起点

ctx.moveTo(-10, 0)

// lineTo设置画线经过点

ctx.lineTo(40, 0)

// 设置线宽

ctx.lineWidth = 10

ctx.stroke()

ctx.closePath()

// 恢复成上一次save的状态

ctx.restore()

// 恢复完再保存一次

ctx.save()



// 分针

ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)

ctx.beginPath()

ctx.moveTo(-10, 0)

ctx.lineTo(60, 0)

ctx.lineWidth = 5

ctx.strokeStyle = 'blue'

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()



//秒针

ctx.rotate(2 * Math.PI / 60 * sec -  - Math.PI / 2)

ctx.beginPath()

ctx.moveTo(-10, 0)

ctx.lineTo(80, 0)

ctx.strokeStyle = 'red'

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()



// 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的

ctx.lineWidth = 1

for (let i = 0; i < 60; i++) {

    ctx.rotate(2 * Math.PI / 60)

    ctx.beginPath()

    ctx.moveTo(90, 0)

    ctx.lineTo(100, 0)

    // ctx.strokeStyle = 'red'

    ctx.stroke()

    ctx.closePath()

}

ctx.restore()

ctx.save()

ctx.lineWidth = 5

for (let i = 0; i < 12; i++) {

    ctx.rotate(2 * Math.PI / 12)

    ctx.beginPath()

    ctx.moveTo(85, 0)

    ctx.lineTo(100, 0)

    ctx.stroke()

    ctx.closePath()

}



ctx.restore()

最后一步就是更新视图，使时钟转动起来，第一想到的肯定是定时器setInterval，但是注意一个问题：每次更新视图的时候都要把上一次的画布清除，再开始画新的视图，不然就会出现千手观音的景象

附上最终代码：

const canvas = document.getElementById('canvas')

const ctx = canvas.getContext('2d')



setInterval(() => {

    ctx.save()

    ctx.clearRect(0, 0, 600, 600)

    ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0

    ctx.save()



    // 画大圆

    ctx.beginPath()

    // 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)

    ctx.arc(0, 0, 100, 0, 2 * Math.PI)

    ctx.stroke() // 执行画线段的操作

    ctx.closePath()



    // 画小圆

    ctx.beginPath()

    ctx.arc(0, 0, 5, 0, 2 * Math.PI)

    ctx.stroke()

    ctx.closePath()



    // 获取当前 时，分，秒

    let time = new Date()

    let hour = time.getHours() % 12

    let min = time.getMinutes()

    let sec = time.getSeconds()



    // 时针

    ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)

    ctx.beginPath()

    // moveTo设置画线起点

    ctx.moveTo(-10, 0)

    // lineTo设置画线经过点

    ctx.lineTo(40, 0)

    // 设置线宽

    ctx.lineWidth = 10

    ctx.stroke()

    ctx.closePath()

    ctx.restore()

    ctx.save()



    // 分针

    ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)

    ctx.beginPath()

    ctx.moveTo(-10, 0)

    ctx.lineTo(60, 0)

    ctx.lineWidth = 5

    ctx.strokeStyle = 'blue'

    ctx.stroke()

    ctx.closePath()

    ctx.restore()

    ctx.save()



    //秒针

    ctx.rotate(2 * Math.PI / 60 * sec - Math.PI / 2)

    ctx.beginPath()

    ctx.moveTo(-10, 0)

    ctx.lineTo(80, 0)

    ctx.strokeStyle = 'red'

    ctx.stroke()

    ctx.closePath()

    ctx.restore()

    ctx.save()



    // 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的

    ctx.lineWidth = 1

    for (let i = 0; i < 60; i++) {

        ctx.rotate(2 * Math.PI / 60)

        ctx.beginPath()

        ctx.moveTo(90, 0)

        ctx.lineTo(100, 0)

        // ctx.strokeStyle = 'red'

        ctx.stroke()

        ctx.closePath()

    }

    ctx.restore()

    ctx.save()

    ctx.lineWidth = 5

    for (let i = 0; i < 12; i++) {

        ctx.rotate(2 * Math.PI / 12)

        ctx.beginPath()

        ctx.moveTo(85, 0)

        ctx.lineTo(100, 0)

        // ctx.strokeStyle = 'red'

        ctx.stroke()

        ctx.closePath()

    }



    ctx.restore()

    ctx.restore()

}, 1000)

效果 very good啊：

2. canvas实现刮刮卡

小时候很多人都买过充值卡把，懂的都懂啊哈，用指甲刮开这层灰皮，就能看底下的答案了。

思路是这样的：

• 1、底下答案是一个div，顶部灰皮是一个canvas，canvas一开始盖住div


• 2、鼠标事件，点击时并移动时，鼠标经过的路径都画圆形开路，并且设置globalCompositeOperation为destination-out，使鼠标经过的路径都变成透明，一透明，自然就显示出下方的答案信息。

关于fill这个方法，其实是对标stroke的，fill是把图形填充，stroke只是画出边框线

// html

<canvas id="canvas" width="400" height="100"></canvas>

<div class="text">恭喜您获得100w</div>

<style>

        * {

            margin: 0;

            padding: 0;

        }

        .text {

            position: absolute;

            left: 130px;

            top: 35px;

            z-index: -1;

        }

</style>





// js

const canvas = document.getElementById('canvas')

const ctx = canvas.getContext('2d')



// 填充的颜色

ctx.fillStyle = 'darkgray'

// 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)

ctx.fillRect(0, 0, 400, 100)

ctx.fillStyle = '#fff'

// 绘制填充文字

ctx.fillText('刮刮卡', 180, 50)



let isDraw = false

canvas.onmousedown = function () {

    isDraw = true

}

canvas.onmousemove = function (e) {

    if (!isDraw) return

    // 计算鼠标在canvas里的位置

    const x = e.pageX - canvas.offsetLeft

    const y = e.pageY - canvas.offsetTop

    // 设置globalCompositeOperation

    ctx.globalCompositeOperation = 'destination-out'

    // 画圆

    ctx.arc(x, y, 10, 0, 2 * Math.PI)

    // 填充圆形

    ctx.fill()

}

canvas.onmouseup = function () {

    isDraw = false

}

效果如下：

3. canvas实现画板和保存

框架：使用vue + elementUI

其实很简单，难点有以下几点：

• 1、鼠标拖拽画正方形和圆形


• 2、画完一个保存画布，下次再画的时候叠加


• 3、保存图片

第一点，只需要计算出鼠标点击的点坐标，以及鼠标的当前坐标，就可以计算了，矩形长宽计算：x - beginX, y - beginY，圆形则要利用勾股定理：Math.sqrt((x - beginX) * (x - beginX) + (y - beginY) * (y - beginY))

第二点，则要利用canvas的getImageData和putImageData方法

第三点，思路是将canvas生成图片链接，并赋值给具有下载功能的a标签，并主动点击a标签进行图片下载

看看效果吧：

具体代码我就不过多讲解了，说难也不难，只要前面两个项目理解了，这个项目很容易就懂了：

<template>

  <div>

    <div style="margin-bottom: 10px; display: flex; align-items: center">

      <el-button @click="changeType('huabi')" type="primary">画笔</el-button>

      <el-button @click="changeType('rect')" type="success">正方形</el-button>

      <el-button

        @click="changeType('arc')"

        type="warning"

        style="margin-right: 10px"

        >圆形</el-button

      >

      <div>颜色：</div>

      <el-color-picker v-model="color"></el-color-picker>

      <el-button @click="clear">清空</el-button>

      <el-button @click="saveImg">保存</el-button>

    </div>

    <canvas

      id="canvas"

      width="800"

      height="400"

      @mousedown="canvasDown"

      @mousemove="canvasMove"

      @mouseout="canvasUp"

      @mouseup="canvasUp"

    >

    </canvas>

  </div>

</template>



<script>

export default {

  data() {

    return {

      type: "huabi",

      isDraw: false,

      canvasDom: null,

      ctx: null,

      beginX: 0,

      beginY: 0,

      color: "#000",

      imageData: null,

    };

  },

  mounted() {

    this.canvasDom = document.getElementById("canvas");

    this.ctx = this.canvasDom.getContext("2d");

  },

  methods: {

    changeType(type) {

      this.type = type;

    },

    canvasDown(e) {

      this.isDraw = true;

      const canvas = this.canvasDom;

      this.beginX = e.pageX - canvas.offsetLeft;

      this.beginY = e.pageY - canvas.offsetTop;

    },

    canvasMove(e) {

      if (!this.isDraw) return;

      const canvas = this.canvasDom;

      const ctx = this.ctx;

      const x = e.pageX - canvas.offsetLeft;

      const y = e.pageY - canvas.offsetTop;

      this[`${this.type}Fn`](ctx, x, y);

    },

    canvasUp() {

      this.imageData = this.ctx.getImageData(0, 0, 800, 400);

      this.isDraw = false;

    },

    huabiFn(ctx, x, y) {

      ctx.beginPath();

      ctx.arc(x, y, 5, 0, 2 * Math.PI);

      ctx.fillStyle = this.color;

      ctx.fill();

      ctx.closePath();

    },

    rectFn(ctx, x, y) {

      const beginX = this.beginX;

      const beginY = this.beginY;

      ctx.clearRect(0, 0, 800, 400);

      this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);

      ctx.beginPath();

      ctx.strokeStyle = this.color;

      ctx.rect(beginX, beginY, x - beginX, y - beginY);

      ctx.stroke();

      ctx.closePath();

    },

    arcFn(ctx, x, y) {

      const beginX = this.beginX;

      const beginY = this.beginY;

      this.isDraw && ctx.clearRect(0, 0, 800, 400);

      this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);

      ctx.beginPath();

      ctx.strokeStyle = this.color;

      ctx.arc(

        beginX,

        beginY,

        Math.round(

          Math.sqrt((x - beginX) * (x - beginX) + (y - beginY) * (y - beginY))

        ),

        0,

        2 * Math.PI

      );

      ctx.stroke();

      ctx.closePath();

    },

    saveImg() {

      const url = this.canvasDom.toDataURL();

      const a = document.createElement("a");

      a.download = "sunshine";

      a.href = url;

      document.body.appendChild(a);

      a.click();

      document.body.removeChild(a);

    },

    clear() {

        this.imageData = null

        this.ctx.clearRect(0, 0, 800, 400)

    }

  },

};

</script>



<style lang="scss" scoped>

#canvas {

  border: 1px solid black;

}

</style>

结语

之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》，介绍了 6 种使用 CSS 实现三角形的方式。

但是其中漏掉了一个非常重要的场景，如何使用纯 CSS 实现带圆角的三角形呢？，像是这样：

本文将介绍几种实现带圆角的三角形的实现方式。

法一. 全兼容的 SVG 大法

想要生成一个带圆角的三角形，代码量最少、最好的方式是使用 SVG 生成。

使用 SVG 的 多边形标签 <polygon> 生成一个三边形，使用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。

代码量非常少，核心代码如下：

<svg  width="250" height="250" viewBox="-50 -50 300 300">

  <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>

</svg>

.triangle {

    fill: #0f0;

    stroke: #0f0;

    stroke-width: 10;

}

实际图形如下：

这里，其实是借助了 SVG 多边形的 stroke-linejoin: round 属性生成的圆角，stroke-linejoin 是什么？它用来控制两条描边线段之间，有三个可选值：

• miter 是默认值，表示用方形画笔在连接处形成尖角


• round 表示用圆角连接，实现平滑效果


• bevel 连接处会形成一个斜接

我们实际是通过一个带边框，且边框连接类型为 stroke-linejoin: round 的多边形生成圆角三角形的。

如果，我们把底色和边框色区分开，实际是这样的：

.triangle {

    fill: #0f0;

    stroke: #000;

    stroke-width: 10;

}

通过 stroke-width 控制圆角大小

那么如何控制圆角大小呢？也非常简单，通过控制 stroke-width 的大小，可以改变圆角的大小。

当然，要保持三角形大小一致，在增大/缩小 stroke-width 的同时，需要缩小/增大图形的 width/height：

完整的 DEMO 你可以戳这里：CodePen Demo -- 使用 SVG 实现带圆角的三角形

法二. 图形拼接

不过，上文提到了，使用纯 CSS 实现带圆角的三角形，但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS，有没有办法呢？

当然，发散思维，CSS 有意思的地方正在于此处，用一个图形，能够有非常多种巧妙的解决方案！

我们看看，一个圆角三角形，它其实可以被拆分成几个部分：

所以，其实我们只需要能够画出一个这样的带圆角的菱形，通过 3 个进行旋转叠加，就能得到圆角三角形：

绘制带圆角的菱形

那么，接下来我们的目标就变成了绘制一个带圆角的菱形，方法有很多，本文给出其中一种方式：

1. 首先将一个正方形变成一个菱形，利用 transform 有一个固定的公式：

<div></div>

div {

    width:  10em;

    height: 10em;

    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);

}

2. 将其中一个角变成圆角：

div {

    width:  10em;

    height: 10em;

    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);

  + border-top-right-radius: 30%;

}

至此，我们就顺利的得到一个带圆角的菱形了！

拼接 3 个带圆角的菱形

接下来就很简单了，我们只需要利用元素的另外两个伪元素，再生成 2 个带圆角的菱形，将一共 3 个图形旋转位移拼接起来即可！

完整的代码如下：

<div></div>

div{

    position: relative;

    background-color: orange;

}

div:before,

div:after {

    content: '';

    position: absolute;

    background-color: inherit;

}

div,

div:before,

div:after {

    width:  10em;

    height: 10em;

    border-top-right-radius: 30%;

}

div {

    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);

}

div:before {

    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);

}

div:after {

    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);

}

就可以得到一个圆角三角形了！效果如下：

完整的代码你可以戳这里：CodePen Demo -- A triangle with rounded

法三. 图形拼接实现渐变色圆角三角形

完了吗？没有！

上述方案，虽然不算太复杂，但是有一点还不算太完美的。就是无法支持渐变色的圆角三角形。像是这样：

如果需要实现渐变色圆角三角形，还是有点复杂的。但真就还有人鼓捣出来了，下述方法参考至 -- How to make 3-corner-rounded triangle in CSS。

同样也是利用了多块进行拼接，但是这次我们的基础图形，会非常的复杂。

首先，我们需要实现这样一个容器外框，和上述的方法比较类似，可以理解为是一个圆角菱形（画出 border 方便理解）：

<div></div>

div {

    width: 200px;

    height: 200px;

    transform: rotate(30deg) skewY(30deg) scaleX(0.866);

    border: 1px solid #000;

    border-radius: 20%;

}

接着，我们同样使用两个伪元素，实现两个稍显怪异的图形进行拼接，算是对 transform 的各种用法的合集：

div::before,

div::after {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

}

div::before {

    border-radius: 20% 20% 20% 55%;

    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);

    background: red;

}

div::after {

    border-radius: 20% 20% 55% 20%;

    background: blue;

    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);

}

为了方便理解，制作了一个简单的变换动画：

本质就是实现了这样一个图形：

最后，给父元素添加一个 overflow: hidden 并且去掉父元素的 border 即可得到一个圆角三角形：

由于这两个元素重叠空间的特殊结构，此时，给两个伪元素添加同一个渐变色，会完美的叠加在一起：

div::before,

div::after, {

    background: linear-gradient(#0f0, #03a9f4);

}

最终得到一个渐变圆角三角形：

上述各个图形的完整代码，你可以戳这里：CodePen Demo -- A triangle with rounded and gradient background

最后

本文介绍了几种在 CSS 中实现带圆角三角形的方式，虽然部分有些繁琐，但是也体现了 CSS ”有趣且折磨人“ 的一面，具体应用的时候，还是要思考一下，对是否使用上述方式进行取舍，有的时候，切图也许是更好的方案。

前言：我们运用微前端架构解决了应用体积庞大的问题，通过实践微前端的理念，将前端应用拆分为多个微应用（可独立部署、松散耦合的应用）。同时微应用的存在，使得我们无需在构建一个庞大的应用，而是按需构建，极大了加快了构建效率。但只是解决了应用层面的问题，在中后台应用场景中，不同微应用和基座之间可能存在通用的模块依赖，那么如果应用间可以实现模块共享，那么可以大大优化单应体积大小

1.Npm 依赖

最简单的方式，就是把需要共享的模块抽出，可能是一个工具库，有可能是一个组件库，然后讲其打包成为npm包，然后在每个子应用中都安装该模块依赖，以此达到多个项目复用的效果

也就代表每个应用都有相同的npm包，本质上没有真正意义上的实现模块共享和复用，只是代码层次共享和复用了，应用打包构建时，还是会将依赖包一起打包

劣势有以下👇 几点：

• 每个微应用都会打包该模块，导致依赖的包冗余，没有真正意义上的共享复用


• 当npm包进行更新发布了，微应用还需要重新构建，调试麻烦且低效 （除非用npm link）

2.Git Submodule （子模块）

阿乐童鞋： 那如果我们没有搭建npm内网，又不想把模块开源出去，而且依赖npm，只要涉及变更需要重新发布，有没有其他方式可以解决以上问题呀？

2.1 对比 npm

你可以试试 Git Submodule ，它提供了一种类似于npm package的依赖管理机制，两者差别如下图所示👇

2.2 如何使用

通过在应用项目中，通过git submodule add <submodule_url>远程拉取子模块项目，这时会发现应用项目中多了两个文件.gitmodules和子模块目录

这个子模块就是我们共享的模块，它是一个完整的Git仓库，换句话说：我们在应用项目目录中无论使用git add/commit都对其不影响，即子模块拥有自身独立的版本控制

总结： submodule本质上是通过git submodule add把项目依赖的模块加起来，最终构成一个完整的项目。而且add进来的模块，项目中并不实际包含，而只是一个包含索引信息，也就是上文提到的 .gitmodule来存储子模块的联系方式, 以此实现同步关联子模块。当下载到本地运行的时候才会再拉取文件

部分命令行:

• 
  

  git submodule add <子模块repository> <path> : 添加子模块

  
  


• 
  

  git submodule update --recursive --remote ： 拉取所有子模块的更新

  
  

2.3 Monorepo

阿乐童鞋： 🌲 树酱，我记得有个叫Monorepo又是什么玩意，跟 Git Submodule 有啥区别？

Monorepo 全称叫monolithic respoitory，即单体式仓库，核心是允许我们将多个项目放到同一个仓库里面进行管理。主张不拆分repo，而是在单仓库里统一管理各个模块的构建流程、版本号等等

这样可以避免大量的冗余node_module冗余，因为每个项目都会安装vue、vue-router等包，再或者本地开发需要的webpack、babel、mock等都会造成储存空间的浪费

那么Monorepo是怎么管理的呢？ 开源社区中诸如babel、vue的项目都是基于Monorepo去维护的(Lerna工具)

我们以Babel为例，在github中可以看到其每个模块都在指定的packages目录下, 也就意味着将所有的相关package都放入一个repository来管理，这不是显得项目很臃肿？

也就这个问题，啊乐同学和啊康同学展开了辩论～

最终是选用Monorepo单体式仓库还是Multirepo多仓库管理, 具体还是要看你业务场景来定，Monorepo集中管理带来的便利性，比如方便版本、依赖等管理、方便调试，但也带来了不少不便之处 👇

• 统一构建工具所带来更高的要求


• 仓库体积过大，维护成本也高

🌲 酱 不小心扯多了，还有就是Monorepo 跟 Git Submodule 的区别

• 
  

  前者：monorepo在单repo里存放所有子模块源码

  
  


• 
  

  后者：submodules只在主repo里存放所有子模块“索引”

  
  

目前内部还未使用Monorepo进行落地实际，目前基于微前端架构中后台应用存在依赖重叠过多的情况，后期会通过实践来深入分享

3. Webpack external

我们知道webpack中有externals的配置，主要是用来配置：webpack输出的bundle中排除依赖，换句话说通过在external定义的依赖，最终输出的bundle不存在该依赖，主要适用于不需要经常打包更新的第三方依赖，以此来实现模块共享。

下面是一个vue.config.js 的配置文件，通过配置exteral移除不经常更新打包的第三方依赖👇

你可以通过在packjson中script定义的命令后添加--report查看打包📦后的分析图，如果是webpack就是用使用插件webpack-bundle-analyzer

阿乐童鞋： 🌲 树酱，那移除了这些依赖之后，如何保证应用正常使用？

浏览器环境：我们使用cdn的方式在入口文件引入，当然你也可以预先打包好，比如把vue全家桶打包成vue-family.min.js文件，最终达成多应用共享模块的效果

<script src="<%= VUE_APP_UTILS_URL %>static/js/vue-family.min.js"></script>

总结：避免公共模块包(package) 一起打到bundle 中，而是在运行时再去从外部获取这些扩展依赖

通过这种形式在微前端基座应用加载公共模块，并将微应用引用同样模块的external移除掉，就可以实现模块共享了
但是存在微应用技术栈多样化不统一的情况，可能有的使用vue3，有的使用react开发，但externals 并无法支持多版本共存的情况，针对这种情况该方式就不太适用

4. Webpack DLL

官方介绍："DLL" 一词代表微软最初引入的动态链接库, 换句话说我的理解，可以把它当做缓存，通过预先编译好的第三方外部依赖bundle，来节省应用在打包时混入的时间

Webpack DLL 跟 上一节提到的external本质是解决同样的问题：就是避免将第三方外部依赖打入到应用的bundle中（业务代码），然后在运行时再去加载这部分依赖，以此来实现模块复用，也提升了编译构建速度

webpack dll模式下需要配置两份webpack配置，下面是主要两个核心插件

4.1 DllPlugin

DllPlugin：在一个独立的webpack进行配置webpack.dll.config.js，目的是为了创建一个把所有的第三方库依赖打包到一起的bundle的dll文件里面，同时还会生成一个manifest.json的文件，用于：让使用该第三方依赖集合的应用配置的DllReferencePlugin能映射到相关的依赖上去 具体配置看下图👇

4.2 DllReferencePlugin

DllReferencePlugin：插件核心是把上一节提到的通过webpack.dll.config.js中打包生成的dll文件，引用到需要实际项目中使用，引用机制就是通过DllReferencePlugin插件来读取vendor-manifest.json文件，看看是否有该第三方库，最后通过add-asset-html-webpack-plugin插件在入口html自动插入上一节生成的vendor.dll.js 文件， 具体配置看下图👇

5. 联邦模块 Module Federation

模块联邦是 Webpack5 推出的一个新的重要功能，可以真正意义上实现让跨应用间做到模块共享，解决了从前用 NPM 公共包方式共享的不便利，同时也可以作为微前端的落地方案，完美秒杀了上两节介绍webpack特征

用过qiankun的小伙伴应该知道,qiankun微前端架构控制的粒度是在应用层面，而Module Federation控制的粒度是在模块层面。相比之下，后者粒度更小，可以有更多的选择

与qiankun等微前端架构不同的另一点是，我们一般都是需要一个中心基座去控制微应用的生命周期，而Module Federation则是去中心化的，没有中心基座的概念，每一个模块或者应用都是可以导入或导出，我们可以称为：host和remote，应用或模块即可以是host也可以是remote，亦或者两者共同体

看看下面这个例子👇

核心在于 ModuleFederationPlugin中的几个属性

• remote : 示作为 Host 时，去消费哪些 Remote；


• exposes :表示作为 Remote 时，export 哪些属性提供给 Host 消费


• shared: 可以让远程加载的模块对应依赖改为使用本地项目的 vue，换句话说优先用 Host 的依赖，如果 Host 没有，最后再使用自己的

后期也会围绕 Module Federation 去做落地分享

我是个恋旧的人，Github头像还是上古时期端游仙剑奇侠传的截图。

对于前端，如果能jQuery一把梭，我是很开心的。

React、Vue的普及让大家习惯了虚拟DOM的存在。但是虚拟DOM一定是最优解么？

举个例子，要进行如下DOM移动操作：

// 变化前

abcd

// 变化后

dabc

用jQuery时调用insertBefore把d挪到a前面就行。而React基于虚拟DOM的Diff会依次对abc执行appendChild，将他们依次挪到最后。

1次DOM操作 vs 3次DOM操作，显然前者更高效。

那么有没有框架能砍掉虚拟DOM，直接对DOM节点执行操作，实现全自动jQuery？

有的，这就是最近出的petite-vue。

阅读完本文，你会从原理层面了解该框架，如果你还有精力，可以在此基础上深入框架源码。

全自动jQuery的实现

可以将原理概括为一句话：

建立状态与更新DOM的方法之间的联系

比如，对于如下DOM：

<p v-show="showName">我是卡颂</p>

期望showName状态的变化能影响p的显隐（通过改变diaplay）。

实际是建立showName的变化与调用如下方法的联系：

() => {

  el.style.display = get() ? initialDisplay : 'none'

}

其中el代表p，get()获取showName当前值。

再比如，对于如下DOM：

<p v-text="name"></p>

name改变后p的textContent会变为对应值。

实际是建立name的变化与调用如下方法的联系：

() => {

  el.textContent = toDisplayString(get())

}

所以，整个框架的工作原理呼之欲出：初始化时遍历所有DOM，根据各种v-xx属性建立DOM与操作DOM的方法之间的联系。

当改变状态后，会自动调用与其有关的操作DOM的方法，简直就是全自动jQuery。

所以，框架的核心在于：如何建立联系？

一个渣男的故事

这部分源码都收敛在@vue/reactivity库中。我并不想带你精读源码，因为这样很没意思，看了还容易忘。

接下来我会通过一个故事为你展示其工作原理，当你了解原理后如果感兴趣可以自己去看源码。

我们的目标是描述：状态变化与更新DOM的方法之间的联系。说得再宽泛点，是建立状态与副作用之间的联系。

即：状态变化 -> 执行副作用

对于一段关系，可以从当事双方的角度描述，比如：

男生指着女生说：这是我女朋友。

接着女生指着男生说：这是我男朋友。

你作为旁观者，通过双方的描述就知道他们处于一段恋爱关系。

推广到状态与副作用，则是：

副作用指着状态说：我依赖这个状态，他变了我就会执行。

状态指着副作用说：我订阅了这个副作用，当我变了后我会通知他。

可以看到，发布订阅其实是对一段关系站在双方视角的阐述

举个例子，如下DOM结构：

<div v-scope="{num: 0}">

  <button @click="num++">add 1</button>

  <p v-show="num%2">

    <span v-text="num"></span>

  </p>

</div>  

经过petite-vue遍历后的关系图：

框架的交互流程为：

1. 
   

   触发点击事件，状态num变化

   
   


2. 
   

   通知其订阅的副作用（effect1与effect2），执行对应DOM操作

   
   

如果从情侣关系角度解读，就是：

num指着effect1说：这是我女朋友。

effect1指着num说：这是我男朋友。

num指着effect2说：这是我女朋友。

effect2指着num说：这是我男朋友。

总结

今天我们学习了一个框架petite-vue，他的底层实现由多段混乱的男女关系组成，上层是一个个直接操作DOM的方法。

不知道看完后你有没有兴趣深入了解下这种关系呢？

感兴趣的话可以看看Vue Mastery的Vue 3 Reactivity课程。

在大多数低代码平台中的设计器都支持组件拖拽的功能，这样大大地提高了用户的设计体验。而拖拽另一个比较常见的场景就是文件上传，通过拖拽的方式，可以让用户方便地上传文件。其实利用拖拽功能，我们还可以 跨越浏览器的边界，实现数据共享。

那么如何 跨越浏览器的边界，实现数据共享 呢？本文阿宝哥将介绍谷歌的一个开源项目 —— transmat，利用该项目可以实现上述功能。不仅如此，该项目还可以帮助我们实现一些比较好玩的功能，比如针对不同的可释放目标，做出不同的响应。

下面我们先通过 4 张 Gif 动图来感受一下，使用 transmat 开发的 神奇、好玩 的拖拽功能。

图 1（把可拖拽的元素，拖拽至富文本编辑器）

图 2（把可拖拽的元素，拖拽至 Chrome 浏览器，也支持其他浏览器）

图 3（把可拖拽的元素，拖拽至自定义的释放目标）

图 4（把可拖拽的元素，拖拽至 Chrome 开发者工具）

以上示例使用的浏览器版本：Chrome 91.0.4472.114（正式版本） (x86_64)

以上 4 张图中的 可拖拽元素都是同一个元素，当它被放置到不同的可释放目标时，产生了不同的效果。同时，我们也跨越了浏览器的边界，实现了数据的共享。看完以上 4 张动图，你是不是觉得挺神奇的。其实除了拖拽之外，该示例也支持复制、粘贴操作。不过，在详细介绍如何使用 transmat 实现上述功能之前，我们先来简单介绍一下 transmat 这个库。

一、Transmat 简介

Transmat 是一个围绕 DataTransfer API 的小型库 ，它使用 drag-drop 和 copy-paste 交互简化了在 Web 应用程序中传输和接收数据的过程。 DataTransfer API 能够将多种不同类型的数据传输到用户设备上的其他应用程序，该 API 所支持的数据类型，常见的有这几种：text/plain、text/html 和 application/json 等。

（图片来源：google.github.io/transmat/）

了解完 transmat 是什么之后，我们来看一下它的应用场景：

• 想以便捷的方式与外部应用程序集成。


• 希望为用户提供与其他应用程序共享数据的能力，即使是那些你不知道的应用程序。


• 希望外部应用程序能够与你的 Web 应用程序深度集成。


• 想让你的应用程序更好地适应用户现有的工作流程。

现在你已经对 transmat 有了一定的了解，下面我们来分析如何使用 transmat 实现以上 4 张 Gif 动图对应的功能。

二、Transmat 实战

2.1 transmat-source

html

在以下代码中，我们为 div#source 元素添加了 draggable 属性，该属性用于标识元素是否允许被拖动，它的取值为 true 或 false。

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>

<div id="source" draggable="true" tabindex="0">大家好，我是阿宝哥</div>

css

#source {

  background: #eef;

  border: solid 1px rgba(0, 0, 255, 0.2);

  border-radius: 8px;

  cursor: move;

  display: inline-block;

  margin: 1em;

  padding: 4em 5em;

}

js

const { Transmat, addListeners, TransmatObserver } = transmat;



const source = document.getElementById("source");



addListeners(source, "transmit", (event) => {

  const transmat = new Transmat(event);

  transmat.setData({

    "text/plain": "大家好，我是阿宝哥!",

    "text/html": `

       <h1>大家好，我是阿宝哥</h1>

       <p>聚焦全栈，专注分享 TS、Vue 3、前端架构等技术干货。

          <a href="https://juejin.cn/user/764915822103079">访问我的主页</a>!

       </p>

       <img src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/

         075d8e781ba84bf64035ac251988fb93~300x300.image" border="1" />

     `,

     "text/uri-list": "https://juejin.cn/user/764915822103079",

     "application/json": {

        name: "阿宝哥",

        wechat: "semlinker",

      },

   });

 });

在以上代码中，我们利用 transmat 这个库提供的 addListeners 函数为 div#source 元素，添加了 transmit 的事件监听。在对应的事件处理器中，我们先创建了 Transmat 对象，然后调用该对象上的 setData 方法设置不同 MIME 类型的数据。

下面我们来简单回顾一下，示例中所使用的 MIME 类型：

• text/plain：表示文本文件的默认值，一个文本文件应当是人类可读的，并且不包含二进制数据。


• text/html：表示 HTML 文件类型，一些富文本编辑器会优先从 dataTransfer 对象上获取 text/html 类型的数据，如果不存在的话，再获取 text/plain 类型的数据。


• text/uri-list：表示 URI 链接类型，大多数浏览器都会优先读取该类型的数据，如果发现是合法的 URI 链接，则会直接打开该链接。如果不是的合法 URI 链接，对于 Chrome 浏览器来说，它会读取 text/plain 类型的数据并以该数据作为关键词进行内容检索。


• application/json：表示 JSON 类型，该类型对前端开发者来说，应该都比较熟悉了。

介绍完 transmat-source 之后，我们来看一下图 3 自定义目标（transmat-target）的实现代码。

2.2 transmat-target

html

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>

<div id="target" tabindex="0">放这里哟！</div>

css

body {

  text-align: center;

  font: 1.2em Helvetia, Arial, sans-serif;

}

#target {

  border: dashed 1px rgba(0, 0, 0, 0.5);

  border-radius: 8px;

  margin: 1em;

  padding: 4em;

}

.drag-active {

   background: rgba(255, 255, 0, 0.1);

}

.drag-over {

   background: rgba(255, 255, 0, 0.5);

}

js

const { Transmat, addListeners, TransmatObserver } = transmat;



const target = document.getElementById("target");



addListeners(target, "receive", (event) => {

  const transmat = new Transmat(event);

  // 判断是否含有"application/json"类型的数据

  // 及事件类型是否为drop或paste事件

  if (transmat.hasType("application/json") 

    && transmat.accept()

  ) {

    const jsonString = transmat.getData("application/json");

    const data = JSON.parse(jsonString);

    target.textContent = jsonString;

  }

});

在以上代码中，我们利用 transmat 这个库提供的 addListeners 函数为 div#target 元素，添加了 receive 的事件监听。顾名思义，该 receive 事件表示接收消息。在对应的事件处理器中，我们通过 transmat 对象的 hasType 方法过滤了 application/json 的消息，然后通过 JSON.parse 方法进行反序列化获得对应的数据，同时把对应 jsonString 的内容显示在 div#target 元素内。

在图 3 中，当我们把可拖拽的元素，拖拽至自定义的释放目标时，会产生高亮效果，具体如下图所示：

这个效果是利用 transmat 这个库提供的 TransmatObserver 类来实现，该类可以帮助我们响应用户的拖拽行为，具体的使用方式如下所示：

const obs = new TransmatObserver((entries) => {

  for (const entry of entries) {

    const transmat = new Transmat(entry.event);

    if (transmat.hasType("application/json")) {

      entry.target.classList.toggle("drag-active", entry.isActive);

      entry.target.classList.toggle("drag-over", entry.isTarget);

    }

  }

});

obs.observe(target);

第一次看到 TransmatObserver 之后，阿宝哥立马想到了 MutationObserver API，因为它们都是观察者且拥有类似的 API。利用 MutationObserver API 我们可以监视 DOM 的变化。DOM 的任何变化，比如节点的增加、减少、属性的变动、文本内容的变动，通过这个 API 我们都可以得到通知。如果你对该 API 感兴趣的话，可以阅读 是谁动了我的 DOM？ 这篇文章。

现在我们已经知道 transmat 这个库如何使用，接下来阿宝哥将带大家一起来分析这个库背后的工作原理。

Transmat 使用示例：Transmat Demo

gist.github.com/semlinker/c…

三、Transmat 源码分析

在 transmat 源码分析环节，因为在前面实战部分，我们使用到了 addListeners、Transmat、TransmatObserver 这三个 “函数” 来实现核心的功能，所以接下来的源码分析，我们将围绕它们展开。这里我们先来分析 addListeners 函数。

3.1 addListeners 函数

addListeners 函数用于设置监听器，调用该函数后会返回一个用于移除事件监听的函数。在分析函数时，阿宝哥习惯先分析函数的签名：

// src/transmat.ts

function addListeners<T extends Node>(

  target: T,

  type: TransferEventType,

  listener: (event: DataTransferEvent, target: T) => void,

  options = {dragDrop: true, copyPaste: true}

): () => void

通过观察以上的函数签名，我们可以很直观的了解该函数的输入和输出。该函数支持以下 4 个参数：

• target：表示监听的目标，它的类型是 Node 类型。


• type：表示监听的类型，该参数的类型 TransferEventType 是一个联合类型 —— 'transmit' | 'receive'。


• listener：表示事件监听器，它支持的事件类型为 DataTransferEvent，该类型也是一个联合类型 —— DragEvent | ClipboardEvent，即支持拖拽事件和剪贴板事件。


• options：表示配置对象，用于设置是否允许拖拽和复制、粘贴操作。

在 addListeners 函数体中，主要包含以下 3 个步骤：

• 步骤 ①：根据 isTransmitEvent 和 options.copyPaste 的值，注册剪贴板相关的事件。


• 步骤 ②：根据 isTransmitEvent 和 options.dragDrop 的值，注册拖拽相关的事件。


• 步骤 ③：返回函数对象，用于移除已注册的事件监听。

// src/transmat.ts

export function addListeners<T extends Node>(

  target: T,

  type: TransferEventType, // 'transmit' | 'receive'

  listener: (event: DataTransferEvent, target: T) => void,

  options = {dragDrop: true, copyPaste: true}

): () => void {

  const isTransmitEvent = type === 'transmit';

  let unlistenCopyPaste: undefined | (() => void);

  let unlistenDragDrop: undefined | (() => void);



  if (options.copyPaste) {

    // ① 可拖拽源监听cut和copy事件，可释放目标监听paste事件

    const events = isTransmitEvent ? ['cut', 'copy'] : ['paste'];

    const parentElement = target.parentElement!;

    unlistenCopyPaste = addEventListeners(parentElement, events, event => {

      if (!target.contains(document.activeElement)) {

        return;

      }

      listener(event as DataTransferEvent, target);



      if (event.type === 'copy' || event.type === 'cut') {

        event.preventDefault();

      }

    });

  }



  if (options.dragDrop) {

    // ② 可拖拽源监听dragstart事件，可释放目标监听dragover和drop事件

    const events = isTransmitEvent ? ['dragstart'] : ['dragover', 'drop'];

    unlistenDragDrop = addEventListeners(target, events, event => {

      listener(event as DataTransferEvent, target);

    });

  }



  // ③ 返回函数对象，用于移除已注册的事件监听

  return () => {

    unlistenCopyPaste && unlistenCopyPaste();

    unlistenDragDrop && unlistenDragDrop();

  };

}

以上代码的事件监听最终是通过调用 addEventListeners 函数来实现，在该函数内部会循环调用 addEventListener 方法来添加事件监听。以前面 Transmat 的使用示例为例，在对应的事件处理回调函数内部，我们会以 event 事件对象为参数，调用 Transmat 构造函数创建 Transmat 实例。那么该实例有什么作用呢？要搞清楚它的作用，我们就需要来了解 Transmat 类。

3.2 Transmat 类

Transmat 类被定义在 src/transmat.ts 文件中，该类的构造函数含有一个类型为 DataTransferEvent 的参数 event：

// src/transmat.ts

export class Transmat {

  public readonly event: DataTransferEvent;

  public readonly dataTransfer: DataTransfer;



  // type DataTransferEvent = DragEvent | ClipboardEvent;

  constructor(event: DataTransferEvent) {

    this.event = event;

    this.dataTransfer = getDataTransfer(event);

  }

}

在 Transmat 构造函数内部还会通过 getDataTransfer 函数来获取 DataTransfer 对象并赋值给内部的 dataTransfer 属性。DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

下面我们来看一下 getDataTransfer 函数的具体实现：

// src/data_transfer.ts

export function getDataTransfer(event: DataTransferEvent): DataTransfer {

  const dataTransfer =

    (event as ClipboardEvent).clipboardData ??

    (event as DragEvent).dataTransfer;

  if (!dataTransfer) {

    throw new Error('No DataTransfer available at this event.');

  }

  return dataTransfer;

}

在以上代码中，使用了空值合并运算符 ??。该运算符的特点是：当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。即先判断是否为剪贴板事件，如果是的话就会从 clipboardData 属性获取 DataTransfer 对象。否则，就会从 dataTransfer 属性获取。

对于可拖拽源，在创建完 Transmat 对象之后，我们就可以调用该对象上的 setData 方法保存一项或多项数据。比如，在以下代码中，我们设置了不同类型的多项数据：

transmat.setData({

  "text/plain": "大家好，我是阿宝哥!",

  "text/html": `

    <h1>大家好，我是阿宝哥</h1>

		...

   `,

  "text/uri-list": "https://juejin.cn/user/764915822103079",

  "application/json": {

     name: "阿宝哥",

     wechat: "semlinker",

   },

});

了解完 setData 方法的用法之后，我们来看一下它的具体实现：

// src/transmat.ts

setData(

  typeOrEntries: string | {[type: string]: unknown},

  data?: unknown

): void {

  if (typeof typeOrEntries === 'string') { 

    this.setData({[typeOrEntries]: data});

  } else {

    // 处理多种类型的数据

    for (const [type, data] of Object.entries(typeOrEntries)) {

      const stringData =

        typeof data === 'object' ? JSON.stringify(data) : `${data}`;

      this.dataTransfer.setData(normalizeType(type), stringData);

     }

   }

}

由以上代码可知，在 setData 方法内部最终会调用 dataTransfer.setData 方法来保存数据。dataTransfer 对象的 setData 方法支持两个字符串类型的参数：format 和 data。它们分别表示要保存的数据格式和实际的数据。如果给定数据格式不存在，则将对应的数据保存到末尾。如果给定数据格式已存在，则将使用新的数据替换旧的数据。

下图是 dataTransfer.setData 方法的兼容性说明，由图可知主流的现代浏览器都支持该方法。

（图片来源：caniuse.com/mdn-api_dat…

Transmat 类除了拥有 setData 方法之外，它也含有一个 getData 方法，用于获取已保存的数据。getData 方法支持一个字符串类型的参数 type，用于表示数据的类型。在获取数据前，会调用 hasType 方法判断是否含有该类型的数据。如果有包含的话，就会通过 dataTransfer 对象的 getData 方法来获取该类型对应的数据。

// src/transmat.ts

getData(type: string): string | undefined {

  return this.hasType(type)

    ? this.dataTransfer.getData(normalizeType(type))

    : undefined;

}

此外，在调用 getData 方法前，还会调用 normalizeType 函数，对传入的 type 类型参数进行标准化操作。具体的如下所示：

// src/data_transfer.ts

export function normalizeType(input: string) {

  const result = input.toLowerCase();

  switch (result) {

    case 'text':

      return 'text/plain';

    case 'url':

      return 'text/uri-list';

    default:

      return result;

  }

}

同样，我们也来看一下 dataTransfer.getData 方法的兼容性：

（图片来源：caniuse.com/mdn-api_dat…

好的，Transmat 类中的 setData 和 getData 这两个核心方法就先介绍到这里。接下来我们来介绍另一个类 —— TransmatObserver 。

3.3 TransmatObserver 类

TransmatObserver 类的作用是可以帮助我们响应用户的拖拽行为，可用于在拖拽过程中高亮放置区域。比如，在前面的示例中，我们通过以下方式来实现放置区域的高亮效果：

const obs = new TransmatObserver((entries) => {

  for (const entry of entries) {

    const transmat = new Transmat(entry.event);

    if (transmat.hasType("application/json")) {

      entry.target.classList.toggle("drag-active", entry.isActive);

      entry.target.classList.toggle("drag-over", entry.isTarget);

    }

  }

});

obs.observe(target);

同样，我们先来分析一下 TransmatObserver 类的构造函数：

// src/transmat_observer.ts

export class TransmatObserver {

  private readonly targets = new Set<Element>(); // 观察的目标集合

  private prevRecords: ReadonlyArray<TransmatObserverEntry> = []; // 保存前一次的记录

  private removeEventListeners = () => {};



  constructor(private readonly callback: TransmatObserverCallback) {}

}

由以上代码可知，TransmatObserver 类的构造函数支持一个类型为 TransmatObserverCallback 的参数 callback，该参数对应的类型定义如下：

// src/transmat_observer.ts

export type TransmatObserverCallback = (

  entries: ReadonlyArray<TransmatObserverEntry>,

  observer: TransmatObserver

) => void;

TransmatObserverCallback 函数类型接收两个参数：entries 和 observer。其中 entries 参数的类型是一个

只读数组（ReadonlyArray），数组中每一项的类型是 TransmatObserverEntry，对应的类型定义如下：

// src/transmat_observer.ts

export interface TransmatObserverEntry {

  target: Element;

  /** type DataTransferEvent = DragEvent | ClipboardEvent */

  event: DataTransferEvent;

  /** Whether a transfer operation is active in this window. */

  isActive: boolean;

  /** Whether the element is the active target (dragover). */

  isTarget: boolean;

}

在前面 transmat-target 的示例中，当创建完 TransmatObserver 实例之后，就会调用该实例的 observe 方法并传入待观察的对象。observe 方法的实现并不复杂，具体如下所示：

// src/transmat_observer.ts

observe(target: Element) {

  /** private readonly targets = new Set<Element>(); */

  this.targets.add(target);

  if (this.targets.size === 1) {

    this.addEventListeners();

  }

}

在 observe 方法内部，会把需观察的元素保存到 targets Set 集合中。当 targets 集合的大小等于 1 时，就会调用当前实例的 addEventListeners 方法来添加事件监听：

// src/transmat_observer.ts

private addEventListeners() {

  const listener = this.onTransferEvent as EventListener;

  this.removeEventListeners = addEventListeners(

    document,

    ['dragover', 'dragend', 'dragleave', 'drop'],

    listener,

    true

  );

}

在私有的 addEventListeners 方法内部，会利用我们前面介绍的 addEventListeners 函数来为 document 元素批量添加与拖拽相关的事件监听。而对应的事件说明如下所示：

• dragover：当元素或选中的文本被拖到一个可释放目标上时触发；


• dragend：当拖拽操作结束时触发（比如松开鼠标按键）；


• dragleave：当拖拽元素或选中的文本离开一个可释放目标时触发；


• drop：当元素或选中的文本在可释放目标上被释放时触发。

其实与拖拽相关的事件并不仅仅只有以上四种，如果你对完整的事件感兴趣的话，可以阅读 MDN 上 HTML 拖放 API 这篇文章。下面我们来重点分析 onTransferEvent 事件监听器：

private onTransferEvent = (event: DataTransferEvent) => {

  const records: TransmatObserverEntry[] = [];

  for (const target of this.targets) {

    // 当光标离开浏览器时，对应的事件将会被派发到body或html节点

    const isLeavingDrag =

      event.type === 'dragleave' &&

        (event.target === document.body ||

         event.target === document.body.parentElement);



    // 页面上是否有拖拽行为发生

    // 当拖拽操作结束时触发dragend事件

    // 当元素或选中的文本在可释放目标上被释放时触发drop事件

    const isActive = event.type !== 'drop'

      && event.type !== 'dragend' && !isLeavingDrag;



    // 判断可拖拽的元素是否被拖到target元素上

    const isTargetNode = target.contains(event.target as Node);

    const isTarget = isActive && isTargetNode 

      && event.type === 'dragover';



    records.push({

      target,

      event,

      isActive,

      isTarget,

   });

 }

    

 // 仅当记录发生变化的时候，才会调用回调函数

 if (!entryStatesEqual(records, this.prevRecords)) {

   this.prevRecords = records as ReadonlyArray<TransmatObserverEntry>;

   this.callback(records, this);

 }

}

在以上代码中，使用了 node.contains(otherNode) 方法来判断可拖拽的元素是否被拖到 target 元素上。当 otherNode 是 node 的后代节点或者 node 节点本身时，返回 true，否则返回 false。此外，为了避免频繁地触发回调函数，在调用回调函数前会先调用 entryStatesEqual 函数来检测记录是否发生变化。entryStatesEqual 函数的实现比较简单，具体如下所示：

// src/transmat_observer.ts

function entryStatesEqual(

  a: ReadonlyArray<TransmatObserverEntry>,

  b: ReadonlyArray<TransmatObserverEntry>

): boolean {

  if (a.length !== b.length) {

    return false;

  }

  // 如果有一项不匹配，则立即返回false。

  return a.every((av, index) => {

    const bv = b[index];

    return av.isActive === bv.isActive && av.isTarget === bv.isTarget;

  });

}

与 MutationObserver 一样，TransmatObserver 也提供了用于获取最近已触发记录的 takeRecords 方法和用于 “断开” 连接的 disconnect 方法：

// 返回最近已触发记录

takeRecords() {

  return this.prevRecords;

}



// 移除所有目标及事件监听器

disconnect() {

  this.targets.clear();

  this.removeEventListeners();

}

到这里 Transmat 源码分析的相关内容已经介绍完了，如果你对该项目感兴趣的话，可以自行阅读该项目的完整源码。该项目是使用 TypeScript 开发，已入门 TypeScript 的小伙伴可以利用该项目巩固一下所学的 TS 知识及 OOP 面向对象的设计思想。

今天我们来看引入大杯Element，其实引入很简单，跟着文档操作就完事了。所以这篇文章重点是看如何修改主题以及在修改主题中我遇到的问题。

废话少说，开整！

引入Element-plus

npm install element-plus --save

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus'; // ++

import 'element-plus/lib/theme-chalk/index.css'; // ++

import App from './App.vue';



createApp(App).use(ElementPlus).mount('#app'); // edit

此时在项目中引入Element组件测试发现，已经可以正常使用了。

修改Element主题

在Element文档中有如何修改主题的教程，我们项目中主要的需求就是修改主题色，因此本文也以修改主题色为例子。

创建文件

首先我新增了两个文件，color.sass 和 element-theme.sass（这里假设你的项目已经引入了sass）。之所以创建两个文件，是因为 color.sass 除了给element主题提供颜色配置，还会引入为全局变量，方便在组件中使用。

配置主题

// color.sass

$--color-primary: red

// element-theme.sass

@improt "./color.sass" // 引入主题色文件



$--font-path: '~element-plus/lib/theme-chalk/fonts'

@import "~element-plus/packages/theme-chalk/src/index"

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus';

import 'element-plus/lib/theme-chalk/index.css'; // --

import './styles/element-theme.sass'; // ++

import App from './App.vue';



createApp(App).use(ElementPlus).mount('#app');

如上按照element官网给的例子引入以后，在vite项目中会报错。

这是因为 ~ 这种路径写法是vue-cli中的约定，它使我们可以引用node_modules包内的资源，详见文档：URL转换规则

所以我们在这里需要把路径 ~element-plus 改成 node_modules/element-plus。也就是文件变成了这个样子：

@import "./color.sass"



$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts'

@import "node_modules/element-plus/packages/theme-chalk/src/index"

文章写到这里的时候遇到了一个尴尬的问题，在我们的生产项目搭建框架时，路径改成由 node_modules 引入后，主题色修改没有问题，可以生效。但是fonts文件加载请求报404，如下图1。但是文章用的实验项目，同样的方式修改后，一切正常，如图2。

经过反复测试后发现，是因为生产项目配置了多入口，启动项目时对应了不同的入口文件，导致引入fonts文件报错。具体原因有待研究，希望了解的兄弟不吝赐教

关于多入口文件配置以及解决element字体引入的问题，后边会有一篇文章单独介绍，这里就先不剧透了。

配置全局变量

前面单独创建了一个color.sass是为了将文件里的颜色变量引入到全局，方便在组件中使用。
为了简化使用，我们可以在文件中为常用颜色额外定义简短变量，但是要注意，不能修改element需要的变量！

$--color-primary: #ff0000



$primary: #ff0000

引入全局变量需要在vite.config.ts文件中配置css预处理器，并将引入的变量文件传给预处理器。配置方式如下

// vite.config.ts

...

export default defineConfig({

  ...

  css: {

    preprocessorOptions: {

      sass: {

        // \n 处理文件中多个引入报换行错误的问题

        additionalData: "@import './src/styles/color.sass'\n",

      },

    },

  },

});

引入后我们在组件内进行测试

// HelloWorld.vue

<style scoped lang="sass">

a

  color: $primary

</style>

可以看到页面上已经生效了

因为通过这种方式插入全局变量，会为所有的.sass文件都插入对应的文件引入，所以在前面我们定义的 element-theme.sass 文件中就可以不写 color.sass 文件的引入了。

// element-theme.sass



// @import "./color.sass" // edit



$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts'

@import "node_modules/element-plus/packages/theme-chalk/src/index"

修改默认语言

可能是为了立足中国，走向世界。使用组件时会发现大杯Element的默认语言变成了英文，我们需要自己引入并修改默认语言为中文。

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus';

import './styles/element-theme.sass';

import locale from 'element-plus/lib/locale/lang/zh-cn'; // ++

import App from './App.vue';



createApp(App).use(ElementPlus, { locale }).mount('#app'); // edit

修改完成后，再去看看组件，是不是已经变成了中文。

引入大杯Element并修改主题的工作已经完成了，项目中我们就可以使用自定义主题色的Element组件。并且抛出了主题色全局变量，方便我们在组件中使用。

下次我们将一次性引入Vuex和Vue Router，这两项工作完成后，就已经完成了项目框架的雏形，可以开始开发了。不过后续我们仍然会有一些优化以及Vue3开发过程中相较于Vue2有较大变化的方法总结，整理不易，希望大家多多支持。

上回我们说到配置ESLint以及添加vue-recommended、airbnb-base、prettier规则，一切都很顺利。唯有一点需要注意的就是 .eslintrc 文件extends配置项中，plugin:prettier/recommended一定要在airbnb-base之后添加，上篇文章没有看到的童鞋们可以回去看看原因。

上篇文章最后我们提到，在开发阶段进行ESLint校验，效果是一件靠自觉的事。因此我们需要在代码提交前再次执行ESLint，加强校验力度以保证Git上得到的都是优美的代码。

我们本次需要用到的工具有两个：husky 和 lint-staged

husky

它的主要作用就是关联git的钩子函数，在执行相关git hooks时进行自定义操作，比如在提交前执行eslint校验，提交时校验commit message等等。

Install

husky官网推荐使用自动初始化命令，因为我们就按照官网推荐的方式进行安装，以npm为例

// && 连接符在vscode中会报错，建议在windows的powershell执行

npx husky-init && npm install

执行完成后，项目根目录会多出来 .husky 文件夹。

内部的_文件夹我们在此无需关心，pre-commit文件便是在git提交前会执行的操作，如图。我们可以在当前目录创建钩子文件来完成我们想要的操作。

需要注意的是，新版husky的配置方式做出了破坏性的改变，如果在使用过程中发现配置完以后没有生效，可以注意查看一下安装版本

升级方式可以查看官方文档：typicode.github.io/husky/#/?id…

配置

我们想要在提交前执行eslint校验代码，因此修改husky的pre-commit文件即可。我们在文件中添加如下代码

#!/bin/sh

. "$(dirname "$0")/_/husky.sh"



eslint . --ext .js,.ts,.vue --fix #++ 校验所有的.js .ts .vue文件，并修复可自动修复的问题

git add . #++ 用于将自动修复后改变的文件添加到暂存区

exit 1 #++ 终止命令，用来测试钩子

此时提交代码执行commit是可以看到已经进入了pre-commit文件执行命令。但是会报错

这是因为此处执行shell命令，需要我们全局安装eslint。执行 npm install -g eslint。
安装完成后再次执行git commit，可以看到已经可以正常运行了

错误处理

• 
  

  截图中第一个报错是书写错误，直接改掉就好。

  
  


• 
  

  第二个错误，是因为我们的ESLint中没有配置TS的解析器，导致ESLint不能正常识别并校验TS代码。解决它，我们安装 @typescript-eslint/parser，并修改ESLint配置即可。

  
  

npm install @typescript-eslint/parser --save-dev

// .eslintrc.js

...

parserOptions: {

    ecmaVersion: 12,

    parser: '@typescript-eslint/parser', // ++

},

...

• 第三个错误，它说的是我们引入的vite和@vitejs/plugin-vue两个包在 package.json 中应该是dependencies而不是devDependencies依赖。这个错误是因为airbnb-base规则设置了不允许引入开发依赖包，但是很明显我们不应该修改这两个框架生成的依赖结构。那我们看一下airbnb关于这条规则的定义

可以看到，airbnb对这条规格做了列外处理，那就很好办了，我们只需要在它的基础上，添加上上面报错的两个包。

在eslint中添加如下规则：

// .eslintrc.js

...

rules: {

    ...

    'import/no-extraneous-dependencies': [

      'error',

      {

        devDependencies: [

          ... // 保持airbnb-base中的规则不变

          '**vite**', // ++

          '**@vitejs**', // ++

        ],

        optionalDependencies: false,

      },

    ],

}

...

修改完上述错误后，我们去掉 .husky/pre-commit 文件中 exit 1 这行代码，再次执行提交操作，可以看到，已经可以提交成功了。

思考

通过配置husky，我们已经实现了在提交前对代码进行检查。但是eslint配置的是 eslint . --ext .js,.ts,.vue --fix，检查所有的js、ts、vue文件，随着项目代码越来越多，每次提交前校验所有代码显然是不现实的。所以需要一个办法每次只检查新增或修改的文件。

这就需要开头提到的第二个工具来祝我们一臂之力了。

lint-staged

lint-staged的作用就是对暂存区的文件执行lint，可以让我们每次提交时只校验自己修改的文件。

npm install lint-staged --save-dev

配置lint-staged

安装完成后，在package.json文件中添加lint-staged的配置

// package.json

...

"scripts": {

    ...

    "lint-staged": "lint-staged"

},

"lint-staged": {

    // 校验暂存区的ts、js、vue文件

    "*.{ts,js,vue}": [

      "eslint --fix",

      "git add ."

    ]

}

添加scripts里的lint-staged命令，是因为不建议全局安装lint-staged，以防在其他同学电脑上没有全局安装导致运行报错。

修改husky

添加lint-staged配置后，husky就不在需要直接调用eslint了。修改pre-commit文件如下：

#!/bin/sh

. "$(dirname "$0")/_/husky.sh"



# eslint . --ext .js,.ts,.vue --fix

# git add .

# exit 1

npm run lint-staged

lint-staged配置后，我们不再需要配置husky时全局安装的eslint，因为lint-staged可以检测项目里局部安装的脚本。同时，不建议全局安装脚本，原因同上。

测试

到此，提交阶段对代码执行lint需要的配置我们已经完成了。再次提交代码测试，可以看到commit后执行的命令已经变成了lint-staged。

下一篇踩坑记我们将引入Element-plus，详细介绍其中遇到的问题，并修改element组件主题。

前段时间领导告知公司将开启一个全新的项目。

从零开始，如果不尝试一下最近火热的 Vue3 + Vite 岂不是白白浪费了这么好的吃螃蟹的机会。

说干就干，然后就开始读各种文档，从 0 开始，一步一步搭完这个项目到可以正常开发，这对于我一个第一次搭生产项目的菜鸡来说，着实艰难。

到今天，项目已经进入联调阶段，并且已经在环境上部署成功可以正常访问。这个实验也算是有了阶段性的成功吧，因此来写文章记录此次Vue3项目搭建历险记。

第一篇文章主要是项目初始化和ESLint导入，废话不多说，开整。

初始化项目

按照自己需要的框架选择就可以了，我这里用的Vue3+TS。
初始化完成后的目录结构如下：

启动项目

执行 npm run dev，大概率会直接报错，因为项目默认启动在3000端口，可能会被拒绝。

解决这个问题，我们需要在根目录下的 vite.config.ts 文件中修改开发服务器的配置，手动指定端口号。

修改完成后重新启动项目，就可以访问了。

添加ESLint支持

安装ESLint

• eslint只有开发阶段需要，因此添加到开发阶段的依赖中即可

npm install eslint --save-dev

• 在VS Code中安装eslint插件，以在开发中自动进行eslint校验

配置ESLint

创建 .eslintrc.js 文件

添加基础配置

module.exports = {

  root: true,

  env: {

    browser: true, // browser global variables

    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.

  },

  parserOptions: {

    ecmaVersion: 12,

  },

}

引入规则

为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的 Airbnb规范 ，并引入代码风格管理工具 Prettier 。

eslint-plugin-vue

ESLint官方提供的Vue插件，可以检查 .vue文件中的语法错误

npm install eslint-plugin-vue

// .eslintrc.js

...

extends: [

    'plugin:vue/vue3-recommended' // ++

]

...

eslint-config-airbnb-base

Airbnb基础规则的eslint插件

// npm version > 5

npx install-peerdeps --dev eslint-config-airbnb-base

// .eslintrc.js

...

extends: [

    'plugin:vue/vue3-recommended',

    'airbnb-base', // ++

],

...

这个时候就应该可以看到一些项目原有代码的eslint报错信息了，如果没有的话，可以尝试重启编辑器的eslint服务。

eslint-plugin-prettier

本次项目不单独引入prettier，而是使用eslint插件将prettier作为eslint规则执行。

npm install --save-dev eslint-plugin-prettier

npm install --save-dev --save-exact prettier

// .eslintrc.js

...

plugins: ['prettier'], // ++

rules: {

    'prettier/prettier': 'error', // ++

},

...

配置到此时，大概率会遇到 eslint 规则和 prettier 规则冲突的情况，比如下图。eslint告诉我们要使用单引号，但是改为单引号以后，prettier有告诉我们要使用双引号。

这时候就需要另一个eslint的插件 eslint-config-prettier，这个插件的作用是禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理。

npm install --save-dev eslint-config-prettier

// .eslintrc.js

...

plugins: ['prettier'],

extends: [

    'plugin:vue/vue3-recommended',

    'airbnb-base',

    'plugin:prettier/recommended', // ++

],

rules: {

    'prettier/prettier': 'error',

},

...

plugin:prettier/recommended 的配置需要注意的是，一定要放在最后。因为extends中后引入的规则会覆盖前面的规则。

我们还可以在根目录新建 .prettierrc.js 文件自定义 prettier 规则，保存规则后，重启编辑器的eslint服务以更新编辑器读取的配置文件。

// .prettierrc.js

module.exports = {

  singleQuote: true, // 使用单引号

}

到此，我们的ESLint基本配置结束了，后续需要时可以对规则进行调整。

这篇文章到这里就结束了，但是只在开发阶段约束代码风格是一件靠自觉性的是，因为我们还需要增强ESLint的约束度。下一篇文章，我们一起研究如果在提交代码前进行ESLint二次校验，保证提交到Git的代码都是符合规定的~

今天给大家分享一下关于JS存储的问题。

建议阅读时间：5-10分钟。

序章

首先看一道经典的关于JS存储的题目，来一场紧张又刺激的脑内吃鸡大战吧：

var a = {n:1};
a.x = a = {n:2};
console.log(a.x);
console.log(a);·

问输出？
想必大家心中都有答案了 ...
结果很显然是有趣的，

到这里有部分现场观众朋友就问了，这特喵咋undefined？不是赋值了吗？别急先别骂人，往下看：

探索时刻

我们先将代码这样修改：

a.x = a = {n:2};   ---- >  a = a.x = {n:2};

结果显然是一致的，不论是先给 a 赋值还是先给 a.x 赋值结果都是一致的，
查了一些资料后，得知这等式中 . 的优先级别是最高的，

因此这题的思路：

JS会把变量存到栈中，而对象则会存在堆中。

1. 第一行代码：变量 a 的指针指向堆栈；


2. 第二行代码：a.x = a = {n:2}; 堆1中的变量对像X指向堆2 { n:2 }， 接着给a赋值 a={n:2} ,a的指针被改变指向堆2，然后堆1没有被指针指向，被GC回收，因此输出的 a.x 是underfinde 而 a 的值是 {n:2}；

理解上述代码只需要稍微理解一下js变量储存：

大家都知道，JavaScript中的变量类型分为两种，一种是基本数据类型，另外一种就是引用类型。

两种数据类型的存储方式在JS中也有所不同。

另外，内存分为栈区（stack）和堆区（heap），然后在JS中开发人员并不能直接操作堆区，堆区数据由JS引擎操作完成，那这二者在存储数据上到底有什么区别呢？

揭晓时刻

一幅图告诉你：

　JS中变量的定义在内存中包括三个部分：

• 变量标示　　（比如上图中的Str，变量标示存储在内存的栈区）


• 变量值　　 （比如上面中的Str的值souvenir或者是obj1对象的指向堆区地址，这个值也是存储在栈区）


• 对象　　 （比如上图中的对象1或者对象2，对象存储在堆区）

也就是说，对于基本数据类型来说，只使用了内存的栈区。
我们再做一个有趣的改动：

var a = {n:1};

var b=a;

a.x = a = {n:2};

console.log(a.x);

console.log(a);

console.log(b);

console.log(b.x);

可以看到我们并没有对 b 进行操作但是 b.x 等于{n:2}，这是一个被操作过的值，就如上述可知 b的指针指向堆1，所以堆没有被回收，而被显示出来了 ~

从这么一个简单例子，你是否对JS存储机制有了新的认识呢 ~

最近发现Vue增加了一个petite-vue的仓库，大概看了一下，这是一个无虚拟DOM的mini版Vue，前身貌似是vue-lite(瞎猜的~)，主要用于在服务端渲染的HTML页面中上"sprinkling"(点缀)一些Vue式的交互。颇有意思，于是看了下源码(v0.2.3)，整理了本文。

起步

开发调试环境

整个项目的开发环境非常简单

git clone git@github.com:vuejs/petite-vue.git



yarn 



# 使用vite启动

npm run dev



# 访问http://localhost:3000/

(不得不说，用vite来搭开发环境还是挺爽的~

新建一个测试文件exmaples/demo.html，写点代码

<script type="module">

  import { createApp, reactive } from '../src'



  createApp({

    msg: "hello"

  }).mount("#app")

</script>



<div id="app">

    <h1>{{msg}}</h1>

</div>

然后访问http://localhost:3000/demo.html即可

目录结构

从readme可以看见项目与标准vue的一些差异

• Only ~5.8kb，体积很小


• Vue-compatible template syntax，与Vue兼容的模板语法


• DOM-based, mutates in place，基于DOM驱动，就地转换


• Driven by @vue/reactivity，使用@vue/reactivity驱动

目录结构也比较简单，使用ts编写，外部依赖基本上只有@vue/reactivity。

核心实现

createContext

从上面的demo代码可以看出，整个项目从createApp开始。

export const createApp = (initialData?: any) => {

  // root context

  const ctx = createContext()

  if (initialData) {

    ctx.scope = reactive(initialData) // 将初始化数据代理成响应式

  }

  // app的一些接口

  return {

    directive(name: string, def?: Directive) {},

    mount(el?: string | Element | null) {},

    unmount() {}

  }

}

关于Vue3中的reactive,可以参考之前整理的：Vue3中的数据侦测reactive，这里就不再展开了。

createApp中主要是通过createContext创建根context，这个上下文现在基本不陌生了，来看看createContext

export const createContext = (parent?: Context): Context => {

  const ctx: Context = {

    ...parent,

    scope: parent ? parent.scope : reactive({}),

    dirs: parent ? parent.dirs : {}, // 支持的指令

    effects: [],

    blocks: [],

    cleanups: [],

    // 提供注册effect回调的接口，主要使用调度器来控制什么时候调用

    effect: (fn) => {

      if (inOnce) {

        queueJob(fn)

        return fn as any

      }

      // @vue/reactivity中的effect方法

      const e: ReactiveEffect = rawEffect(fn, {

        scheduler: () => queueJob(e)

      })

      ctx.effects.push(e)

      return e

    }

  }

  return ctx

}

稍微看一下queueJob就可以发现，还是Vue中熟悉的nextTick实现，

• 通过一个全局变量queue队列保存回调


• 在下一个微任务处理阶段，依次执行queue中的每一个回调，然后清空queue

mount

基本使用

createApp().mount("#app")

mount方法最主要的作用就是处理el参数，找到应用挂载的根DOM节点，然后执行初始化流程

mount(el?: string | Element | null) {

    let roots: Element[]

    // ...根据el参数初始化roots

    // 根据el创建Block实例

    rootBlocks = roots.map((el) => new Block(el, ctx, true))

    return this

}

Block是一个抽象的概念，用于统一DOM节点渲染、插入、移除和销毁等操作。

下图是依赖这个Block的地方，可以看见主要在初始化、if和for这三个地方使用

看一下Block的实现

// src/block.ts

export class Block {

  template: Element | DocumentFragment

  ctx: Context

  key?: any

  parentCtx?: Context



  isFragment: boolean

  start?: Text

  end?: Text



  get el() {

    return this.start || (this.template as Element)

  }



  constructor(template: Element, parentCtx: Context, isRoot = false) {

    // 初始化this.template

    // 初始化this.ctx

    

    // 构建应用

    walk(this.template, this.ctx)

  }

  // 主要在新增或移除时使用，可以先不用关心实现

  insert(parent: Element, anchor: Node | null = null) {}

  remove() {}

  teardown() {}

}

这个walk方法，主要的作用是递归节点和子节点，如果之前了解过递归diff，这里应该比较熟悉。但petite-vue中并没有虚拟DOM，因此在walk中会直接操作更新DOM。

export const walk = (node: Node, ctx: Context): ChildNode | null | void => {

  const type = node.nodeType

  if (type === 1) {

    // 元素节点

    const el = node as Element

    // ...处理 如v-if、v-for

    // ...检测属性执行对应的指令处理 applyDirective，如v-scoped、ref等



    // 先处理子节点，在处理节点自身的属性

    walkChildren(el, ctx)



    // 处理节点属性相关的自定，包括内置指令和自定义指令

  } else if (type === 3) {

    // 文本节点

    const data = (node as Text).data

    if (data.includes('{{')) {

      // 正则匹配需要替换的文本，然后 applyDirective(text)

      applyDirective(node, text, segments.join('+'), ctx)

    }

  } else if (type === 11) {

    walkChildren(node as DocumentFragment, ctx)

  }

}



const walkChildren = (node: Element | DocumentFragment, ctx: Context) => {

  let child = node.firstChild

  while (child) {

    child = walk(child, ctx) || child.nextSibling

  }

}

可以看见会根据node.nodeType区分处理处理

• 对于元素节点，先处理了节点上的一些指令，然后通过walkChildren处理子节点。
  
  
  
  • v-if，会根据表达式决定是否需要创建Block然后执行插入或移除
  
  
  • v-for，循环构建Block，然后执行插入
  
  
  
  


• 对于文本节点，替换{{}}表达式，然后替换文本内容

v-if

来看看if的实现，通过branches保存所有的分支判断，activeBranchIndex通过闭包保存当前位于的分支索引值。

在初始化或更新时，如果某个分支表达式结算结果正确且与上一次的activeBranchIndex不一致，就会创建新的Block，然后走Block构造函数里面的walk。

export const _if = (el: Element, exp: string, ctx: Context) => {

  const parent = el.parentElement!

  const anchor = new Comment('v-if')

  parent.insertBefore(anchor, el)



  // 存放条件判断的各种分支

  const branches: Branch[] = [{ exp,el }]



  // 定位if...else if ... else 等分支，放在branches数组中



  let block: Block | undefined

  let activeBranchIndex: number = -1 // 通过闭包保存当前位于的分支索引值



  const removeActiveBlock = () => {

    if (block) {

      parent.insertBefore(anchor, block.el)

      block.remove()

      block = undefined

    }

  }



  // 收集依赖

  ctx.effect(() => {

    for (let i = 0; i < branches.length; i++) {

      const { exp, el } = branches[i]

      if (!exp || evaluate(ctx.scope, exp)) {

        // 当判断分支切换时，会生成新的block

        if (i !== activeBranchIndex) {

          removeActiveBlock()

          block = new Block(el, ctx)

          block.insert(parent, anchor)

          parent.removeChild(anchor)

          activeBranchIndex = i

        }

        return

      }

    }

    // no matched branch.

    activeBranchIndex = -1

    removeActiveBlock()

  })



  return nextNode

}

v-for

for指令的主要作用是循环创建多个节点，这里还根据key实现了类似于diff算法来复用Block的功能

export const _for = (el: Element, exp: string, ctx: Context) => {

  // ...一些工具方法如createChildContexts、mountBlock



  ctx.effect(() => {

    const source = evaluate(ctx.scope, sourceExp)

    const prevKeyToIndexMap = keyToIndexMap

    // 根据循环项创建多个子节点的context

    ;[childCtxs, keyToIndexMap] = createChildContexts(source)

    if (!mounted) {

      // 首次渲染，创建新的Block然后insert

      blocks = childCtxs.map((s) => mountBlock(s, anchor))

      mounted = true

    } else {

      // 更新时

      const nextBlocks: Block[] = []

      // 移除不存在的block

      for (let i = 0; i < blocks.length; i++) {

        if (!keyToIndexMap.has(blocks[i].key)) {

          blocks[i].remove()

        }

      }

      // 根据key进行处理

      let i = childCtxs.length

      while (i--) {

        const childCtx = childCtxs[i]

        const oldIndex = prevKeyToIndexMap.get(childCtx.key)

        const next = childCtxs[i + 1]

        const nextBlockOldIndex = next && prevKeyToIndexMap.get(next.key)

        const nextBlock =

          nextBlockOldIndex == null ? undefined : blocks[nextBlockOldIndex]

        // 不存在旧的block，直接创建

        if (oldIndex == null) {

          // new

          nextBlocks[i] = mountBlock(

            childCtx,

            nextBlock ? nextBlock.el : anchor

          )

        } else {

          // 存在旧的block，复用，检测是否需要移动位置

          const block = (nextBlocks[i] = blocks[oldIndex])

          Object.assign(block.ctx.scope, childCtx.scope)

          if (oldIndex !== i) {

            if (blocks[oldIndex + 1] !== nextBlock) {

              block.insert(parent, nextBlock ? nextBlock.el : anchor)

            }

          }

        }

      }

      blocks = nextBlocks

    }

  })



  return nextNode

}

处理指令

所有的指令都是通过applyDirective和processDirective来处理的，后者是基于前者的二次封装，主要处理一些内置的指令快捷方式builtInDirectives，

export const builtInDirectives: Record<string, Directive<any>> = {

  bind,

  on,

  show,

  text,

  html,

  model,

  effect

}

每种指令都是基于ctx和el等来实现快速实现某些逻辑，具体实现可以参考对应源码。

当调用app.directive注册自定义指令时，

directive(name: string, def?: Directive) {

    if (def) {

        ctx.dirs[name] = def

        return this

    } else {

        return ctx.dirs[name]

    }

},

实际上是向contenx的dirs添加一个属性，当调用applyDirective时，就可以得到对应的处理函数

const applyDirective = (el: Node,dir: Directive<any>,exp: string,ctx: Context,arg?: string,modifiers?: Record<string, true>) => {

  const get = (e = exp) => evaluate(ctx.scope, e, el)

  // 执行指令方法

  const cleanup = dir({

    el,

    get,

    effect: ctx.effect,

    ctx,

    exp,

    arg,

    modifiers

  })

  // 收集那些需要在卸载时清除的副作用

  if (cleanup) {

    ctx.cleanups.push(cleanup)

  }

}

因此，可以利用上面传入的这些参数来构建自定义指令

app.directive("auto-focus", ({el})=>{

    el.focus()

})

小结

整个代码看起来，确实非常精简

• 没有虚拟DOM，就无需通过template构建render函数，直接递归遍历DOM节点，通过正则处理各种指令就行了


• 借助@vue/reactivity，整个响应式系统实现的十分自然，除了在解析指令的使用通过ctx.effect()收集依赖，基本无需再关心数据变化的逻辑

文章开头提到，petite-vue的主要作用是：在服务端渲染的HTML页面中上"sprinkling"(点缀)一些Vue式的交互。

就我目前接触到的大部分服务端渲染HTML的项目，如果要实现一些DOM交互，一般使用

• jQuery操作DOM，yyds


• 当然Vue也是可以通过script + template的方式编写的，但为了一个div的交互接入Vue，又有点杀鸡焉用牛刀的感觉


• 其他如React框架等同上

petite-vue使用了与Vue基本一致的模板语法和响应式功能，开发体验上应该很不错。且其无需考虑虚拟DOM跨平台的功能，在源码中直接使用浏览器相关API操作DOM，减少了框架runtime运行时的成本，性能方面应该也不错。

总结一下，感觉petite-vue结合了Vue标准版本的开发体验，以非常小的代码体积、良好的开发体验和还不错的运行性能，也许可以用来替代jQuery，用更现代的方式来操作DOM。

该项目是6月30号提交的第一个版本，目前相关的功能和接口应该不是特别稳定，可能会有调整。但就exmples目录中的示例而言，应该能满足一些简单的需求场景了，也许可以尝试在一些比较小型的历史项目中使用。

前言

这个月重新开始学习Vue3

目前已经完结第一部分：基础部分

我将所有内容吸收整理成10张脑图，一来快速入门Vue3，二来方便以后查看

脑图

应用实例和组件实例

模板语法

配置选项

计算属性和监听器

绑定class和style

条件渲染

列表渲染

事件处理

v-model及其修饰符

组件的基本使用

温馨小贴士

1. 由于图片较多，为了避免一张张保存的麻烦

我已将上述原图已上传github：github.com/jCodeLife/m…

2. 如果需要更改图片，为了方便你按照自己的习惯进行修改

我已将原始文件xmind上传github：
github.com/jCodeLife/m…

前言

我们都知道由于同源策略的存在,导致我们在跨域请求数据的时候非常的麻烦。首先阻挡我们的所谓同源到底是什么呢?，所谓同源就是浏览器的一个安全机制,不同源的客户端脚本没有在明确授权的情况下,不能读写对方资源。由于存在同源策略的限制,而又有需要跨域的业务,所以就有了CORS的出现。

我们都知道,jsonp也可以跨域,那为什么还要使用CORS呢

• jsonp只可以使用 GET 方式提交


• 不好调试,在调用失败的时候不会返回任何状态码


• 安全性,万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

开始CORS

CORS是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服啦 AJAX 只能同源使用的限制

CORS需要浏览器和服务器同时支持，整个 CORS通信过程，都是浏览器自动完成不需要用户参与，对于开发者来说，CORS的代码和正常的 ajax 没有什么差别，浏览器一旦发现跨域请求，就会添加一些附加的头信息，

CORS这么好吗，难道就没有缺点嘛？

答案肯定是NO，目前所有最新浏览器都支持该功能，但是万恶的IE不能低于10

简单请求和非简单请求

浏览器将CORS请求分成两类：简单请求和非简单请求

简单请求

凡是同时满足以下两种情况的就是简单请求，反之则非简单请求，浏览器对这两种请求的处理不一样

• 请求方法是以下方三种方法之一
  
  
  
  • HEAD
  
  
  • GET
  
  
  • POST
  
  
  
  


• HTTP的头信息不超出以下几种字段
  
  
  
  • Accept
  
  
  • Accept-Language
  
  
  • Content-Language
  
  
  • Last-Event-ID
  
  
  • Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
  
  
  
  

对于简单请求来说，浏览器之间发送CORS请求，具体来说就是在头信息中，增加一个origin字段，来看一下例子

GET /cors? HTTP/1.1

Host: localhost:2333

Connection: keep-alive

Origin: http://localhost:2332

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Accept: */*

Referer: http://localhost:2332/CORS.html

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9

If-None-Match: W/"1-NWoZK3kTsExUV00Ywo1G5jlUKKs"

上面的头信息中，Origin字段用来说名本次请求来自哪个源,服务器根据这个值,决定是否同意这次请求。

如果Origin指定的源不在允许范围之内,服务器就会返回一个正常的HTTP回应,然后浏览器发现头信息中没有包含Access-Control-Allow-Origin 字段,就知道出错啦,然后抛出错误,反之则会出现这个字段(实例如下)

Access-Control-Allow-Origin: http://api.bob.com

Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers: FooBar

Content-Type: text/html; charset=utf-8

• 
  

  Access-Control-Allow-Origin 这个字段是必须的,表示接受那些域名的请求(*为所有)

  
  


• 
  

  Access-Control-Allow-Credentials 该字段可选, 表示是否可以发送cookie

  
  


• 
  

  Access-Control-Expose-Headers 该字段可选,XHMHttpRequest对象的方法只能够拿到六种字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用该字段指定。

  
  

如果你想要连带Cookie一起发送,是需要服务端和客户端配合的

// 服务端

Access-Control-Allow-Credentials: true

// 客户端

var xhr = new XMLHttpRequest();

xhr.withCredentials = true;

// 但是如果省略withCredentials属性的设置,有的浏览器还是会发送cookie的

xhr.withCredentials = false;

非简单请求

非简单请求则是不满足上边的两种情况之一,比如请求的方式为 PUT,或者请求头包含其他的字段

非简单请求的CORS请求是会在正式通信之前进行一次预检请求

浏览器先询问服务器,当前网页所在的域名是否可以请求您的服务器,以及可以使用那些HTTP动词和头信息,只有得到正确的答复,才会进行正式的请求

// 前端代码

var url = 'http://localhost:2333/cors';

var xhr = new XMLHttpRequest();

xhr.open('PUT', url, true);

xhr.setRequestHeader('X-Custom-Header', 'value');

xhr.send();

由于上面的代码使用的是 PUT 方法,并且发送了一个自定义头信息.所以是一个非简单请求,当浏览器发现这是一个非简单请求的时候,会自动发出预检请求,看看服务器可不可以接收这种请求,下面是"预检"的 HTTP 头信息

OPTIONS /cors HTTP/1.1

Origin: localhost:2333

Access-Control-Request-Method: PUT // 表示使用的什么HTTP请求方法

Access-Control-Request-Headers: X-Custom-Header // 表示浏览器发送的自定义字段

Host: localhost:2332

Accept-Language: zh-CN,zh;q=0.9

Connection: keep-alive

User-Agent: Mozilla/5.0...

"预检"使用的请求方法是 OPTIONS , 表示这个请求使用来询问的,

预检请求后的回应，服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

预检的响应头:

HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:39 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin: http://localhost:2332 // 表示http://localhost:2332可以访问数据

Access-Control-Allow-Methods: GET, POST, PUT      

Access-Control-Allow-Headers: X-Custom-Header    

Content-Type: text/html; charset=utf-8

Content-Encoding: gzip

Content-Length: 0

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Content-Type: text/plain

如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS的头相关信息,这是浏览器就认定,服务器不允许此次访问,从而抛出错误

预检之后的请求

当预检请求通过之后发出正经的HTTP请求,还有一个就是一旦通过了预检请求就会,请求的时候就会跟简单请求,会有一个Origin头信息字段。

通过预检之后的,浏览器发出发请求

PUT /cors HTTP/1.1

Origin: http://api.bob.com // 通过预检之后的请求,会自动带上Origin字段

Host: api.alice.com

X-Custom-Header: value

Accept-Language: en-US

Connection: keep-alive

User-Agent: Mozilla/5.0...

感谢

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。

1.lazy

lazy修饰符作用是，改变输入框的值时value不会改变，当光标离开输入框时，v-model绑定的值value才会改变

<input type="text" v-model.lazy="value">

<div>{{value}}</div>



data() {

        return {

            value: '222'

        }

    }

2.trim

trim修饰符的作用类似于JavaScript中的trim()方法，作用是把v-model绑定的值的首尾空格给过滤掉。

<input type="text" v-model.trim="value">

<div>{{value}}</div>



data() {

        return {

            value: '222'

        }

    }

3.number

number修饰符的作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况

<input type="text" v-model.number="value">

<div>{{value}}</div>



data() {

        return {

            value: '222'

        }

    }

先输入数字的话，只取前面数字部分

先输入字母的话，number修饰符无效

4.stop

stop修饰符的作用是阻止冒泡

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">

    <button @click.stop="clickEvent(1)">点击</button>

</div>



methods: {

        clickEvent(num) {

            不加 stop 点击按钮输出 1 2

            加了 stop 点击按钮输出 1

            console.log(num)

        }

    }

5.capture

事件默认是由里往外冒泡，capture修饰符的作用是反过来，由外网内捕获

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">

    <button @click="clickEvent(1)">点击</button>

</div>



methods: {

        clickEvent(num) {

            不加 capture 点击按钮输出 1 2

            加了 capture 点击按钮输出 2 1

            console.log(num)

        }

    }

6.self

self修饰符作用是，只有点击事件绑定的本身才会触发事件

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">

    <button @click="clickEvent(1)">点击</button>

</div>



methods: {

        clickEvent(num) {

            不加 self 点击按钮输出 1 2

            加了 self 点击按钮输出 1 点击div才会输出 2

            console.log(num)

        }

    }

7.once

once修饰符的作用是，事件只执行一次

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">

    <button @click="clickEvent(1)">点击</button>

</div>



methods: {

        clickEvent(num) {

            不加 once 多次点击按钮输出 1

            加了 once 多次点击按钮只会输出一次 1 

            console.log(num)

        }

    }

8.prevent

prevent修饰符的作用是阻止默认事件（例如a标签的跳转）

<a href="#" @click.prevent="clickEvent(1)">点我</a>



methods: {

        clickEvent(num) {

            不加 prevent 点击a标签 先跳转然后输出 1

            加了 prevent 点击a标签 不会跳转只会输出 1

            console.log(num)

        }

    }

9.native

native修饰符是加在自定义组件的事件上，保证事件能执行

执行不了

<My-component @click="shout(3)"></My-component>



可以执行

<My-component @click.native="shout(3)"></My-component>

10.left，right，middle

这三个修饰符是鼠标的左中右按键触发的事件

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">点我</button>



methods: {

        点击中键输出1

        点击左键输出2

        点击右键输出3

        clickEvent(num) {

            console.log(num)

        }

    }

11.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

<div @scroll.passive="onScroll">...</div>

12.camel

不加camel viewBox会被识别成viewbox

<svg :viewBox="viewBox"></svg>



加了canmel viewBox才会被识别成viewBox

<svg :viewBox.camel="viewBox"></svg>

12.sync

当父组件传值进子组件，子组件想要改变这个值时，可以这么做

父组件里

<children :foo="bar" @update:foo="val => bar = val"></children>



子组件里

this.$emit('update:foo', newValue)

sync修饰符的作用就是，可以简写：

父组件里

<children :foo.sync="bar"></children>



子组件里

this.$emit('update:foo', newValue)

13.keyCode

当我们这么写事件的时候，无论按什么按钮都会触发事件

<input type="text" @keyup="shout(4)">

那么想要限制成某个按键触发怎么办？这时候keyCode修饰符就派上用场了

<input type="text" @keyup.keyCode="shout(4)">

Vue提供的keyCode：

//普通键

.enter 

.tab

.delete //(捕获“删除”和“退格”键)

.space

.esc

.up

.down

.left

.right

//系统修饰键

.ctrl

.alt

.meta

.shift

例如（具体的键码请看键码对应表）

按 ctrl 才会触发

<input type="text" @keyup.ctrl="shout(4)">



也可以鼠标事件+按键

<input type="text" @mousedown.ctrl.="shout(4)">



可以多按键触发 例如 ctrl + 67

<input type="text" @keyup.ctrl.67="shout(4)">

身为一名前端搬砖工，长久以来有两个问题困扰着我，一个是做后台项目接口返回的数据都为空，不方便做更进一步的对数据的查改及测试；另一个是做移动端的项目，比如 uniapp，每次遇到接口问题都只能 console 在 HBuilder 进行调试，苦不堪言，后来发现我司 TE 同学用 Fiddler 进行抓包测试，一问这软件还是免费的，遂进行了一番学习了解，发现可以直接解决刚刚提到的这两个问题，所以在这里做个分享。

简介

• Fiddler 是位于客户端和服务器端的 HTTP 代理


• 目前最常用的 HTTP 抓包工具之一


• 功能非常强大，是 web 调试的利器
  
  
  
  • 监控浏览器所有的 HTTP/HTTPS 流量
  
  
  • 查看、分析请求内容细节
  
  
  • 伪造客户端请求和服务器响应
  
  
  • 解密 HTTPS 的 web 会话
  
  
  • 全局、局部断点功能
  
  
  • 第三方插件
  
  
  
  


• 使用场景
  
  
  
  • 接口的测试与调试
  
  
  • 线上环境调试
  
  
  • web 性能分析
  
  
  
  

下载

直接去官网下载 Fiddler Classic 即可：

原理

学习一件新事物，最好是知其然亦知其所以然，这样遇到问题心里有底，才不容易慌，下面就介绍下 Fiddler 抓包的原理。

Fiddler 是位于客户端和服务器端之间的 HTTP 代理。一旦启动 Fiddler，其会自动将代理服务器设置成本机，默认端口为 8888，并设置成系统代理（Act as system proxy on startup）。可以在 Fiddler 通过 'Tools -> Options -> Connections' 查看， 图示如下：

在 Fiddler 运行的情况下，以 Chrome 浏览器为例，可以在其 '设置 -> 高级 -> 系统 -> 打开您计算机的代理设置 -> 连接 -> 局域网（LAN）设置' 里看到，'代理服务器' 下的 '为 LAN 使用代理服务器' 选项被勾选了（如果没有运行 Fiddler，默认情况下是不会被勾选的），如下图：