1.
这篇来写一个具有依赖的事件模块 event。
event 提供三个方法 bind、unbind、trigger 来管 理 DOM 元素事件。
event 依赖于 cache 模块， cache 模块类似于 jQuery 的$.data 方法。
提供了 set、 get、 remove 等方法用来管理存放在 DOM 元素上的数据。
示例实现功能：为页面上所有的段落 P 元素添加一个点击事件，响应函数会弹出 P 元素的 innerHTML。
创建的目录如下
为了获取元素，用到了上一篇写的 selector.js。不在贴其代码。
index.html 如下
1 <!doctype html> 2 <html> 3 <head><title>requirejs 入门（三）</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> p { 6 width: 200px; 7 background: gray; 8 } </style> 9 </head> 10 <body><p>p1</p> 11 <p>p2</p> 12 <p>p3</p> 13 <p>p4</p> 14 <p>p5</p> 15 <script data-main="js/main" src="require.js"></script> 16 </body> 17 </html>
cache.js 如下
1 define(function () { 2 var idSeed = 0, cache = {}, id = '_ guid _'; // @private 3 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] = {}); 4 if (key) c[key] = val; 5 return c; 6 } 7 }; });
cache 模块的写法没啥特殊的，与 selector 不同的是返回的是一个 JS 对象。
event.js 如下
1 define(['cache'], function (cache) { 2 var doc = window.document, w3c = !!doc.addEventListener, 3 expando = 'snandy' + ('' + Math.random()).replace(/\D/g, ''), triggered, 4 addListener = w3c ? function (el, type, fn) { 5 el.addEventListener(type, fn, false); 6 } : function (el, type, fn) { 7 el.attachEvent('on' + type, fn); 8 }, removeListener = w3c ? function (el, type, fn) { 9 el.removeEventListener(type, fn, false); 10 } : function (el, type, fn) { 11 el.detachEvent('on' + type, fn); 12 }; 13 14 return {bind: bind, unbind: unbind, trigger: trigger}; 15 });
event 依赖于 cache，定义时第一个参数数组中放入“cache”即可。第二个参数是为函数类型， 它的参数就是 cache 模块对象。 这样定义后， 当 require 事件模块时， requirejs 会自动将 event 依赖的 cache.js 也下载下来。
main.js 如下
1 require.config({ 2 baseUrl: 'js' 3 }); 4 require(['selector', 'event'], function ($, E) { 5 var els = $('p'); 6 for (var i = 0; i < els.length; i++) { 7 E.bind(els[i], 'click', function () { 8 alert(this.innerHTML); 9 }); 10 } 11 });
依然先配置了下模块的根目录 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 会自动 识别依赖，且把它们都下载下来后再进行回调。
