最近写react须要使用nodejs做为开发环境,须要经过npm安装一些第三方的依赖库,所以慢慢感受到nodejs基础薄弱对我带来了一些不安全感,尤为是javascript模块这一块听到了不少概念,好比:AMD,CMD,异步加载… …javascript
我不禁的好奇,前端还能按需异步加载js,究竟是什么闻所未闻的高科技?AMD, CMD听起来像是主板型号,究竟是什么鬼?因此,不如一探究竟吧!html
模块的黑历史
这里推荐先阅读2个博客:前端
- 介绍了一下javascript模块化的发展历史,但不会讲每一个规范的出现缘由或者工做原理,作一个兴趣了解便可。
- 阮一峰的博客(Javascript模块化编程(二),(三)),这里浅显易懂的讲解了CommonJS,AMD,CMD为什么而生以及是如何工做的。
- 详细看看CMD和AMD的使用差别,重点关注一下AMD依赖前置和CMD依赖就近。
通过阅读后,我获得了这样几个理解,与你们分享:java
- 模块简单理解就是从某个js文件导出的若干代码,引入模块则可使用其导出的功能。
- 模块加载分为同步和异步,在服务端编程时因为模块的js文件在磁盘上,所以同步加载便可瞬间完成;而若是是浏览器中但愿加载一个js模块,那么须要经过网络请求服务器把对应的js文件下载回来,所以适合异步,也就是等下载完成后callback通知你。
- CommonJs就是nodejs遵循的规范,简单说就是同步的require对应的js文件便可。我以前写的react项目都属于这一类,经过服务端直接编译生成bundle.js将全部依赖的js模块打包到一块儿发布,所以压根没有浏览器下载依赖js的需求。
- AMD就是为了解决浏览器异步下载js文件产生的一个规范,其典型实现就是Require.js。基于Require.js编写的js模块,能够定义其依赖模块,当依赖和模块自身均加载的完成时候,将经过回调的形式异步通知。这能够避免由于下载模块与其依赖模块期间阻塞了浏览器的正常渲染。
- CMD的典型实现是seajs,它貌似是看不起AMD将依赖前置的写法(以为不太天然),因此再也不要求一次性把依赖模块列出来,而是在回调中提供require方法,用户按需reqquire依赖模块。乍一想,这样require依赖模块岂不是又成了同步加载???原来,它是经过静态分析模块代码里的require调用(正则匹配)来采集依赖的模块,本质上和AMD同样是提早异步加载的,这方面能够看一下博客:CMD的实现原理。
不要把异步加载想的很复杂,其实js文件的内容是能够经过浏览器ajax下载,而后动态建立script标签,将js内容填充进去就能够执行了。node
通通与我无关 – 我只要CommonJs
根据上述黑历史可知,nodejs采用的是CommonJs规范,而且对于react后端编译的发布模式的来讲,CMD和AMD对我意义真的不大!react
鉴于react开发常常遇到一些报错,加深对CommonJs的认识必定程度上有利于我排查第三方库的使用问题,所以我决定学一下。git
这里,我经过博客《nodejs的exports的用法》来学习nodejs模块的常见用法,3个关注重点:github
- exports是指向了module.exports,而最终require导入的是module.exports,因此像exports = xxx这种写法:仅仅是让exports脱离了对module.exports的引用,并不能实现导出的效果。
- require是按文件路径缓存的,所以屡次require返回的是同一个对象,这就给monkey patch(为现有模块打补丁)提供了可能性。
- 熟悉常见的模块导出方式,这个博客介绍了导出这些东东:命名空间,工厂方法,偏函数,构造函数,单例,全局对象。
有些东西,了解一下仍是有帮助的,因此要好好学。ajax
有些东西,了解or不了解都不会形成影响,能够选择后学或者不学。npm
重要的是知道什么对本身有真正的意义。