什么是js模块化？js模块化并不是一开始就存在的概念，而是对着工程的要求越来越高，对于js模块开发的需求便显现出来了。因此就出现了关于js模块开发。下面我们就来看一下关于JavaScript模块化实例。
模块化发展历程
js一开始并没有模块化的概念，直到ajax被提出，前端能够像后端请求数据，前端逻辑越来越复杂，就出现了许多问题：全局变量，函数名冲突，依赖关系不好处理。
当时使用子执行函数来解决这些问题，比如经典的jquery就使用了匿名自执行函数封装代码，将他们全都挂载到全局变量jquery下边。
CommonJs
CommonJs通过nodeJs发扬光大，每个js文件就是一个模块，每个模块有单独的作用域。模块以module.exports为出口，输出一个对象。使用require方法读取文件，并返回其内部的module.exports对象。
CommonJs的问题在于，他的加载是同步的，这在服务端很正常，但是在充满了异步的浏览器里，就不适用了。为了适应浏览器，社区内部发生了分歧。
AMD
AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范，由于不是JavaScript原生支持，AMD的作者亲自实现了符合AMD规范的RequireJS。
AMD规范规定用全局函数define来定义模块，用法为define(id, dependencies, factory);其中，id为模块标识，dependencies是一个数组，数组里边是该模块依赖的其他模块，factory则是一个匿名函数，里边是该模块的逻辑。
目前公司使用的就是AMD规范。
例如：
//main.jsrequire(['a', 'b'], function(a, b){
console.log('main.js执行');
a.hello();
$('#b').click(function(){
b.hello();
});
})requireJs的问题在于，加在一个模块时，会预先加载该模块的所有依赖模块，但是这些依赖很可能一开始并不用到。同时依赖写起来一长串，也很麻烦。比较好的是AMD保留了commonJs中的require、exprots、module3个功能，可以不把以来都写在dependencies中，而是在需要时使用require引入。
CMD
既然requirejs有上述种种不甚优雅的地方，所以必然会有新东西来完善它，这就是后起之秀seajs，seajs的作者是国内大牛淘宝前端步道者玉伯。seajs全面拥抱Modules/Wrappings规范，不用requirejs那样回调的方式来编写模块。而它也不是完全按照Modules/Wrappings规范，seajs并没有使用declare来定义模块，而是使用和requirejs一样的define，或许作者本人更喜欢这个名字吧。（然而这或多或少又会给人们造成理解上的混淆），用seajs定义模块的写法如下：
//main.jsdefine(function(require, exports, module){
console.log('main.js执行'); var a = require('a');
a.hello();
$('#b').click(function(){
var b = require('b');
b.hello();
});
});定义模块时无需罗列依赖数组，在factory函数中需传入形参require,exports,module，然后它会调用factory函数的toString方法，对函数的内容进行正则匹配，通过匹配到的require语句来分析依赖，这样就真正实现了commonjs风格的代码。
AMD与CMD的区别
AMD和CMD最明显的区别就是在模块定义时对依赖的处理不同
AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require
这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法
由于精力有限，程序更新比较慢，请大家谅解，再次感谢支持taycms的朋友们，虽然比较慢，我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出，或者直接给我QQ留言。 2.0会有很多新功能，请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS ， 不会再有错误提示2.增加资料下载模块3.更换默认模版，使程序功能和页面结构更清晰，方便参考制作模版4.修复留
面向未来的ES6模块标准
ES6考虑了模块化，使用import和export，但是目前浏览器还不支持，这个标准也只是个雏形。
相关推荐：
