这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。

event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。

示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。

创建的目录如下

为了获取元素，用到了上一篇写的selector.js。不在贴其代码。

index.html 如下

<!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 如下

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 如下

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 如下

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

下载

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. Debian耳机声音问题

    Debian耳机声音问题 关于Debian声音问题 debian testing基本系统安装无声音问题解决 耳机声音问题 之前耳机声音一直正常,使用部分软件更改声卡设置后,计算机可以播放外音,但是耳机 ...

  2. 网页JavaScript4

    表单验证:一.非空验证:1.内容是不是空的.判断值的长度是不是0.length属性.压缩空格的函数. 2.内容是不是改变了. 二.对比验证:1.验证两个控件值的关系(相同,大小) 2.验证控件的值与某 ...

  3. ASP.NET-FineUI开发实践-2

    FineUI好处之一在于No JS,这里的No JS并不是不使用JS,JS对于ASP.Net是必不可少的,只是FineUI把大部分JS封装,如果想用,后台提供了很多方法返回JS,Get...Refer ...

  4. hdu 5124

    bc上的题目,很水,有很多方法做吧,题意大概就是给定你票数,然后让你求出票数最多的那个下标...... 之前我用两个for循环分开写,一个是读入,然后是判断,提交就wa,后来网上看了别人的,就是不能分 ...

  5. Eclipse 运行ant build.xml

    在命令行cmd运行mvn clean install,ant compiler,提示上述信息,是因为 maven的这个插件要求jdk1.6,但是本地电脑环境变量jdk版本为1.7.将JAVA_HOME ...

  6. SAE下的Memcache使用方法

    SAE里面有Memcache,可以较大幅度改善数据库的鸭梨~ 之前一直想学习Memcache,却愁于不知如何下手,对这个名词完全没有概念,同时在SAE的文档里面,也很少对于Memcache的使用教程~ ...

  7. MySQL查看数据库大小、表大小和最后修改时间

    查看数据库表基本信息. select * from information_schema.TABLES where information_schema.TABLES.TABLE_SCHEMA = ' ...

  8. Shell中的${}，##和%%的使用

    假设我们定义了一个变量为: file=/dir1/dir2/dir3/my.file.txt 可以用${ }分别替换得到不同的值: ${file#*/}:删掉第一个/ 及其左边的字符串:dir1/di ...

  9. Cer Crt Pem Pfx 证书格式转换

    1.从pfx格式的证书提取出密钥和证书set OPENSSL_CONF=openssl.cnfopenssl pkcs12 -in my.pfx -nodes -out server.pemopens ...

  10. 移动端web页面使用position:fixed问题总结

    近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...