本文共 4291 字，大约阅读时间需要 14 分钟。
Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了，随着前端发展对
模块需求越来越大，模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现，再到ES6发布，目前已经可以很方便的在Javascript中使用"类"和"模块"了。1、原始写法
function m1(){ //... } function m2(){ //... } 缺点 ：
"污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。2、对象写法
为了解决上面缺点，把模块写成一个对象，所有的模块成员都放到这个对象里面var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... } }); 使用
module1.m1();
存在缺点：
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。module1._count = 5;
3、立即执行函数写法
立即执行函数（IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })(); 上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
4、放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块 var module1 = (function (mod){ mod.m3 = function () { //... }; return mod; })(module1); 上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
5、宽放大模式
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。var module1 = ( function (mod){ //... return mod; })(window.module1 || {}); 与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
6、输入全局变量
独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块var module1 = (function ($, YAHOO) { //... })(jQuery, YAHOO); 上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1
好处：这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显谈到AMD和CMD，不得不说下CommonJS。2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程，
由于浏览器端网页还比较简单 ，对于模块不是特别依赖，但在服务器端因为要与操作系统和其他应用程序互动，CommonJS就在这样的背景下诞生了。引入第三方模块并调用方法
var math = require('math');math.add(2,3); // 5 这里有一个CommonJS模块使用的例子
//模块定义 myModule.jsvar name = 'Byron';function printName(){ console.log(name);}function printFullName(firstName){ console.log(firstName + name);}module.exports = { printName: printName, printFullName: printFullName}//加载模块var myModule = require('./myModule.js');myModule.printName(); 1、AMD规范
想象一下如果把这段代码放到浏览器端 ，math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等
var math = require('math'); math.add(2, 3); 这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数
require([module], callback);
上面代码改写成AMD形式就是这样
require(['math'], function (math) { math.add(2, 3); }); 目前实现AMD规范的有RequireJS和curl.js
RequireJS模块例子:
// 定义模块 myModule.jsdefine('myModule', ['dependency'], function(){ var name = 'Byron'; function printName(){ console.log(name); } return { printName: printName };});// 加载模块require(['myModule'], function (my){ my.printName();}); 2、CMD规范
CMD: Common Module Definition通用模块定义, 由国内发展出来, SeaJS是其典型代表, 即SeaJS是通过浏览器对CMD的具体实现SeaJS模块例子:
// 定义模块 myModule.jsdefine(function(require, exports, module) { var $ = require('jquery.js'); var foo = require('foo'); var out = foo.bar(); $('div').addClass('active'); module.exports = out;});// 加载模块seajs.use(['myModule.js'], function(my){}); 3、CommonJS、AMD和CMD区别
ES6在语言标准的层面上, 实现了模块功能, 而且实现得相当简单, 完全可以取代CommonJS和AMD规范, 是浏览器和服务器通用的模块解决方案
ES6模块例子:
//模块定义 myModule.jsconst name = 'Byron';function printName(){ console.log(name);}function printFullName(firstName){ console.log(firstName + name);}const myModule = { printName: printName, printFullName: printFullName};export myModule;//加载模块import myModule, { printFullName } from './myModule.js';myModule.printName();printFullName('Michael'); 说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。
1、seajs / require :
是一种在线"编译"模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。2、browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
转载地址：http://zqiuz.baihongyu.com/