理解使用 abstract syntax tree

baixiaoji commented 5 years ago

这是什么东西？（明白该想project的定义）

为什么要做这个东西？（想想做这个东西的动机）

如何做这个东西？（拆解细节）

回顾（项目过程中的执行、以及心态的变化）

超有意思 https://astexplorer.net/ http://jartto.wang/2018/11/17/about-ast/ https://www.sitepoint.com/understanding-asts-building-babel-plugin/ https://resources.jointjs.com/demos/javascript-ast http://json-schema.org/learn/getting-started-step-by-step.html

baixiaoji commented 5 years ago

工具查看对应的脚本在不同设备或是浏览器上解析和执行时间 Instrument your JavaScript to measure parse & execution time on any device or browser https://github.com/danielmendel/DeviceTiming

baixiaoji commented 5 years ago

// eslint  no-console
// v1  只要是console去除
module.exports = {
  meta: {
    docs: {
      description: 'Disallow use of console',
      category: 'Best Practices',
      recommended: true,
    },
  },
  create(context) {
    const isNotAllowMethod = ['info', 'warn', 'log']
    return {
      MemberExpression(node) {
        if (node.object.name !== 'console') {
          return
        }

        context.report({
          node,
          message: 'Using console is not allowed',
        })
      },
    }
  },
}
// v2  添加了限制条件
module.exports = {
  meta: {
    docs: {
      description: "Disallow use of console",
      category: "Best Practices",
      recommended: true
    }
  },
  // you're going to need context :)
  // eslint-disable-next-line no-unused-vars
  create(context) {
    const disAllowMethod = ["info", "warn", "log"];
    return {
      MemberExpression(node) {
        if (node.object.name !== "console" || 
           !disAllowMethod.includes(node.property.name)
       ) {
          return;
        }

          context.report({
            node,
            message: "Using console is not allowed"
          });
      }
    };
  }
};

// v3  添加了对应的允许条件
// eslint exercise 2 (no-console)
// When you're finished with this exercise, run
//   "npm start exercise.eslint.3"
//   to move on to the next exercise

const disallowedMethods = ['log', 'info', 'warn', 'error', 'dir']

module.exports = {
  meta: {
    docs: {
      description: 'Disallow use of console',
      category: 'Best Practices',
      recommended: true,
    },
    schema: [
      {
        type: 'object',
        properties: {
          allowedMethods: {
            type: 'array',
            items: {
              enum: ['log', 'info', 'warn', 'error', 'dir'],
            },
// http://json-schema.org/latest/json-schema-validation.html#rfc.section.6.4.4
            minItems: 1,
            uniquneItems: true,
          },
        },
      },
    ],
  },
  // you're going to need context :)
  // eslint-disable-next-line no-unused-vars
  create(context) {
    return {
      MemberExpression(node) {     
        const options = context.options || {}
        const {allowedMethods = []} = options[0] || []

        if (node.object.name !== 'console') {
          return
        }

        if (allowedMethods.includes(node.property.name) || !disallowedMethods.includes(node.property.name)) {
          return
        }

        context.report({
          node,
          message: 'Using console is not allowed',
        })
      },
    }
  },
}
// v4 出现 var abc = console; abc.log();
const disallowedMethods = ['log', 'info', 'warn', 'error', 'dir']

module.exports = {
  meta: {
    docs: {
      description: 'Disallow use of console',
      category: 'Best Practices',
      recommended: true,
    },
    schema: [
      {
        type: 'object',
        properties: {
          allowedMethods: {
            type: 'array',
            items: {
              enum: ['log', 'info', 'warn', 'error', 'dir'],
            },
            minItems: 1,
            uniqueItems: true,
          },
        },
      },
    ],
  },
  create(context) {
    const variableArr = []
    const notConsoleMemberArr = []
    const options = context.options || {}
    const {allowedMethods = []} = options[0] || []
    return {
      'Program:exit'() {
        notConsoleMemberArr.forEach(node => {
          if (
            variableArr.some(variable => variable.id.name === node.object.name)
          ) {
            context.report({
              node,
              message: 'Using console is not allowed',
            })
          }
        })
      },
      MemberExpression(node) {
        if (node.object.name !== 'console') {
          notConsoleMemberArr.push(node)
          return
        }
        if (
          allowedMethods.includes(node.property.name) ||
          !disallowedMethods.includes(node.property.name)
        ) {
          return
        }

        context.report({
          node,
          message: 'Using console is not allowed',
        })
      },
      VariableDeclarator(node) {
        if (node.init.name === 'console') {
          variableArr.push(node)
        }
      },
    }
  },
}

baixiaoji commented 5 years ago

需读 1.https://segmentfault.com/a/1190000014684778

文章都不错，大致讲述了AST是如何出现的，以及整个Compiler的思路性的东西

baixiaoji commented 5 years ago

declaration vs declarators https://stackoverflow.com/questions/13808932/what-are-declarations-and-declarators-and-how-are-their-types-interpreted-by-the

baixiaoji commented 5 years ago

对应estree 转化为AST对应的语法 https://github.com/estree/estree/blob/master/es5.md

baixiaoji commented 5 years ago

AST v.s CST.

This is exactly the distinguishing factor between an AST and a CST. We know that an abstract syntax tree ignores a significant amount of the syntactic information that a parse tree contains, and skips “extra content” that is used in parsing. But now we can see exactly how that happens!

文章讲述了为什么需要AST，CST（parse tree）出现了节点的冗余，并且不能直观的帮助我们去理解整个代码树，去掉冗余节点，最后便是AST

So the AST is one of the stages towards creating compiled code. Definitely feels like we are getting closer to what the machine understands!

文章 AST和CST syntax Analysis parse 同时生成。

baixiaoji commented 5 years ago

《编译原理》P43

baixiaoji / supplier