模块化
2017-09-11 本文已影响0人
leocz
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){
...
})
