這篇來寫乙個具有依賴的事件模組event。event提供三個方法bind、unbind、trigger來管理dom元素事件。
event依賴於cache模組，cache模組類似於jquery的$.data方法。提供了set、get、remove等方法用來管理存放在dom元素上的資料。
示例實現功能：為頁面上所有的段落p元素新增乙個點選事件，響應函式會彈出p元素的innerhtml。
建立的目錄如下
index.html 如下12
3456
78910
1112
1314
1516
17
p1
p2p3
p4p5
cache.js 如下12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
27define(function() ,
id ='_ guid _';
// @private
functionguid(el)
return
varid = guid(el),
c = cache[id] || (cache[id] = {});
if(key) c[key] = val;
returnc;
},
// 略去...
};
});
cache模組的寫法沒啥特殊的，與selector不同的是返回的是乙個js物件。
event.js 如下12
3456
78910
1112
1314
1516
1718
1920
define(['cache'],function(cache) :
function(el, type, fn) ,
removelistener = w3c ?
function(el, type, fn) :
function(el, type, fn) ;
// 略去...
return;
});
main.js 如下12
3456
78910
1112
require.config();
require(['selector','event'],function($, e) );
}
});
依然先配置了下模組的根目錄js，然後使用require獲取selector和event模組。
**函式中使用選擇器$(別名)和事件管理物件e（別名）給頁面上的所有p元素新增點選事件。
注意：require的第乙個引數陣列內的模組名必須和**函式的形參一一對應。
把目錄r3放到apache或其它web伺服器上，訪問index.html。網路請求如下
RequireJS入門（二） 轉
為演示方便這裡僅實現常用的三種選擇器id，classname，attribute。requirejs使用define來定義模組。新建目錄結構如下 這次新建了乙個子目錄js，把main.js和selctor.js放入其中，require.js仍然和index.html在同一級目錄。html 如下12 ...
RequireJS高階（三） 轉
高階的前面兩篇講述了r.js如何通過命令列把所有的模組壓縮為乙個js檔案或把所有的css壓縮為乙個css檔案。其中包括一些壓縮配置引數的使用。但以上兩種方式有幾個問題 1 通過命令手動配置壓縮選項顯得很呆板 2 都僅合併為乙個檔案 對於最後只生成乙個檔案的庫來說，這種方式並無不妥。比如jquery，...
requireJS入門基礎
參考 require.js詳解 1.引用requirejs的html檔案 第7行,使用和約定的屬性data main和src引入require.js模組,所有的require配置在這裡寫在目錄js下的main.js,即require物件會到目錄js下尋找main.js檔案,require物件約定js...