关于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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
javascript表单验证大全
Aug 12 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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 和 MySQL 基础教程(四)
2006/10/09 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php生成图片验证码的方法
2016/04/15 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python3 拼接字符串的7种方法
2018/09/12 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python3下载抖音视频的完整代码
2019/06/05 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
keras中的History对象用法
2020/06/19 Python
详解python对象之间的交互
2020/09/29 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
大学生职业生涯设计书
2014/01/02 职场文书
大学生演讲稿范文
2014/01/11 职场文书
小学生作文批改评语
2014/12/25 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS