RequireJS入门（3）
日期：2014-05-16 浏览次数：20419 次
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对象。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
