关于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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
利用javascript中的call实现继承
Jan 22 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript如何写热点图
Dec 08 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 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中http与https跨域共享session的解决方法
2014/12/20 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP数组函数知识汇总
2016/05/12 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python中super函数的用法
2017/11/17 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
技能竞赛活动方案
2014/02/21 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
中文专业自荐书
2014/06/29 职场文书
2014年公务员工作总结
2014/11/18 职场文书
个人工作保证书
2015/02/28 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记