基于jQuery实现简单的js模块化
在多人合作完成网页，经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架，应该是可以解决这个问题。但本人并非前端开发人员，那些框架都没用过，只对jquery相对熟悉，就想用jquery来解决这个问题。
首先相互影响主要有两个方面，一是js代码中定义的function名重复，导致覆盖问题；另一个是js操作页面元素时，大家使用的id、name、class等可能重复，导致操作了错误的对象。
对于第一点，采用的是定义一个注册函数，其他自定义的方法都要通过调用注册函数进行注册，注册时去检查该函数是否已经存在。对于第二点，考虑使用div作为容器（当然其他标签元素也可以），一个功能模块放到一个容器中，一个模块的js只操作对应容器中的元素，该模块只通过容器进行对外的交互（模块化后一个模块只知道自己的容器是谁，数据传递只在模块和容器间进行）。
下面是自定义的注册函数$r，参数有两个，第一个参数是功能模块函数，要求把一个功能的js代码块写到一个函数中，传递给注册函数。第二个参数是模块名称字符串，多级采用“.”来分隔。
// 注册函数$r
window.$r = function(){
var i, func, modelname, name, model, paramarr;
func = arguments[0];
modelname = arguments[1];
if(typeof func != 'function'){
console.error('第一个参数不是function');
return;
}
if(typeof modelname != 'string'){
console.error('第二个参数应当为模块名字符串');
return;
}
paramarr = modelname.split('.');
model = window;
name = '';
for(i=0; i<paramarr.length; i++){
if(i == paramarr.length - 1){
if(typeof model[paramarr[i]] != 'undefined'){
console.error('模块"' + modelname + '"已存在');
return;
}
model[paramarr[i]] = checkparamproxy;
return checkparamproxy;
}
model = model[paramarr[i]] = model[paramarr[i]] || {};
if(typeof model != 'object'){
for(j=0; j<i; j++){}
console.error('"' + name + paramarr[i] + '"不是object');
return;
}
name += paramarr[i] + '.';
}
function checkparamproxy($p){
if(typeof $p == 'undefined'){
console.error('模块' + modelname + '需要传入一个jquery类型参数作为容器');
return;
}
if($p instanceof jquery){
return func.call($p, $p);
}
console.error('"' + $p + '"不是jquery对象');
return;
}
}
下面举个示例，页面代码如下，里面就两个div，container1和container2，当作容器使用。
<html>
<head>
<meta charset="utf-8"/>
<title>register</title>
</head>
<body>
<div id="container1" style="height: 100px;width: 100px;"></div>
<div id="container2" style="height: 120px;width: 80px;"></div>
</body>
</html>
现在注册一个绘制内切椭圆或圆形的js模块，模块名叫“graph.ellipse”，然后将容器container1的jquery对象作为参数赋给graph.ellipse
// 注册graph.ellipse模块
$r(function($c){ // $c为容器的jquery对象，也可通过this来获取
$c.html('<div style="height: 100%;width: 100%; border: 2px solid #999999;border-radius: 50%;"></div>');
$c.on('change', function(){
var color = $c.data('color');
$c.children().css({'border-color':color});
})
$c.trigger('loaded');
}, 'graph.ellipse');
graph.ellipse($('#container1')); // 将container1作为模块容器
这样就得到了一个宽高为100px的圆。
在graph.ellipse模块中，将操作都限定在$c（示例中即$('#container1')）内，比如用$c.find(e|o|e)查找元素，用$c.append(content|fn)追加元素等，这样就确保不会对其他模块产生影响。模块对外交互采用$c.trigger(type)和$c.on(type,fn)触发绑定事件机制，比如示例中$c.trigger('loaded')触发一个loaded加载完成事件，需要在模块加载完成后执行的操作，就可以在外部用$('#container1').on('loaded',function(){// todo graph.ellipse模块加载完成后执行})来实现。外部要改变圆的颜色，就可以用$('#container1').data({'color':'#27ae60'}).trigger('change')触发容器上的change事件，得到一个绿色的圆。
上一篇： Redis入门简述