前端模块化_安科网

前端模块化解决什么问题？

有了模块，我就可以很方便的使用别人的代码，想要什么功能，就用加载什么模块。但是，这样做需要有一个前提，那就是大家必须以同样的方式编写模块，否则就乱套了。所以组内需要有一套统一的模块规范。

如何实现模块？

1、对象字面量的变体

2、JS设计模式的模块模式

3、采用成熟的库文件。前两种方式各模块的脚本被串在一起注入到DOM中，整个体系架构在这种模式下，可能会命名冲突。要简洁地管理依赖关系，不通过一些手工处理或借助第三方库往往是不可能的。

先理清一些概念：

服务器端模块：在服务器端运行的模块，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。

浏览器端模块：对于浏览器加载模块，模块原先都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这也是AMD规范诞生的背景。

目前流行的模块规范：

1、CommonJS规范：服务器端模块的规范，Node.js（Node Modules）采用了这个规范。Module 1.0已被Module1.1取代。主要包含模块标准和程序包标准。

2、CMD规范：浏览器端模块的规范，遵循Modules/Wrappings规范，贴近 CommonJS Modules/1.1 和 Node Modules 规范。代码比较容易向Node迁移。

3、AMD规范：浏览器端模块的规范。

4、ECMAScript6/Harmony 模块规范：JS标准草案。包括可在服务器端和浏览器端使用的Module，一个Module loader，和其他。虽然可以在某种程度上可以尝试一下这样的特性，但是要记住可能用 Harmony 来规划你的系统可能并不是个好主意（只是说目前还不是）。规范发生变化以及潜在的在跨浏览器层面的问题都会带来风险（比如 IE9 可能会要过较长的时间才会消亡），所以在标准最终确定及其覆盖率不成问题之前，你最好还是把注下在 AMD（用于浏览器内运行的模块）与 CommonJS（用于服务器）身上。

流行的浏览器脚本加载器：

1、requireJS：遵循AMD规范，既支持浏览器模块，又支持服务器端模块。异步加载，提前加载。

2、seaJS：遵循CMD规范，支持浏览器模块。异步加载，执行时加载。

技术选型选择SeaJS，关于SeaJS的资料：

seaJS组件库，http://panxuepeng.github.io/seajslib/

参考资料：

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

http://javascript.ruanyifeng.com/nodejs/commonjs.html

http://nodejs.org/api/modules.html

http://www.commonjs.org/specs/

http://justineo.github.io/singles/writing-modular-js/

前端模块化

相关推荐