No-Func-Assign 分別用 Eslint 插件和 Babel 插件來(lái)實(shí)現(xiàn)
Eslint 有很多內(nèi)置的 rule，其中有一個(gè) rule 叫 no-func-assign，是指不能給函數(shù)賦值，目的是避免函數(shù)被重新賦值導(dǎo)致調(diào)用時(shí)出錯(cuò)。
這個(gè) rule 的實(shí)現(xiàn)有兩種思路，我們分別用 Babel 插件和 Eslint 插件來(lái)實(shí)現(xiàn)一遍。
思路分析
目標(biāo)是檢查出對(duì)聲明的函數(shù)的重新賦值，有兩種思路：
第一種思路是找到作用域中所有的函數(shù)聲明，分析引用它的地方，如果是賦值語(yǔ)句，就報(bào)錯(cuò)。
第二種思路是反過(guò)來(lái)，找到所有賦值語(yǔ)句，如果左邊的變量在作用域中的聲明是一個(gè)函數(shù)，就報(bào)錯(cuò)。
Eslint 的這個(gè) rule 的源碼是用第一種思路實(shí)現(xiàn)的，我們用 Babel 插件實(shí)現(xiàn)下第二種思路。
Babel 插件實(shí)現(xiàn) lint
按照第二種思路來(lái)實(shí)現(xiàn)，要先找到所有的賦值語(yǔ)句：
- const noFuncAssignLint = (api, options) => {
- return {
- visitor: {
- AssignmentExpression(path, state) {
- }
- }
- }
- };
- module.exports = noFuncAssignLint;
然后使用 path.scope 的作用域相關(guān) api 來(lái)找到左邊部分在作用域中的聲明，也就是 binding，之后判斷下聲明的類型是否是一個(gè)函數(shù)，如果是，就報(bào)錯(cuò)。
- const noFuncAssignLint = (api, options) => {
- return {
- visitor: {
- AssignmentExpression(path, state) {
- const assignTarget = path.get('left').toString();
- const binding = path.scope.getBinding(assignTarget);
- if (binding) {
- if (binding.path.isFunctionDeclaration() || binding.path.isFunctionExpression()) {
- // 報(bào)錯(cuò) ..
- }
- }
- }
- }
- }
- };
- module.exports = noFuncAssignLint;
Babel 插件可以聲明處理的 AST 類型的 visitor，在遍歷的時(shí)候會(huì)被調(diào)用，其中可以對(duì) AST 做分析和轉(zhuǎn)換。提供了 path 的 api 用于 AST 的增刪改，path.scope 的 api 用于作用域分析。基于 path 和 path.scope 的 api 就可以完成各種分析和轉(zhuǎn)換功能。
Eslint 插件實(shí)現(xiàn) lint
這個(gè) rule 本來(lái)就是 eslint 實(shí)現(xiàn)的，它是基于第一種思路。也就是找到所有的函數(shù)聲明，然后分析引用，如果是賦值就報(bào)錯(cuò)。
eslint 的 rule 包括兩部分：
- meta 部分是原信息，包括文檔、報(bào)錯(cuò)信息等
- create 部分是 lint 功能的實(shí)現(xiàn)
- module.exports = {
- meta: {
- type: "problem",
- docs: {
- description: "disallow reassigning `function` declarations",
- recommended: true,
- url: "https://eslint.org/docs/rules/no-func-assign"
- },
- schema: [],
- messages: {
- isAFunction: "'{{name}}' is a function."
- }
- },
- create(context) {
- function checkForFunction(node) {}
- return {
- FunctionDeclaration: checkForFunction,
- FunctionExpression: checkForFunction
- };
- }
- };
我們聲明對(duì)函數(shù)聲明 FunctionDeclaration 和函數(shù)表達(dá)式 FunctionExpression 的處理，也就是通過(guò) context 的 api 拿到作用域中的聲明，然后判斷引用，如果引用是賦值語(yǔ)句，就報(bào)錯(cuò)。
- function checkForFunction(node) {
- context.getDeclapanredVariables(node).forEach(checkVariable);
- }
- function checkVariable(variable) {
- if (variable.defs[0].type === "FunctionName") {
- checkReference(variable.references);
- }
- }
- function checkReference(references) {
- // 如果是賦值語(yǔ)句這種
- astUtils.getModifyingReferences(references).forEach(reference => {
- context.report({
- node: reference.identifier,
- messageId: "isAFunction",
- data: {
- name: reference.identifier.name
- }
- });
- });
- }
Eslint 插件可以聲明處理的 AST 類型的 listener，在遍歷的時(shí)候會(huì)被調(diào)用， 可以對(duì) AST 進(jìn)行各種分析，然后報(bào)錯(cuò)。提供了 context 的 api 用于分析 ast，比如作用域分析，還提供了 context.report 用于報(bào)錯(cuò)。
Babel 插件和 Eslint 插件的區(qū)別
Babel 和 Eslint 都會(huì)把源碼 parse 成 AST，然后遍歷 AST 進(jìn)行處理。
Babel 中 AST 的處理函數(shù)叫 visitor，可以用于分析和修改 AST，Eslint 中叫 listenter，因?yàn)橹荒芊治? AST，不能修改。
Babel 插件提供了 path 的 api，用于增刪改 AST，path.scope 的 api 用于分析作用域，包括聲明和引用。Eslint 插件提供了 context 的 api，用于分析作用域等。
Eslint 的 AST 中包含了 token 的信息，可以做格式的檢查，比如空格、換行這種，而 Babel 的 AST 中沒(méi)有，所以格式檢查只能用 Eslint 實(shí)現(xiàn)。
Eslint 插件支持 fix 來(lái)修改代碼，但它不是通過(guò)修改 AST 實(shí)現(xiàn)的，而是指定某段 range 如何做修改，通過(guò)字符串替換實(shí)現(xiàn)的。
總結(jié)
我們圍繞著 no-func-assign 這個(gè) Eslint 內(nèi)置的 rule，分析了兩種思路，分別用 Babel 插件和 Eslint 插件做了實(shí)現(xiàn)。其實(shí)主要是作用域的分析，這個(gè)功能在 Eslint 插件和 Babel 插件中都支持。
Eslint 和 Babel 插件的功能都是基于 AST，只不過(guò) Babel 是做 AST 的分析和轉(zhuǎn)換，而 Eslint 只做 AST 分析(包括格式的檢查)。
要注意的是，Eslint 的fix 功能不是修改 AST 實(shí)現(xiàn)的，而是簡(jiǎn)單的字符串替換。
Eslint 插件、Babel 插件等都是基于 AST 實(shí)現(xiàn)的，它們有很多同質(zhì)化的部分，可以對(duì)比著來(lái)學(xué)習(xí)。
