前端模块化在项目中的应用

一、前端模块化发展

首先，模块化开发的4点好处：

1. 避免变量污染，命名冲突
2. 提高代码复用率
3. 提高维护性
4. 依赖关系的管理

模块化时代之前的js模块

模块需要具备两个必要条件：

1. 必须有外部的封闭函数，该函数必须至少被调用一次。（每次调用都会创建一个新的模块实例）
2. 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有状态。

举例：

var foo = (function CoolModule() {
    var something = 'cool';
    var another = [1, 2, 3];
    function doSomething() {
        console.log(domething);
    }
    function doAnother() {
        console.log(another.join('!'));
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    }
})()
foo.doSomething() // cool
foo.doAnother() // 1!2!3

注意：

基于函数的模块中的API语义只有在运行时才会被考虑进来，所以可以在运行时修改，但如果API不存在，则无法让js引擎在编译时就抛出错误。

模块化时代的模块

• CommonJS
• ES6模块
• RequireJS(AMD)/SeaJS(CMD)

CommonJS

定义：

Node 采用 CommonJS 模块格式，根据commonJS规范，一个单独的文件是一个模块，每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非为global对象的属性。

模块加载：

加载模块用require方法，该方法读取一个文件并且执行，返回文件内部的module.exports对象。

模块输出：

模块的输出都定义在module.exports这个属性上面。

举例：

1、正常加载：

var math = require('math')	// 加载
math.add(2, 3)	// 同步的执行

2、异步加载并执行：

require.ensure([], function(require){
    var list = require('./list');
    list.show();
    var edit = require('./edit');
    edit.display();
}, 'list_and_edit');

注：第三个参数可以定义打包出来的文件名

3、预加载懒执行：

require.ensure(['./list'], function(require){	// 先加载要执行的代码
    var list = require('./list'); 	// 懒执行
    list.show();
}, 'list');

特点：写在函数中的多个模块会被打包在一起，webpack可以定义打包出来的js文件名称。

es6模块

ES6的模块化的基本规则或特点：

1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；

2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

3：模块内部的变量或者函数可以通过export导出；

4：一个模块可以导入别的模块

例：

import math from 'math'
math.add(2, 3)

注意：

import会被转化为commonjs格式或者是AMD格式，所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的，你也不用费劲再把它转成AMD了。

导出export：

export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。

1、命名式导出

export { myFunction }; // 导出一个已定义的函数
export const foo = Math.sqrt(2); // 导出一个常量
export * from 'article'; // 实现模块继承
export {name as siteName, domain};

2、默认导出

const D = 123;
export default D;
export { D as default };

export default function() {}; // 可以导出一个函数
export default class(){}; // 也可以出一个类

ES6模块与CommonJS的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

AMD和CMD

例AMD：

define(['./a', './b'], function(a, b){

})

例CMD：

define(function (require, exports, module){
    var a = require('./a')
    a.do()
    var b = require('./b')
    b.do()
})

区别：

CMD的依赖随用随取

AMD的依赖必须一开始就写好

RequireJS

特点：遵循AMD格式，但webpack无法自定义名称。

require(['math'], function (math) {
	math.add(2, 3)
})