這篇來寫一個具有依賴的事件模塊event。event提供三個方法bind、unbind、trigger來管理DOM元素事件。
event依賴於cache模塊，cache模塊類似於jQuery的$.data方法。提供了set、get、remove等方法用來管理存放在DOM元素上的數據。
示例實現功能：為頁面上所有的段落P元素添加一個點擊事件，響應函數會彈出P元素的innerHTML。
創建的目錄如下
為了獲取元素，用到了上一篇寫的selector.js。不在貼其代碼。
index.html 如下
<!doctype html>
<html>
<head>
<title>requirejs入門（三）</title>
<meta charset="utf-8">
<style type="text/css">
p {
width: 200px;
background: gray;
}
</style>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p>
<script data-main="js/main" src="require.js"></script>
</body>
</html>
cache.js 如下
define(function() {
var idSeed = 0,
cache = {},
id = '_ guid _';
// @private
function guid(el) {
return el[id] || (el[id] = ++idSeed);
}
return {
set: function(el, key, val) {
if (!el) {
throw new Error('setting failed, invalid element');
}
var id = guid(el),
c = cache[id] || (cache[id] = {});
if (key) c[key] = val;
return c;
},
// 略去...
};
});
cache模塊的寫法沒啥特殊的，與selector不同的是返回的是一個JS對象。
event.js 如下
define(['cache'], function(cache) {
var doc = window.document,
w3c = !!doc.addEventListener,
expando = 'snandy' + (''+Math.random()).replace(/\D/g, ''),
triggered,
addListener = w3c ?
function(el, type, fn) { el.addEventListener(type, fn, false); } :
function(el, type, fn) { el.attachEvent('on' + type, fn); },
removeListener = w3c ?
function(el, type, fn) { el.removeEventListener(type, fn, false); } :
function(el, type, fn) { el.detachEvent('on' + type, fn); };
// 略去...
return {
bind : bind,
unbind : unbind,
trigger : trigger
};
});
event依賴於cache，定義時第一個參數數組中放入“cache”即可。第二個參數是為函數類型，它的參數就是cache模塊對象。
這樣定義后，當require事件模塊時，requirejs會自動將event依賴的cache.js也下載下來。
main.js 如下
require.config({
baseUrl: 'js'
});
require(['selector', 'event'], function($, E) {
var els = $('p');
for (var i=0; i<els.length; i++) {
E.bind(els[i], 'click', function() {
alert(this.innerHTML);
});
}
});
依然先配置了下模塊的根目錄js，然后使用require獲取selector和event模塊。
回調函數中使用選擇器$(別名)和事件管理對象E（別名）給頁面上的所有P元素添加點擊事件。
注意：require的第一個參數數組內的模塊名必須和回調函數的形參一一對應。
把目錄r3放到apache或其它web服務器上，訪問index.html。網絡請求如下
我們看到當selector.js和event.js下載后，event.js依賴的cache.js也被自動下載了。這時點擊頁面上各個P元素，會彈出對應的innerHTML。如下
總結：
當一個模塊依賴（a）於另一個模塊（b）時，定義該模塊時的第一個參數為數組，數組中的模塊名（字符串類型）就是它所依賴的模塊。
當有多個依賴模時，須注意回調函數的形參順序得和數組元素一一對應。此時requirejs會自動識別依賴，且把它們都下載下來后再進行回調。