1.为什么要使用模块化
1.解决命名冲突。
当代码达到一定规模,功能很多的时,命名冲突就会出现,模块化可以很好的解决命名冲突的问题。
2.实现依赖管理
当一个页面要加载多个js并且他们之际有些还有依赖关系,这时候就需要慎重仔细的排列这些js的顺序,以保证每个组件都能正常运行。而模块化之后就不用为此多费心思。
3.代码解耦,提高复用性
每个模块相互独立,互不影响,代码组件封装可以重复利用,去除这个模块不影响其它的。
4.提高代码可读性
一个功能为一个模块,代码简洁。
2.CMD,AMD,CommonJS规范分别指什么?有哪些应用
CommonJS规范有NodeJS发扬光大
1.定义模块。根据commonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,咋模块内部东一的变量无法被其他模块读取,除非定义为global对象的属性。
2.模块输出:模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入对象
3.加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
Node端加载,同步加载
//模块定义 a.js
var people = {
name:'xiaoming',
sayName:function(){
console.log(this.name)
}
}
module.exports = people
//加载模块
var p = require('./a')
p.sayName()
AMD:Asynchronous Module Definition, 异步模块定义.指定一种机制,在该机制下模块和依赖可以异步加载,这对浏览器端的一步加载尤其适用。
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出
- 使用AMD规范进行开发需要使用RequireJS
- requireJS主要解决两个问题
- js文件之间的依赖关系:被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
语法
define(id?,dependencies?,factory);
id:可选参数,用来定义模块标识,如果没有此参数,则是脚本的文件名(去掉后缀)
dependencies:是一个当前模块依赖的模块名称数组
factory:方法,模块初始化要狮子女个的函数或对象。如果是函数,它应该制备执行一次。如果是对象,此对象应该为模块的输出值。
e.g
var modal = require('modal')
$btn.on('click',function(){
modal.open()
})
define('modal',['jQuery','dialog'],function($,dialog){
$('.modal').show()
Dialog.open()
})
e.g2
require(['carousel','tab','lazy'],function(carousel,tab,lazy){
new Carousel();
Tab.init();
Lazy.init()
})
CMD :Common Module Definition,通用模块定义。CMD有个浏览器的实现SeaJS,Sea.js推荐一个模块为一个文件
语法
define(id?,deps?,factory)
id: cmd推崇用文件名最为模块id
deps:cmd推崇依赖就近,一般不在define的参数deps中写依赖,在factory中写
factory有三个参数:
function(require,exports,module)
require一个方法,接受模块标识作为参数,用来获取其他模块提供的接口
exports 作为一个向外提供接口的对象
module对象,存储了与当前模块相关联的属性和方法
//定义加载模块Moudle.js
define(function(require,exports,moudle){
var $ = require('jquery.js')
$('div').addClass('active')
})
//加载模块
seajs.use(['Moudle.js'],function(my){
...
})