为什么要使用模块化?
解决命名冲突
在浏览器运行的 js 实际上会合并代码挂载到全局对象(window)下,虽然有匿名函数,但对于变量和定义好的函数名,是很有可能冲突的。同时,如果多人合作,命名冲突就更可能发生了,此时就需要解决这个问题了。依赖管理
代码不可能全写再一个文件里,我们都会分开几个甚至几十个文件,这样拆分更容易维护,便于重用封装。但这些文件的依赖关系可能很混杂,顺序很重要,比如我们再引用 jQuery 的时候,在所有用到 jQ 的代码前引入,这是常识,但依赖有很多的时候,比如 100 个,这样人为去维护顺序就显的力不从心了。
CMD、AMD、CommonJS 规范分别指什么?有哪些应用
- CommonJS 规范
Node的出现才是js真正模块化的开始。每个文件就是一个模块,有自己的作用域。CommonJS规范规定每个模块内部,module
变量代表当前模块。这个变量是一个对象,它的exports
属性是对外的接口。加载某个模块,其实是加载该模块的module.exports,require方法用于加载模块。
// a.js
var aFnc = function () {
console.log('this is a!')
}
var a = 1
module.exports.a = a
module.exports.aFnc = aFnc
//b.js
var a = require('./a.js')
console.log(a.a)
a.aFnc()
对于服务端语言,模块化就是读取下文件内容的事情,是同步进行的,因为读取硬盘速度很快,可以等待。但在浏览器里,同步等待js 的加载可能会出现因为网速问题,导致网页加载时间过长,因此需要新的标准。
- AMD是“Asynchronous Module Definition”的缩写,意思就是“异步模块定义”。是RequireJS在推广过程中的规范化产出。该规范定义了一个函数
define
,它是全局变量。
单独模块的定义:
define({
method: function(){}
})
//另一种写法
define(function(){
return {
method: function(){}
}
})
非独立模块:
define(['module1', 'module2'], function(m1, m2){
...
})
- CMD 规范
CMD 是 SeaJS 在推广过程中的规范化产出。
与 AMD 的区别:
对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。
CMD 推崇依赖就近,AMD 推崇依赖前置
模块定义:
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b')
// 依赖可以就近书写
b.doSomething()
// ...
})
- 应用
CommonJS 适用于服务端,基于 Node,可用 Glup、 Webpack 之类的打包压缩再用于浏览器环境。
AMD 用于浏览器环境,如 RequireJS
CMD 用于浏览器环境, SeaJS 推广中产出
使用 requirejs 完善入门任务15
源码地址:https://github.com/jirengu-inc/jrg-renwu11/tree/master/homework/%E5%BC%A0%E6%99%93%E8%BE%B0/require