模块化总结

近来从新温习的模块化的相干学问，总结一下，仅供本身明白和人人参考。

模块化的长处

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

种种模块化计划优瑕玷对照：

对照进修，结果更好哦~~~