关于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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
javascript实现弹出层效果
Dec 10 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
基于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的抽象类和抽象方法以及接口总结
2019/03/15 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python实现图书借阅系统
2019/02/20 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python动态规划算法实例详解
2020/11/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
日语系毕业生推荐信
2013/11/11 职场文书
自我评价如何写好?
2014/01/05 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
安全生产宣传标语
2014/06/06 职场文书
个人查摆剖析材料
2014/10/04 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
使用Python开发冰球小游戏
2022/04/30 Python
Nginx 常用配置
2022/05/15 Servers