Javascript模块化编程——读书笔记
昨天参与了公司的一个内部系统的页面修改,一个html页面居然有4000多行代码——所有的css、js都写在里面。费了好大的劲,才完成需求,这里首先感谢sublime的标记功能,帮助我在页面里面快速定位代码(ctrl+F2添加、删除标记,F2切换标记)。
这个页面当然不是前端写的,前端遇到这么大量的代码,至少就应该考虑css、js代码分别写在.css和.js的文件中,再引入到页面,实现结构、样式、操作的分离。
改完之后,我读了一下阮一峰的js模块化编程的文章。心得如下:
1. 模块化最初是为了避免全局变量的污染,想想几千行的js代码如果没有模块化,会增加多少全局变量?进行原型链查找的时候增加多少开销?
2. node.js将javascript语言用于服务器端编程。
3. 浏览器下,网页程序的复杂性有限,没有模块化也不是特别大的问题,但服务器端一定得有模块。
4. 通行的JavaScript模块规范主要有两种:CommonJS 、AMD。
commonjs是用在服务器端的,同步的,如node.js的模块系统是参照CommonJS规范实现的;
amd是用在浏览器端的,异步的,如requirejs;
国内玉龙大神在commonjs和amd基础上提出了cmd,但这只是个国内规范,国外用的人少。
相关链接:http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
上面的链接中提到:
So CommonJS and AMD are JavaScript module definition APIs that have different implementations, but both come from the same origins.
AMD is more suited for the browser, because it supports asynchronous loading of module dependencies.
RequireJS is an implementation of AMD, while at the same time trying to keep the spirit of CommonJS (mainly in the module identifiers).
5. AMD的产生背景是有了服务器端模块以后,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。但服务器端所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。对于浏览器,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于”假死”状态。
6. AMD:”Asynchronous Module Definition”,“异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。
7. AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:require([module], callback);第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。