1. 模块化

1.1 什么是模块化

  • 将一个复杂的程序依据一定的规则封装成几个块，并进行组合在一起
  • 块的内部数据与实现是私有的，只向外部暴露一些接口（方法）与外部其他模块通信

1.2 模块化的进行过程

  • 全局function模式：将不同的功能封装成不同的全局函数
    编码：将不同的功能封装成不同的全局函数
    问题：污染全局命名空间，容易引起命名冲突或数据不安全，模块之间看不出关系
  • namespace模式：简单对象封装
    作用：减少全局变量，解决命名冲突
    问题：数据不安全
  • IIFE模式：匿名函数自调用（闭包）
    作用：数据是私有的，外部只能通过暴露的方法操作
    编码：将数据和行为封装到一个函数内部，通过给window添加属性来向外暴露接口
    问题：如果当前这个模块依赖另一个模块怎么办？
  • IIFE模式增强：引入依赖

1.3 模块化的好处

  • 避免命名冲突
  • 更好的分离，按需加载
  • 更高复用性
  • 高可维护性

1.4 引入多个script后出现问题

  • 请求过多
  • 依赖模糊
  • 难以维护

2. AST

2.1 什么是AST

抽象语法树，源代码的抽象语法结构的树状表现形式。

2.2 词法分析和语法分析

JS是解释型语言，通过词法分析->语法分析->语法书，执行。
词法分析：扫描，将字符流转换为记号流(token)，读取代码按照一定的规则合成一个个的标识。
语法分析：解析器，将词法分析出来的数组转换成树的形式，验证语法。有错则报错。

2.3 AST过程

  • 语法检查、代码风格检查、格式化代码、语法高亮、错误提示、自动补全等
  • 代码混淆压缩
  • 优化变更代码，改变代码结构等

3. babel工作原理

解决了ES6兼容问题，把ES6代码转换为ES5代码，用了AST。
配置presets,plugins使用插件
访问者模式，访问某一个路径的时候进行匹配，然后在节点修改
引入babel插件，使用babel对代码进行转换，过程会改变AST语法树，然后生成新代码

3.1 babylon

babel使用的引擎是Babylon