关于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的函数
Jan 31 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
如何在JavaScript中正确处理变量
Dec 25 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue实现图片上传功能
2020/05/28 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
初一英语教学反思
2014/01/11 职场文书
化学教师教学反思
2014/01/17 职场文书
建筑投标担保书
2014/05/20 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
寒假安全保证书
2015/02/28 职场文书
财政局个人年终总结
2015/03/03 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
校车安全管理责任书
2015/05/11 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏