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

r3.zip

RequireJS入门（三）转的更多相关文章

  1. RequireJS入门（三）

    这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...

  2. RequireJS入门（二） 转

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  3. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  4. RequireJS入门（二）

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  5. RequireJS 入门指南

    RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...

  6. 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战

    前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...

  7. RequireJS入门（一） 转

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  8. RequireJS入门（一）

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  9. Swift语法基础入门三(函数, 闭包)

    Swift语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数 格式: ...

随机推荐

  1. poj 1733(带权并查集+离散化)

    题目链接:http://poj.org/problem?id=1733 思路:这题一看就想到要用并查集做了,不过一看数据这么大,感觉有点棘手,其实,我们仔细一想可以发现,我们需要记录的是出现过的节点到 ...

  2. win7桌面便签。自带的

    新建WIN7下的桌面便签小程序 桌面—>新建 快捷方式-> 输入%windir%\system32\StikyNot.exe

  3. 李洪强iOS开发之OC[009] -OC无参方法的声明实现和调用

  4. lintcode：数字组合I

    数字组合I 给出一组候选数字(C)和目标数字(T),找到C中所有的组合,使找出的数字和为T.C中的数字可以无限制重复被选取. 例如,给出候选数组[2,3,6,7]和目标数字7,所求的解为: [7], ...

  5. VCL设计方法概论（自己总结了9条），以及10个值得研究的控件 good

    VCL设计方法概论 1. 把Delphi对象改造成一个Windows窗口,主要是要设置Handle和回调函数.在创建一个Windows窗口后,将其句柄赋值给Delphi对象的属性,这个并不难,相当于从 ...

  6. Ubuntu LAMP搭建

    为了数据库课程设计,只好自己搭一个数据库系统,采用LAMP方式. 一.安装 1.安装Apache sudo apt-get install apache2 Apache在安装期间会新建一个目录:/va ...

  7. Java Map各遍历方式的性能比较

    1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keySet拿到的 ...

  8. python 细枝末节

    1. print  自动换行 看区别 >>> for i in range(4): ... print i ... 0 1 2 3 >>> for i in ran ...

  9. USACO Section 2.2: Party Lamps

    这题有个小技巧, 按一个键两次等于没按,所以如果depsum > 16的话其实不用做深搜到depsum次,而只要16次就可以了. /* ID: yingzho1 LANG: C++ TASK: ...

  10. webServer xampp的安装及使用

    一.下载: 西装xampp1.73版本,其他版本可能会出错,为了你能顺利安装,最好用此版本: 二.安装: 1.安装路径,最好不要放到系统盘去[c:],建议非系统盘都可,尤其是早期的XAMPP版本可能默 ...