模块化

模块化

在模块中实现特定业务逻辑或特定功能。模块类似于JAVA的包进行导入导出，即插即用。

AMD——Require.js

异步模块化定义（Asynchronous Module Definition）
主要实现为RequireJS
前置依赖、提前执行、异步定义

• 解决依赖问题
• 解决JS脚本单线程等待的问题

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

1. 定义模块define，

• define(id?,dependencies,factory)
• 参数含义：模块ID、模块依赖和模块初始化的函数。

2. 加载模块require

• require(dependencies,factory())
• 参数意义：模块加载依赖与模块执行后的回调函数。
• require是异步执行，使用回调函数可解决JS脚本等待以及依赖的问题。

CMD——Sea.js

通用模块定义（Common Module Definition）
就近依赖，按需执行、异步定义
一个文件一个模块

1. AMD VS CMD

• AMD，在define定义模块之后，立即执行模块。遇到require将模块加载。
• CMD，define定义模块后，按需加载模块。
• AMD体验性好、CMD性能好。

commonJS——Node.js/Webpack

1. 特点

• 模块在独立作用域中，不污染全局。
• 模块可多次加载，只在首次执行并缓存。
• 模块加载顺序是按照代码执行顺序。

2. module

• module.exports
module.exports文件对外的接口，外部文件通过该变量读取模块内容。
• exports
  实际上var exports = moudle.exports
  可以为其添加方法，但不能为其赋值，否则将会切断exports和module.exports的值。

3. require
require用于加载命令，读入执行JS文件，并找到module.exports接口。
4. 模块加载的机制
   模块加载的是值的拷贝而非引用、加载多次也不会对模块内部产生影响。

ES6的模块化

1. module和import
2. ES6模块化加载的是值的引用而非拷贝。

练习 对比ES6模块化和commonJS

• ES6加载的为引用的拷贝而comonJS则是值的拷贝
• ES6对外是静态定义不是对象，在编译阶段就会解析代码。commonJS对外暴露对象，脚本运行才会执行。
• ES6默认采取严格模式，commonJS默认非严格模式