模块化

模块化总结

最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。

模块化的优点

1. 可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。维护一个独立的模块比起一团凌乱的代码来说要轻松很多。

2. 命名空间：在JavaScript中，最高级别的函数外定义的变量都是全局变量（这意味着所有人都可以访问到它们）。也正因如此，当一些无关的代码碰巧使用到同名变量的时候，我们就会遇到“命名空间污染”的问题。

模块化规范

现在比较流行的模块化规范主要有commomJS,AMD, CMD ,ES6 ，现在逐一说明一下.

commonJS

commonJS 是服务器端的模块化规范，node.js就是参照commonJS规范实现的。commonJS中有一个全局的方法require() 用来加载模块。

function myModule(){
    this.hello = function(){
        return "hello";
    }
    this.goodbye = function(){
        return "gooodbye!";
    }
}
module.exports = myModile;

其实module变量代表当前模块.

这样就可以在其他模块中使用这个模块

var myModule = require('myModule');

var myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodbye();

关于commonJS的更多，见CommonJS规范

---

AMD

commonJS 定义模块的方式和引入模块的方式还是比较简单的，但不适合浏览器端，因为commonJS是同步加载的。而AMD是异步加载的，下面我们来说说AMD的书写规范。

通过define()来定义模块

//main.js
define(['mylib'],function(mylib){
    function foo(){
        mylib.doSomething();
    }
    return {
        foo:foo;
    }
})

define的第一个参数是依赖的模块，必须是一个数组。通过return来暴露接口。

通过require()来加载模块，模块的名字默认为模块加载器请求的指定脚本的名字。

require(['main'],function(main){
    alert(main.foo());
})

require.js就是根据AMD规范实现的，优点为：

1. 实现js文件的异步加载，避免网页失去响应；

2. 管理模块之间的依赖性，便于代码的编写和维护。

---

CMD

CMD是国内玉伯大神在开发SeaJS的时候提出来的，也是异步模块定义。
CMD和AMD的区别:
CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入回调函数中。

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

 // AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
}) 

关于 require.js 和 sea.js 的区别详见SeaJS与RequireJS最大的区别

---

ES6

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能：export和import

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

// a.js 

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  

// b.js
//通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

---

各种模块化方案优缺点对比：

模块化方案	优点	缺点
commonJS	复用性强 ，使用简单 ，实现简单 有不少可以拿来即用的模块，生态不错	同步加载不适合浏览器 浏览器的请求都是异步加载 不能并行加载多个模块。
AMD	异步加载适合浏览器 可并行加载多个模块	模块定义方式不优雅，不符合标准模块化
ES6	可静态分析，提前编译 面向未来的标准	浏览器原生兼容性差，所以一般都编译成ES5 目前可以拿来即用的模块少，生态差

对比学习，效果更好哦~~~