关于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 相关文章推荐
javascript Array.prototype.slice使用说明
Oct 11 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python堆排序原理与实现方法详解
2018/05/11 Python
python如何生成网页验证码
2018/07/28 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
个人自我鉴定范文
2013/10/04 职场文书
求职简历自荐信范文
2013/10/21 职场文书
副厂长岗位职责
2014/02/02 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
信访稳定工作汇报
2014/10/27 职场文书
写给医院的感谢信
2015/01/22 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript