requirejs入门(三)

转载:/* 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会自动识别依赖,且把它们都下载下来后再进行回调。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值