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会自动识别依赖,且把它们都下载下来后再进行回调。
下载
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语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数 格式: ...
随机推荐
- [Android]android.graphics.Camera实现图像的旋转、缩放,配合Matrix实现图像的倾斜
android.graphics.Camera可以对图像执行一些比较复杂的操作,诸如旋转与绽放,与Matrix可实现图像的倾斜. 个人总结Camera与Matrix的一些区别如下: Camera的ro ...
- Java基础知识强化30:String类之String的特点(String为什么是final)
1. String字符串特点: 一旦被赋值,字符串值就不能改变. 这里String是final修饰的,具有不可继承性. 2. 为什么String是final? 主要是为了"效率" ...
- 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
- canvas toDataUrl 跨域问题
使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误: Uncaught SecurityError: Failed to execute 'toDataURL' ...
- SQL 查询字段为值不为空
方法一sql="select * from table where id<>null " or sql="select ...
- 开启Mysql慢查询来优化mysql
开启Mysql慢查询来优化mysql 优化sql语句是优化数据库的一个很重要的方面,那么怎么发现那些耗时耗资源的sql语句呢,开启Mysql慢查询! 1.查看是否开启慢查询,默认情况下是关闭的.你的m ...
- Android开发手记(7) 按钮类控件的使用
1.点击Button改变页面背景色 通过Button改变页面背景色,首先新建相应的对象,让后绑定到Layout上的元素. final RelativeLayout layout = (Relative ...
- 通过安全策略限制局域网部分IP访问我的电脑
一旦电脑连上局域网,那么别人就容易进入自己的电脑,造成隐私被泄漏,这是我们最不愿发生的情况.因此,如果你的电脑并不需要向局域网其他用户共享资料,那么就建议采用策略,禁止局域网电脑访问自己的电脑,以保证 ...
- SQL server概述
sqlserver中包含的对象: 数据库.事务日志.索引.文件组.数据库关系图.视图.存储过程.用户自定义函数.用户.角色.程序集.表.报表.全文目录.用户自定义数据类型 数据库实际上是最高层对象,其 ...
- oracle PL/SQL程序设计
declare 说明部分 (变量说明,光标申明,例外说明 ] begin 语句序列 (DML语句]… exception 例外处理语句 End; /