1.为什么要使用模块化?
如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀。
这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
模块化优点
- 解决命名冲突,各模块内部变量,无法被其他模块读取(全局变量除外)。
- 依赖管理
- 提高代码可读性
- 代码解耦,提高复用性
2.CMD、AMD、CommonJS 规范分别指什么?有哪些应用
CMD:通用模块定义(Common Module Definition)
应用:SeaJS
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});
AMD:异步模块定义(Asynchronous Module Definition)
应用:RequireJS
// 定义模块 myModule.js
define(['jquery'], function($){ //引入jquery
function Button($ct){
this.$ct = $ct
this.bind()
}
Button.prototype = {
bind: function(){
this.$ct.click(function(){
$('.box').css({'background': 'red'})
})
}
}
return Button //一定要return出去
})
// 加载模块
require(['jquery', 'app/myModule'],function($, Button){
new Button($('.button')) //构造函数实例化
})
CommonJS:CommonJS 扩展了JavaScript声明模块的API.
CommonJS模块可以很方便得将某个对象导出,让他们能够被其他模块通过 require 语句来引入。通过CommonJS,每个JS文件独立地存储它模块的内容(就像一个被括起来的闭包一样)。主要应用node.js