计算机前端模块化复习

干货满满！计算机前端模块化的复习路线知识树来啦！下图内容完整，结构清晰，逻辑严密，包括ES6、AMD、CommonJS等重要知识点。屏幕前的你，赶快收藏学起来吧！

复习路线(知识树)

• 模块化
  • CommonJS
    • 原理
      • 每一个node.js执行文件，都自动创建一个module对象，同时，module对象会创建一个叫exports的属性，初始化的值是 {}
    • 注意
      • exports是引用 module.exports的值。module.exports 被改变的时候，exports不会被改变，而模块导出的时候，真正导出的执行是module.exports，而不是exports
  • require.js（AMD）
    • 使用方法
      • 引入模块也可以只写require()
      • require.config是用来定义别名的，在paths属性下配置别名， 然后，通过requirejs([参数一,模块名]，参数二(变量,代替一的模块名))；
        • 参数一是数组，传入我们需要引用的模块名，
        • require([module], callback);加载一系列模块。 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ 　　　　// some code here 　　});
        • 第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。
    • 注意
      • 1.requirejs通过define()定义模块，在此模块内的方法和变量外部是无法访问的，只有通过return返回才行。 2.define 定义模块方法只能用在独立的js文件中，不能在页面中直接使用。 3.没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征4.require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
  • AMD/CMD
    • AMD是RequireJS 的规范
      • define(id, [depends], callback);定义并暴露一个模块。
      • 优点
        • 1、适合在浏览器环境中异步加载模块
        • 2、可以并行加载多个模块
    • CMD 是SeaJS 的规范化（在CommomJS和AMD基础上提出）
      • 优点
        • 1、依赖就近，延迟执行
        • 2、可以很容易在服务器中运行
    • 区别
      • 1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。（SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行）
      • 2、AMD推崇依赖前置，指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题；CMD推崇依赖就近，只有在用到某个模块的时候再去require。
      • 3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一
      • 4.AMD比较适合浏览器环境，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous，CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的
      • 5.requireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 而SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析, 这里耗费了时间
    • AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
  • ES6
    • export导出
    • import引入
• 异步
  • promise/await
• vue
  • vue的双向绑定原理
• webpack
• http
• node
• ts
• ES6