You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
varmyModule=(function(){var_private="i am private";functionfoo(){console.log(_private);}return{foo: foo,};})();myModule.foo();myModule._private;// undefined
我们只将模块的公用方法暴露出来,这样在模块外部无法修改我们没有暴露出来的变量、函数。
那如何引入依赖?立即执行函数(IIFE)可以这样做:
varModule=(function($){var_$body=$("body");// we can use jQuery now!varfoo=function(){console.log(_$body);// 特权方法}// Revelation Patternreturn{foo: foo}})(jQuery);Module.foo();
前面的话
为什么要说说前端模块化?我觉得理解前端模块化可以帮助我们更好的理清一个项目里的前端架构以及更好的提高自己的开发效率。
以我的见解,前端发展到现在已经可以算是比较成熟的局面了,从ajax到nodejs的出现,各种框架也层出不穷,已经出现了非常好的技术栈结构,比如 npm+webpack+es6+react/angular/vuejs,vuejs在今年也是火热,webpack这模块构建工具也是一匹黑马,感觉稳压grunt和gulp了。
当我还是个小前端的时候,写的js代码真的是惨不忍睹,最简单的js模块化仅仅只是多了个命名空间,防止全局变量命名冲突。写这篇文章,也是帮助自己更好的理解前端模块化。
我认为,前端在发展的路上有三个里程碑:一个是jquery,一个是前端模块化,另一个是组件化。
为什么需要模块化?
最简单的模块化
以往写代码都是这样的:
这样写的坏处就是污染了全局对象,很容易出现命名冲突。
再加上命名空间吧,这样就能防止命名冲突了。但是js是没有命名空间的,用对象来模拟。
这样子就减少了全局对象的变量,也能很好的解决命名冲突的问题,但是这样不安全,我们在外部可以随意修改内部成员。比如:
如何解决这个问题?可以通过js的立即执行函数来隐藏内部成员。于是:
我们只将模块的公用方法暴露出来,这样在模块外部无法修改我们没有暴露出来的变量、函数。
那如何引入依赖?立即执行函数(IIFE)可以这样做:
这就是实现js模块化的基础。
文件依赖
有了封装,还是不够的。比如我们的项目结构有可能是这样:
这就造成了一些问题,依赖关系模糊,我们需要手动解析模块和库的依赖项,在特别大的项目里,会越来越难以管理。并且,这样也会造成请求过多。因此,我们需要依赖管理和按需加载。
CommonJS
CommonJS是一种规范,它是由NodeJS发扬光大的,第一个流行的模块化规范是由服务器端的JavaScript应用带来的。
模块的定义和引用
这就是模块的定义以及引用的简单例子,我们可以发现
require
是同步的,也就是阻塞的。同步加载对于服务器不是问题,但是浏览器由于网速个方面原因的限制,它是异步加载的。因此CommonJS不适用于浏览器端。后来就出现了AMD
以及CMD
规范。AMD和CMD
AMD
AMD 即
Asynchronous Module Definition
,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范,实际上,AMD 是RequireJS
在推广过程中对模块定义的规范化的产出。一个简单的应用
Requirejs
的例子:require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
CMD
CMD 即
Common Module Definition
通用模块定义,CMD规范是国内发展出来的,CMD是 SeaJS 对模块定义的规范化产出,SeaJS要解决的问题和requireJS
一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同。一个简单的应用
Seajs
的例子:AMD和CMD的区别
两者最明显的区别就是在模块定义对依赖的处理不同
两者都是异步加载模块,只是对依赖模块的执行时机处理不同。
在最后
其实,这不是最后,Javascript模块化还没完。
Browserify
和Webpack
让Commonjs规范在浏览器实现,ES6的到来也有自己实现的Module
,由于本人也在学习的过程,这里就先不表述。最后,因为本人能力有限,有什么表述错误都欢迎指正!thanx:)
参考资料
The text was updated successfully, but these errors were encountered: