- 浏览: 1125775 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
这篇来写一个具有依赖的事件模块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会自动识别依赖,且把它们都下载下来后再进行回调。
发表评论
-
软件复用的几种方式
2014-06-20 05:39 2394软件复用的好处有很多 一、提高工作效率 这条自不 ... -
Backbone模型
2014-05-05 11:09 975现在进入最关键的组 ... -
Backbone.sync-将模型同步到服务器
2014-05-05 10:52 913默认情况下,只要保存模型(Model/Collection的 ... -
Backbone事件模块
2014-04-29 13:58 2896事件模块Backbone.Events是Backbone的 ... -
Backbone的写类方式
2014-04-22 07:58 912从两个角度去讨论Backbone的写类方式 Backb ... -
基于CommonJS Modules/2.0的实现:BravoJS
2013-05-16 16:53 1502今天看见一个基于CommonJS Modules/2.0的 ... -
RequireJS和Backbone的集成
2013-05-16 07:15 3555有朋友留言RequireJS如何与Backbone集合使用 ... -
RequireJS进阶(三)
2012-07-16 17:32 4861进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一 ... -
RequireJS进阶(二)
2012-07-12 12:04 1740这一篇来认识下打包工具的paths参数,在入门一中就介绍了re ... -
RequireJS进阶(一)
2012-07-03 18:00 1805为了应对日益复杂,大规模的JavaScript开发。我们化整为 ... -
RequireJS 2.0 正式发布
2012-06-05 18:13 1588就在前天晚上RequireJS发布了一个大版本,直接从vers ... -
RequireJS入门(二)
2012-06-03 19:18 1880上一篇是把整个jQuery库 ... -
RequireJS入门(一)
2012-05-22 16:41 1903RequireJS由James Burke创建,他也是A ... -
JavaScript模块化开发库之SeaJS
2012-03-29 14:05 2538SeaJS由国内的牛人lifesinger开发。目前版本是1. ... -
UMD和ECMAScript模块
2012-03-19 15:57 4163一、UMD:AMD 和CommonJS的糅合 前面花了 ... -
AMD:浏览器中的模块规范
2012-03-01 08:07 3691前面提到,为实现与NodeJS相同方式的模块写法,大牛们做了 ... -
NodeJS模块格式在浏览器中的尝试
2012-02-29 07:32 2784我们知道NodeJS有一套简洁的格式写模块,它遵循的就是 Mo ... -
拥抱模块化的JavaScript(三1)
2012-02-26 13:51 0毕竟CommonJS不是ECMAScript,浏览器厂商 ... -
拥抱模块化的JavaScript(四)
2012-02-25 18:12 0想在浏览器端实现与Node ... -
JavaScript在服务器端的模块化
2012-02-28 07:20 1311服务器端的JSer是幸运的,它有NodeJS,NodeJS遵循 ...
相关推荐
RequireJs入门例子
NULL 博文链接:https://snandy.iteye.com/blog/1537504
NULL 博文链接:https://bijian1013.iteye.com/blog/2113840
刚接触可以瞄下,知道怎么使用就不用下啦!这是入门例子
RequireJs 实例
RequireJS全面讲解:RequireJS介绍,RequireJS入门 ,RequireJS规范,RequireJS用法,RequireJS进阶应用,RequireJS加载器插件 描述RequireJS是什么,以及它的一些基础场景
RequireJS由James Burke创建,他也是AMD规范的创始人。大家知道我们为什么要学习requirejs吗?带着这个疑问来学习本篇文章吧,感兴趣的朋友一起学习RequireJS入门一之实现第一个例子吧
requireJs入门实例,可以直接运行,运用到了css.min.js、text.js、jquery.tmpl.min.js
KnockoutJS + RequireJS + jQuery + Bootstrap入门套件 该应用程序旨在作为基于AMDjs设计原则的模块化JavaScript应用程序的起点。 请参考相应的库以获取更多信息和许可。 包含的库: v1.8.2 v2.1.0 v2.1.1 v2.0...
RequireJS代码文件依赖管理 - 入门代码演示; 附项目文件说明、jquery.validate.js验证插件(demo大全)、博客讲解地址等; 适合小升初技术
主要介绍了JavaScript的RequireJS库入门指南,RequireJS库的人气近来攀升很快,需要的朋友可以参考下
RequireJS 界的 Hello World 入门demo资源包,方便大家开始学习RequireJS
RequireJS 入门
一个可能的用例是在 Node 环境中没有任何浏览器的情况下进行单元测试(例如使用 )入门 npm install node-requirejs用法您可以同时实例化和提供配置 var requirejs = require ( 'requirejs' ) . requirejs ( ...