随着js技术的不断发展,途中会遇到各种问题,比如模块化。
那什么是模块化呢,他们的目的是什么?
定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力、输出的值
依赖引用:如何引用其它代码单元
到目前为止,大概分为以下几个里程碑式节点。
原始的开发方式 ---> CommonJS ---> AMD ---> CMD ---> UMD ---> ES6Module 原始的开发方式最开始的时候,JS自身是没有模块机制的。项目有多个js文件。
// a.js function foo() {} // b.js function bar() {} // c.js foo()HTML加载
<script src="http://www.likecs.com/a.js"></script> <script src="http://www.likecs.com/b.js"></script> <script src="http://www.likecs.com/c.js"></script>原始的开发方式,随着项目的复杂度,代码量越来越多,所需要加载的文件也越来越多,这个时候,就要考虑几个问题了:
命名问题:所有文件的方法都是挂载到global上,会污染全局环境,并且需要考虑命名冲突问题。
依赖问题:script是顺序加载的,如果各文件之间有依赖,那我们得考虑加载.js文件的书写顺序。
网络问题。如果文件过多,所需请求次数会增多,增加加载时间。
CommonJS && node.jsCommonJS规范 CommonJS使用例子
CommonJS规范,主要运行于服务器端,同步加载模块,而加载的文件资源大多数在本地服务器,所以执行速度或时间没问题。Node.js很好的实现了该规范。
该规范指出,一个单独的文件就是一个模块。
模块功能主要的几个命令:require和module.exports。require命令用于输入其他模块提供的功能,module.exports命令用于规范模块的对外接口,输出的是一个值的拷贝,输出之后就不能改变了,会缓存起来。
通过例子,我们可以看出require(moduleId)来加载其他模块的内容,其返回值就是其引用的外部模块所暴露的API,之后再通过module.exports或者exports来为当前模块的方法和变量提供输出接口。
最后通过node来执行模块。
AMD && Require.jsAMD规范文档 AMD使用例子
AMD(Asynchronous Module Definition - 异步加载模块定义)规范,制定了定义模块的规则,一个单独的文件就是一个模块,模块和模块的依赖可以被异步加载。主要运行于浏览器端,这和浏览器的异步加载模块的环境刚好适应,它不会影响后面语句的运行。该规范是在RequireJs的推广过程中逐渐完善的。
模块功能主要的几个命令:define、require、return和define.amd。define是全局函数,用来定义模块,define(id?, dependencies?, factory)。require命令用于输入其他模块提供的功能,return命令用于规范模块的对外接口,define.amd属性是一个对象,此属性的存在来表明函数遵循AMD规范。
// moduleA.js define(['jQuery','lodash'], function($, _) { var name = 'weiqinl', function foo() {} return { name, foo } }) // index.js require(['moduleA'], function(a) { a.name === 'weiqinl' // true a.foo() // 执行A模块中的foo函数 // do sth... }) // index.html <script src="http://www.likecs.com/js/require.js" data-main="js/index"></script>在这里,我们使用define来定义模块,return来输出接口, require来加载模块,这是AMD官方推荐用法。当然也可以使用其他兼容性的写法,比如对 格式的支持,但背后还是原始AMD的运行逻辑。
AMD的运行逻辑是:提前加载,提前执行。在Requirejs中,申明依赖模块时,会第一时间加载并执行模块内的代码,使后面的回调函数能在所需的环境中运行。
为了更好地优化请求,同时推出了打包工具r.js,使所需加载的文件数减少。
CMD规范文档 CMD使用例子
CMD(Common Module Definition - 通用模块定义)规范主要是Sea.js推广中形成的,一个文件就是一个模块,可以像Node.js一般书写模块代码。主要在浏览器中运行,当然也可以在Node.js中运行。