轉載:/* http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html */
這篇來寫一個具有依賴的事件模塊event。event提供三個方法bind、unbind、trigger來管理DOM元素事件。
event依賴於cache模塊,cache模塊類似於jQuery的$.data方法。提供了set、get、remove等方法用來管理存放在DOM元素上的數據。
示例實現功能:爲頁面上所有的段落P元素添加一個點擊事件,響應函數會彈出P元素的innerHTML。
創建的目錄如下
爲了獲取元素,用到了上一篇寫的selector.js。不在貼其代碼。
index.html 如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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 如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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 如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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 如下
1
2
3
4
5
6
7
8
9
10
11
12
|
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會自動識別依賴,且把它們都下載下來後再進行回調。