关于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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
javascript版2048小游戏
Mar 18 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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项目的方法
2006/10/09 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
使用正则替换变量
2007/05/05 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python字典基本操作实例分析
2015/07/11 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python读取表格类型文件代码实例
2020/02/17 Python
keras 多任务多loss实例
2020/06/22 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
中文师范生自荐信
2014/01/30 职场文书
中班中秋节活动反思
2014/02/18 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
课程设计感想范文
2015/08/11 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server