vue 的模板编译—ast(抽象语法树) 详解与实现

首先AST是什么？

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

我们可以理解为：把 template（模板）解析成一个对象，该对象是包含这个模板所以信息的一种数据，而这种数据浏览器是不支持的，为Vue后面的处理template提供基础数据。

这里我模拟Vue去实现把template解析成ast，代码已经分享到 https://github.com/zhangKunUserGit/vue-ast，具体逻辑都用文字进行了描述，请大家下载运行。

基础

（1）了解正则表达式，熟悉match，test,  exec 等等JavaScript匹配方法；

（2）了解JavaScript柯里化；

获取模板

import { compileToFunctions } from './compileToFunctions'; // Vue 对象 function Vue(options) { // 获取模板 const selected = document.querySelector(options.el); this.$mount(selected); } // mount 模板 Vue.prototype.$mount = function (el) { const html = el.outerHTML; compileToFunctions(html, {}); }; export default Vue;