使用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和JQuery编写更好更优雅的javascript事件处理代码的更多相关文章
- 使用 Promises 编写更优雅的 JavaScript 代码
你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- jquery编写插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
- 代码规范(RL-TOC)用更合理的方式写 JavaScript
代码可以改变世界 不规范代码可以毁掉世界 只有先学会写规范的代码,才可以走的更远 编程语言之间有很多编程规范都是通用: 命名 不要用语言不明的缩写,不用担心名字过长,名字一定要让别人知道确切的意思; ...
- 正则表达式匹配可以更快更简单 (but is slow in Java, Perl, PHP, Python, Ruby, ...)
source: https://swtch.com/~rsc/regexp/regexp1.html translated by trav, travmymail@gmail.com 引言 下图是两种 ...
- 线程安全使用(四) [.NET] 简单接入微信公众号开发:实现自动回复 [C#]C#中字符串的操作 自行实现比dotcore/dotnet更方便更高性能的对象二进制序列化 自已动手做高性能消息队列 自行实现高性能MVC WebAPI 面试题随笔 字符串反转
线程安全使用(四) 这是时隔多年第四篇,主要是因为身在东软受内网限制,好多文章就只好发到东软内部网站,懒的发到外面,现在一点点把在东软写的文章给转移出来. 这里主要讲解下CancellationT ...
- 让 Python 代码更易维护的七种武器——代码风格(pylint、Flake8、Isort、Autopep8、Yapf、Black)测试覆盖率(Coverage)CI(JK)
让 Python 代码更易维护的七种武器 2018/09/29 · 基础知识 · 武器 原文出处: Jeff Triplett 译文出处:linux中国-Hank Chow 检查你的代码的质 ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 用jquery编写的分页插件
用jquery编写的分页插件 源码 function _pager_go(total_page) { var page_str = $("#_pager_textbox").val ...
随机推荐
- 【quick-cocos2d-x】Lua 面向对象(OOP)编程与元表元方法
版权声明:本文为博主原创文章,转载请注明出处. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 早期的计算机编程是基于面向过程的方法,通过设计一个算法就可以解决当时 ...
- Hadoop2.2.0 手动切换HA环境搭建
ssh-copy-id -i hadoop5含义: 节点hadoop4上执行ssh-copy-id -i hadoop5的含义是把hadoop4上的公钥id_rsa.pub的内容追加到hadoop5的 ...
- Linux环境变量(小马哥推荐)
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一 ...
- Linux下动态库生成和使用
Linux下动态库生成和使用 一.动态库的基本概念 1.动态链接库是程序运行时加载的库,当动态链接库正确安装后,所有的程序都可以使用动态库来运行程序.动态链接库是目标文件的集合,目标文件在动态链接库中 ...
- POJ2406----Power Strings解题报告
Power Strings Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 43514 Accepted: 18153 D ...
- 一个相当好的状态机(DFA, 确定有限状态机)的编码实现,相当简洁漂亮
从jsoup而来,文章见: https://github.com/code4craft/jsoup-learning/blob/master/blogs/jsoup4.md 状态机 Jsoup的词法分 ...
- 第一百九十三天 how can I 坚持
我以为我是谁. 你可以记录你今天看了电影 也可以记录你最近在听什么歌 但这都会成为回忆 . ---oncelife 快受不了了啊.咋办. 今天看了<滚蛋吧,肿瘤君>,还看了<那山那 ...
- Microsoft Office Excel 不能访问文件“XXXXXXXXXXXXX.xls”。 可能的原因有:
解决办法:1. 1).通过webconfig中增加模拟,加入管理员权限, <identity impersonate="true" userName="系统管理员& ...
- Android_UI_点击按钮切换背景效果实现
实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...
- Oracle数据库编程:在JDBC中应用Oracle
9.在JDBC中应用Oracle: JDBC访问数据库基本步骤: 1.加载驱动 2.获取链接对象 3.创建SQL语句 4.提交S ...