关于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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
实例详解带参数的 npm script
May 28 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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开发框架laravel安装与配置教程
2015/03/13 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python实现快速多线程ping的方法
2015/07/15 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python如何实现视频转代码视频
2019/06/17 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python中的插入排序的简单用法
2021/01/19 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
售后服务承诺书怎么写
2014/05/21 职场文书
建筑工地标语
2014/06/18 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis