关于hashchangebroker和statehashable的补充文档


Posted in Javascript onAugust 08, 2011

url hash:url中#号后面那段,通常用来定位到html页面中某一锚点。因为hash变化页面不会刷新,所以在ajax应用中用hash来存储脚本运行状态,例如gmail的做法。

jquery hash change event plugin: Internet Explorer 8, Firefox 3.6+, 和Chrome 5+里,已经提供了window.onhashchange事件,但是在老版本的浏览器中并没有这个事件,这个插件通过定时器判断hash是否产生了变化,以便在老版本的浏览器重提供hashchange事件。

hashchangebroker:之前写了这个jquery extend,提供了四个方法:

$.hashchangebroker.subscrib(fragName, handler)

订阅fragName对应的hash段落变化,并转发给指定的handler。

url hash由若干个frag组成,一个frag格式为:[fragName]:[state]。fragName为自定义hash状态名称。state为base64编码的json字符串。

handler只有一个参数state:json格式字符串,描述自定义状态。

$.hashchangebroker.publish(hash)

此方法应绑定到window.onhashchange事件。接收hash并解码找到变更的frag,并转发给订阅该frag的handler。

$.hashchangebroker.changeFrag(fragName,state)

此方法由statehashable类型调用,用于修改hash中对应fragName的frag的state。

$.hashchangebroker.init()

此方法用于在页面刷新后,获取hash并publish。在$(document).ready中调用即可。应放到所有subscrib方法之后。

statehashable:提供这个widget是希望可以比较方便的将控件的状态发布到url hash,并获取控件对应的hash frag的state变化,触发相应的statechange事件。

用法$(dom).statehashable();调用此方法后,给dom对象增加了hashchange事件。当statehashable对象发现控件对应的hash frag变化后,会触发dom对象的hashchange事件。
使用方法:

$(dom).bind("hashchange",function(e,stateObj){ 
//判断stateObj的状态,还原dom到对应的状态 
});

应在更改dom状态的方法中增加statechange的事件触发,statehashable对象会捕捉该事件,并调用hashchangebroker的changeFrag方法,修改hash。statechange触发示例:
$(dom).trigger("statechange",[stateName,stateValue]);
Javascript 相关文章推荐
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
javascript 面向对象继承
Nov 26 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JS作用域链详解
Jun 26 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
js编写简易的计算器
Jul 29 Javascript
基于jQuery的前端数据通用验证库
Aug 08 #Javascript
JS基础之undefined与null的区别分析
Aug 08 #Javascript
jQuery的12招常用技巧分享
Aug 08 #Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 #Javascript
jquery动态加载图片数据练习代码
Aug 04 #Javascript
jquery里的正则表达式说明
Aug 03 #Javascript
基于jQuery的图片剪切插件
Aug 03 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python线程指南详细介绍
2017/01/05 Python
python requests 使用快速入门
2017/08/31 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python多线程同步实例教程
2019/08/11 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
学生自我鉴定范文
2013/10/04 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书