这篇来写一个具有依赖的事件模块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基础（二）

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

  2. Python全栈开发【基础三】

    Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...

  3. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  4. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  5. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  6. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  7. jdbc基础 (三) 大文本、二进制数据处理

    LOB (Large Objects)   分为:CLOB和BLOB,即大文本和大二进制数据 CLOB:用于存储大文本 BLOB:用于存储二进制数据,例如图像.声音.二进制文件 在mysql中,只有B ...

  8. Ruby语法基础(三)

    Ruby语法基础(三) ​ 在前面快速入之后,这次加深对基本概念的理解. 字符串 ​ Ruby字符串可以分为单引号字符串和双引号字符串,单引号字符串效率更高,但双引号的支持转义和运行 puts '单引 ...

  9. C#_02.13_基础三_.NET类基础

    C#_02.13_基础三_.NET类基础 一.类概述: 类是一个能存储数据和功能并执行代码的数据结构,包含数据成员和函数成员.(有什么和能够干什么) 运行中的程序是一组相互作用的对象的集合. 二.为类 ...

随机推荐

  1. 为了体验 ILS 在Win2012R2 Hyper-V上安装Windows 2000 AdvSer

    Win2012 R2 Hyper-V 的集成服务包已不支持Windows 2000 先安装SP4.IE6.更新汇总包,再来安装这个. 安装完成后,会有几个未知设备,直接禁用就可以了. 开启Window ...

  2. 【总结】JS里的数组排序

    虽然贴了2种办法,但是思路是一致的,都是先从数组里找出最小值,一种是找到一个放进新数组: 另一种是找到后和第i个数交换,i每次自增 主要用到2个函数: 从一个数组里找出最小值: 两个元素互换位置 fu ...

  3. some notes about spring aop

    1 . timeCountIntecetor implements handlerInterceptor { preHandle(); postHandle(); afterComplete(); } ...

  4. createjs easal.js制作了一个很简单的链路图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 在linux上通过yum安装JDK

    完全转载自:https://my.oschina.net/andyfeng/blog/601291 这里完整粘贴一份留存 卸载centos自带的jdk 1.查看当前的jdk版本,并卸载 [root@l ...

  6. 设计模式-GoF

    资源: 下载GOF的书籍: http://download.csdn.net/download/quanbove/6534569 这里总结了模式,但讲的并不准确: http://www.runoob. ...

  7. Linux下lampp详解 (转)

    重要文件解释: ProFTPD:一个Unix平台上或是类Unix平台上(如Linux, FreeBSD等)的FTP服务器程序,它是在自由软件基金会的版权声明(GPL)下开发.发布的免费软件,可以随意修 ...

  8. 64位.net调用32位com服务（c++）

    说明: 因64位.net无法调用32位dll,才采用调用进程外com形式. 该项目必须为release时编译才不会报错. 项目调用时,添加引用->com中找到该com服务,添加即可. 部署: 启 ...

  9. 转载：最近有两款路由器D-link , Tenda分别被爆出固件中存在后门

    最近有两款路由器分别被爆出固件中存在后门. D-link D-link是台湾公司,成立于1986年,『公司致力于高级网络.宽带.数字.语音和数据通信解决方案的设计.制造和营销,是业界的全球领导者』(官 ...

  10. IaaS, PaaS, SaaS 解释

    IaaS.PaaS.SaaS作为云计算三种服务模式,下面会着重介绍他们的定义.作用.功能.对应产品以及他们之间的关系等. 一.定义:     SaaS:Software as a Service,软件 ...