使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码

水深无声 2022-03-26 20:01 214阅读 0赞

事件(或消息)是一种经常使用的软件设计模式。可以减少消息处理者和消息公布者的之间的耦合，比方J2EE里面的JMS规范。设计模式中的观察者模式(也叫公布/订阅模式)。这对于javascript代码相同适用。之前写的JQuery相关博客中。具体介绍了JQuery的事件处理机制和特性，具体可以參考[**这个文件夹**][Link 1]下的文章。

JQuery事件处理事实上就是使用了公布/订阅模式，包含它提供的命名空间机制、自己定义事件都非常的棒，可是JQuery事件处理有一个缺陷：JQuery事件都是和DOM元素相关的，可是非常多时候我们并不须要DOM元素。仅仅希望使用事件的公布/订阅这样的机制。

代码1：假设某个DOM元素不存在。那么不能依靠它使用事件的公布和订阅。

// not-exsit不存在的dom元素,事件处理无效
     $("not-exsit").bind("self-event",function(){alert(11);});
     $("not-exsit").trigger("self-event");

代码2：JQuery并没有提供全局的bind/trigger。以下代码会报错。

// 报异常$.trigger is not a function
      $.bind("self-event",function(){alert(11);});
      $.trigger("self-event");

通过上面的代码1和代码2，我们就能够看出JQuery事件的不足之处了。我们能够在项目中使用AmplifyJS框架，就能够解决上面的问题。

AmplifyJS官网[http://amplifyjs.com/][http_amplifyjs.com] 和代码下载地址[http://www.bootcdn.cn/amplifyjs/][http_www.bootcdn.cn_amplifyjs]。

这段代码能够正常的执行，通过AmplifyJS的使用方式能够看到。它刚好弥补了JQuery事件处理的不足。

以下附上AmplifyJS的源代码amplify.core.js。能够看到源代码非常的简短，也非常easy看懂。

/*!
     * Amplify Core 1.1.2
     *
     * Copyright 2011 - 2013 appendTo LLC. (http://appendto.com/team)
     * Dual licensed under the MIT or GPL licenses.
     * http://appendto.com/open-source-licenses
     *
     * http://amplifyjs.com
     */
    (function( global, undefined ) {
    
    var slice = [].slice,
    	subscriptions = {};
    
    var amplify = global.amplify = {
    	publish: function( topic ) {
    		if ( typeof topic !== "string" ) {
    			throw new Error( "You must provide a valid topic to publish." );
    		}
    
    		var args = slice.call( arguments, 1 ),
    			topicSubscriptions,
    			subscription,
    			length,
    			i = 0,
    			ret;
    
    		if ( !subscriptions[ topic ] ) {
    			return true;
    		}
    
    		topicSubscriptions = subscriptions[ topic ].slice();
    		for ( length = topicSubscriptions.length; i < length; i++ ) {
    			subscription = topicSubscriptions[ i ];
    			ret = subscription.callback.apply( subscription.context, args );
    			if ( ret === false ) {
    				break;
    			}
    		}
    		return ret !== false;
    	},
    
    	subscribe: function( topic, context, callback, priority ) {
    		if ( typeof topic !== "string" ) {
    			throw new Error( "You must provide a valid topic to create a subscription." );
    		}
    
    		if ( arguments.length === 3 && typeof callback === "number" ) {
    			priority = callback;
    			callback = context;
    			context = null;
    		}
    		if ( arguments.length === 2 ) {
    			callback = context;
    			context = null;
    		}
    		priority = priority || 10;
    
    		var topicIndex = 0,
    			topics = topic.split( /\s/ ),
    			topicLength = topics.length,
    			added;
    		for ( ; topicIndex < topicLength; topicIndex++ ) {
    			topic = topics[ topicIndex ];
    			added = false;
    			if ( !subscriptions[ topic ] ) {
    				subscriptions[ topic ] = [];
    			}
    
    			var i = subscriptions[ topic ].length - 1,
    				subscriptionInfo = {
    					callback: callback,
    					context: context,
    					priority: priority
    				};
    
    			for ( ; i >= 0; i-- ) {
    				if ( subscriptions[ topic ][ i ].priority <= priority ) {
    					subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo );
    					added = true;
    					break;
    				}
    			}
    
    			if ( !added ) {
    				subscriptions[ topic ].unshift( subscriptionInfo );
    			}
    		}
    
    		return callback;
    	},
    
    	unsubscribe: function( topic, context, callback ) {
    		if ( typeof topic !== "string" ) {
    			throw new Error( "You must provide a valid topic to remove a subscription." );
    		}
    
    		if ( arguments.length === 2 ) {
    			callback = context;
    			context = null;
    		}
    
    		if ( !subscriptions[ topic ] ) {
    			return;
    		}
    
    		var length = subscriptions[ topic ].length,
    			i = 0;
    
    		for ( ; i < length; i++ ) {
    			if ( subscriptions[ topic ][ i ].callback === callback ) {
    				if ( !context || subscriptions[ topic ][ i ].context === context ) {
    					subscriptions[ topic ].splice( i, 1 );
    					
    					// Adjust counter and length for removed item
    					i--;
    					length--;
    				}
    			}
    		}
    	}
    };
    
    }( this ) );

更具体的API使用，能够參考以下这2篇文章：

[AmplifyJS源代码简析：事件分发][AmplifyJS]

[Extending Your jQuery Application with Amplify.js][]

[Link 1]: http://blog.csdn.net/aitangyong/article/category/2669337/
[http_amplifyjs.com]: http://amplifyjs.com/
[http_www.bootcdn.cn_amplifyjs]: http://www.bootcdn.cn/amplifyjs/
[AmplifyJS]: http://acgtofe.com/posts/2015/02/amplifyjs-core-in-detail/
[Extending Your jQuery Application with Amplify.js]: https://msdn.microsoft.com/en-us/magazine/hh147623.aspx