随着网站开发的复杂度越来越高,js代码和js文件的增多,出现了开发者头疼的两个问题:① 命名冲突;②文件依赖。
js模块化开发可以解决这些问题。
①变量命令冲突
在js文件中,如下创建一个变量并赋予一个函数。如果文件的代码过多,在后续的代码中再次使用add变量,就会将原来的add变量覆盖,就造成了变量的命名冲突。
var add=function(v1,v2){
return v1+v2;
}
// 此处省略一万行代码
var add = 123;
我们逐渐试着重代码进行改善
(1)对象封装
var calculator={
num:123;
}
calculator.add=function(v1,v2){
return v1+v2;
}
这时候 add的作用范围在caculator对象中,就不会避免后续代码直接写 var add = value 造成变量命名冲入。但是这样的代码还是有很大的局限性,对象里面的属性和方法很容易被修改掉,很不安全。
(2)划分私有命名空间
var calculator=(function(){
var num=123;
var add=function(v1,v2){
return v1+v2;
};
return {
num:num,
add:add
}
})()
通过匿名函数,闭包将add的私有化到calculator中,可以保护好里面的属性和方法,但是这种方式的局限在于不能维护和扩展功能。
(3)开闭原则-维护扩展
var calculator=(function(){
var num=123;
var add=function(v1,v2){
return v1+v2;
};
return {
num:num,
add:add
}
})();
var calculator=(function(global){
global.mod=function(v1,v2){
return v1%v2;
}
return global;
})(window.calculator||{});
对add的修改关闭了,同时提供了对calculator的功能扩展,window.caucluator传递就是为了打破封装性。
②文件依赖
在开发js代码的过程中,例如使用了jquery.js,就需要通过的形式引入文件,形成硬编码。如以下代码
var calculator=(function(){
var num=123;
var add=function(v1,v2){
return v1+v2;
};
return {
num:num,
add:add
}
})();
var calculator=(function(global){
global.mod=function(v1,v2){
return $(v1) % $(v2); // 这里使用了jquery的$
}
return global;
})(window.calculator||{});
根据以上问题,引入模块化开发
①服务器端规范
nodejs就是遵循了CommonJS规范。
②浏览器端规范
RequireJS遵循AMD规范。
SeaJS遵循CMD规范。
这里先介绍SeaJS Demo
index.html
SeaJS Demo
在index.js的同级目录modules中,创建如下文件
calculator.js
define(function(require,exports,module) {
var operator = require('./add');
exports.add=operator.add;
exports.add2=operator.add2;
});
add.js
define(function(require,exports,module) {
var add=function(v1,v2){
return v1+v2;
}
$=require('./jquery.js');
var add2=function(){
var v1= $('#v1').val();
var v2= $('#v2').val();
return (v1-0)+(v2-0);
}
exports.add=add;
exports.add2=add2;
});
(1)define是SeaJS的全局函数,定义模块。
(2)modules是一个全局变量相当于 浏览器解析dom 的window对象。
(3)exports是modules.exports的属性对象别名;不能直接给exports赋值,暴露单个属性和方法直接给module.exports赋值。exports提供多个属性和方法向外暴露。
(4)seajs.user()函数启动模块;
(5)require() 用于加载模块。
模块化开发保证了复合“单一职责”设计,通过匿名函数的注入,保证了模块的独立性,而且也能清晰的表达模块之间的依赖。这里简单介绍SeaJS,如果需要知道更多,访问http://www.zhangxinxu.com/sp/seajs/