RequireJS入门（三）

这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。

event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。

示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。

工程目录结构如下：

RequireJS入门（三）

为了获取元素，用到了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的第一个参数数组内的模块名必须和回调函数的形参一一对应。

运行结果：

网络请求如下：

RequireJS入门（三）
我们看到当selector.js和event.js下载后，event.js依赖的cache.js也被自动下载了。这时点击页面上各个P元素，会弹出对应的innerHTML。如下：

RequireJS入门（三）

总结：

当一个模块依赖（a）于另一个模块（b）时，定义该模块时的第一个参数为数组，数组中的模块名（字符串类型）就是它所依赖的模块。

当有多个依赖模时，须注意回调函数的形参顺序得和数组元素一一对应。此时requirejs会自动识别依赖，且把它们都下载下来后再进行回调。

文章来源：http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html

RequireJS入门（三）

相关推荐