在多人合作完成網頁，經常遇到大家的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事件，得到一個綠色的圓。