Days29 前端模块化开发

概念

模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发的4点好处：

1 避免变量污染，命名冲突

2 提高代码复用率

3 提高维护性

4 依赖关系的管理

1.commonJS

定义模块：即一个单独的文件就是一个模块，切该文件中的作用域独立，当中的变量是无法被其他文件引用的，如果要使用需要将其定义为global；
输出模块：模块只有一个出口，即使用module.exports对象，将需要输出的内容放入到该对象中；
加载模块：通过require加载，例如：var module = require('./moduleFile.js');该module的值即对应文件内部的module.exports对象， 然后就可以通过module名称去引用模块中的变量和函数了；

// 定义模块 module.js
var data = "hello commonJS !";

function test1() {
    alert("hello test1 !");
}

function test2() {
    alert("hello test2 !");
}

// 输出模块
module.exports = {
    test1: test1,
    test2: test2
}    

// 加载模块
var module = require('./module.js');

// 使用模块功能
module.test1(); // "hello test1 !"
module.test2(); // "hello test2 !"

总共四个步骤： 定义 -> 输出 -> 加载 -> 使用

PS: commonJS是基于服务器端开发的，由于require是同步加载，所以当在浏览器中是无法运行的，所以就有了下面的异步模块的出现。

2.AMD(Asynchronous Module Definition)，异步模块定义

AMD是一套基于浏览器端模块化开发的规范，在进行页面开发时需要用到该规范的库函数，即：requireJS

requireJS解决了两个问题

多文件依赖关系处理，被依赖的需要早一步被加载；
加载js时候页面会停止渲染，如果加载的文件越多，页面失去响应的时间就会越长；

// 模块定义 module.js
define(
    ['dependModule', '...', ...], // 这个数组表示该模块所依赖的模块名称 
    function () {
        var data = "hello AMD !";
        function test1() {
            alert("hello test1 !);
        }

        function test2() {
            alert("hello test2 !);
        }


        return {
            test1: test1,
            test2: test2
        };
});


// 加载模块
require(['module'], function (myModule) {
    // 加载之后的module模块将会以参数形式：myModule传入到回调函数中，供使用
    // 这里是模块加载完成之后的回调函数
    myModule.test1(); // "hello test1 !"
    myModule.test2(); // "hello test2 !"
});

// ---------- AMD语法：
1. 模块定义：使用全局函数`define(id, dependencies, factory);`
    1. id: 用来定义模块标识，非必选参数，如果没提供该参数则会默认使用脚本文件名（不带扩展名的）；
    2. dependencies：是表示该模块所依赖的模块名称数组；
    3. factory：如果是函数则为该模块初始化所执行的函数，如果是对象则为该模块的输出值。
4. 模块加载：使用**异步的**`require(dependencies, function (myModule) {});`函数
    1. `dependencies`: 模块依赖的模块数组；
    2. 回调函数：模块加载完成后执行的函数，加载的模块将以参数形式传入该函数，即：myModule，供使用。

3.CMD(Common Module Definition)通用模块定义

就近依赖，需要时再进行加载，所以执行顺序和书写顺序一致；这点与AMD不同，AMD是在使用模块之前将依赖模块全部加载完成，但由于网络等其他因素可能导致依赖模块下载先后顺序不一致这就导致了，执行顺序可能跟书写顺序不一致的情况。

define(id, deps, factory)

因为CMD推崇一个文件一个模块，所以经常就用文件名作为模块id；
CMD推崇依赖就近，所以一般不在define的参数中写依赖，而是在factory中写。

factory有三个参数：
function(require, exports, module){}

一，require
require 是 factory 函数的第一个参数，require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口；

二，exports
exports 是一个对象，用来向外提供模块接口；

三，module
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

demo
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

AMD和CMD最大的区别是对依赖模块的执行时机处理不同

4.ES6模块化，未来标准，但目前未广泛使用

类似commonJS，语法更简洁；
类似AMD，直接支持异步加载和配置模块加载；
结构可以做静态分析，静态检测；
比commonJS更好的支持循环依赖；

命名式导出方式：每个模块可以有多个
定义式导出方式：每个模块只有一个

// myFunc.js
export default function () {
    // 这里面包含了该模块(或者说该文件myFunc.js)所有逻辑
    // 这种方式该函数不需要名字，因为前面的default关键字意思即导出时使用的模块名字和文件名一样即：myFunc
};

// main.js
import myFunc from 'myFunc';

// 导入后就可以直接使用了
myFunc();

参考博客：
https://blog.csdn.net/gccll/article/details/52785685
https://www.cnblogs.com/code-klaus/p/9011911.html