5.requirejs入门二

这篇来写一个具有依赖的事件模块 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 会自动识别依赖，且把它们都下载下来后再进行回调。

posted on 2018-01-04 11:17 Sharpest 阅读(97) 评论(0) 收藏举报