关于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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 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
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
前台js调用后台方法示例
2013/12/02 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
Vue表单实例代码
2016/09/05 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
pygame实现弹力球及其变速效果
2017/07/03 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python3实现飞机大战游戏
2020/04/24 Python
美国折扣网站:jClub
2017/08/07 全球购物
Java面试题汇总
2015/12/06 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
学生自我鉴定模板
2013/12/30 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
个人作风建设总结
2014/10/23 职场文书
教师个人考察材料
2014/12/16 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书