RequireJS入门（三）转

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

r3.zip

转载于:https://www.cnblogs.com/wanliyuan/p/5039453.html

RequireJS入门（三）转相关推荐

WPF入门(三)-几何图形之不规则图形(PathGeometry) (2)
WPF入门(三)->几何图形之不规则图形(PathGeometry) (2) 原文:WPF入门(三)->几何图形之不规则图形(PathGeometry) (2) 上一节我们介绍了PathG ...
RequireJs入门（一）
RequireJs入门(一) RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. ...
[转载]Python爬虫入门三之Urllib库的基本使用
python爬虫系列教程http://cuiqingcai.com/1052.html 1.分分钟扒一个网页下来怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优 ...
脑残式网络编程入门(三)：HTTP协议必知必会的一些知识
为什么80%的码农都做不了架构师?>>> 本文原作者:"竹千代",原文由"玉刚说"写作平台提供写作赞助,原文版权归"玉刚说&q ...
文本分类入门(三)统计学习方法
文本分类入门(三)统计学习方法前文说到使用统计学习方法进行文本分类就是让计算机自己来观察由人提供的训练文档集,自己总结出用于判别文档类别的规则和依据.理想的结果当然是让计算机在理解文章内容的基础上进 ...
.Net 3.5 Remoting编程入门三
VS2008 .Net 3.5 Remoting编程入门三信道什么是信道?信道有哪些类型呢? 信道顾名思意就是通信的通道.就想那些宣传标语说的,"要想富,先修路!".同理,要学 ...
sql语言和php,SQL语言快速入门(三)_php
我们日常使用SQL语言的工作过程中,使用最多的还是从已经建立好的数据库中查询信息.下面,我们就来详细介绍一下如何使用SQL语言实现各种数据库查询操作. SELECT-FROM 为方便讲解,我们在数据库 ...
RequireJS入门（一）转
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
MySQL入门 (三) : 运算式与函式
运算式(expressions)已经在查询叙述中使用过,例如算数运算与「WHERE」子句中的条件判断. 虽然目前只有讨论查询资料的部份,不过你在任何地方都有可能使用运算式来完成你的工作. 一个运算式中 ...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门(三)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<三> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...

RequireJS入门（三）转

RequireJS入门（三）转相关推荐

最新文章

热门文章