RequireJS入门(三)转
这篇来写一个具有依赖的事件模块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会自动识别依赖,且把它们都下载下来后再进行回调。
RequireJS入门(三)转的更多相关文章
- RequireJS入门(三)
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
- RequireJS入门(二) 转
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS入门与进阶
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- 【原创】NIO框架入门(三):iOS与MINA2、Netty4的跨平台UDP双向通信实战
前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...
- RequireJS入门(一) 转
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门(一)
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- Swift语法基础入门三(函数, 闭包)
Swift语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数 格式: ...
随机推荐
- Linux静态库和动态库
Linux 工具 ❑ GCC: The GNU Compiler Collection, containing the GNU C compiler❑ G++: A C++ compiler, inc ...
- DB2中字符、数字和日期类型之间的转换
DB2中字符.数字和日期类型之间的转换 一般我们在使用DB2或Oracle的过程中,经常会在数字<->字符<->日期三种类 型之间做转换,那么在DB2和Oracle中,他们分别 ...
- 265. Paint House II
题目: There are a row of n houses, each house can be painted with one of the k colors. The cost of pai ...
- 解决Ext.form.DateField在浏览器中显示可能有问题
解决Ext.form.DateField在浏览器中显示可能有问题,界面将会拉的很长很长.如下图: 办法: 1:设置css的长度 .x-date-menu { padding-top:2px;padd ...
- .NET责任链模式(混合单例模式,模板方法模式)-----制作与扩展能力验证
.NET责任链模式.单例模式.模板方法模式混用 前言 哇,看到题目挺长的,这个组合型的东西,到底能干啥呢?本篇文章来一起琢磨琢磨,这两天为了团队的软件赶工,我负责的那一块叫:插件管理器.我们团队的成员 ...
- Hadoop系列
http://www.cnblogs.com/xia520pi/archive/2012/04/08/2437875.html#2925129 hadoop提供了一个可靠的共享存储和分析系统.HDFS ...
- Ubuntu下安装Git以及Git帮助手册【转】
转自:http://milkythinking.com/blog/2011/04/17/install_git_and_manual/ Git简介 Git是一个分布式版本控制系统,对应的是SVN.CV ...
- 51nod 1117 聪明的木匠 (贪心)
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1117 跟挑战程序书上例题一样,将要切割的n断木板,分别对应二叉树树的叶子 ...
- Tmall发送码asp验证sing(自有码开发)
<%''查询通知应答类'============================================================================'api说明:'g ...
- STL头文件
#include <iostream>标准输入输出cin cout等 #include <algorithm> 算法库 如sort find等 #include <vec ...