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

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

大家好,又见面了,我是全栈君。

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


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://www.bootcdn.cn/amplifyjs/

<script src="amplify.js"></script>
<script>
	amplify.subscribe( "self-event", function(context){
		console.log("priority=5,data="+JSON.stringify(context));
	}, 5);
	
	
	amplify.subscribe( "self-event", function(context){
		console.log("priority=6,data="+JSON.stringify(context));
	}, 6); 
  
	amplify.subscribe( "self-event", function(context){
		console.log("priority=3,data="+JSON.stringify(context));
	}, 3);
  
  
  amplify.publish("self-event",{data:11});
  
</script>

这段代码能够正常的执行,通过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源代码简析:事件分发

Extending Your jQuery Application with Amplify.js


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115403.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 分散式-ubuntu12.04安装hadoop1.2.1

    分散式-ubuntu12.04安装hadoop1.2.1

  • ASP.NET 使用Ajax

    ASP.NET 使用Ajax之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的Sc

  • CTK Plugin Framework简介

    CTK Plugin Framework简介CTKPluginFramework简介 框架简介 1.1、简介CTKPluginFramework设计参考了OSGi(OpenServiceGatewayInitiative,开放服务网关协议)(Java的动态组件系统),并提供了一种能让应用程序(动态地)由许多不同的可重用组件组成的开发模型,允许通过服务进行通信。OSGi规范的核心部分是一个框架,核心框架定义了应用程序的生命周期模式和服务注册。基于OSGI核心框架定义了大量的OSGi服务:日志、配置管理、HTTP(运行se

  • IOS-支付宝

    IOS-支付宝

  • 485转网口的moxa(虚拟机com口和主机com口)

    影响我们一生百倍差距的四大效应观察者效应:你的世界是什么样是由你的观察决定的.这个效应是在【潜能突破】研习营课堂上发现的,我们有个练习叫三生万物,每个人都会成为一次观察者角色,当大家在成为其他角色时,他们总是发现不了自己的问题,无论我们怎样提醒都没有用,无法改变原有的模式,当他们进入观察者模式,看见其他人的行为所造成的后果时,立刻恍然大悟,主动注意自己的形为,在当下立刻发生改变.刚开始我以为这是个…

  • ipad越狱有什么坏处吗?_平板越狱有什么好处

    ipad越狱有什么坏处吗?_平板越狱有什么好处1. iPad越狱是什么?iPad越狱有什么好处和坏处?不越狱又有啥缺点?越狱就是解除一些原版固件的限制。最大的好处是可以安装激活成功教程的软件和游戏,这些软件和游戏本来都是收费的。而且,有些功能很强大的软件,并不是花钱能在官方的App Store里能买到的(某些有米之人或许会说“我就不越狱,我都花钱买正版”,我只能客气地说他只知其一不知其二),比如SBSettings, OpenSSH, Lockd

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号