亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于jquery hashChange反復添加hash問題

標簽:
JQuery

        jquery hashChange是一个监听浏览器hash的改变,根据hash的改变进行对应的触发对应事件的插件。

       读了事件加载的源码才理解了其中的缘故,这之间踩过一些坑,写下来希望能帮到之后用它的人。


        hashchange的主要的原理是监听浏览器的hashchange事件然后将事件进行分发,利用ajax处理事物的一种机制。

        最近项目用到了这个插件,我们的项目用到了jqeury的ajax update进行异步的加载页面并把页面的内同append到对应的区域中去,起先我以为是ajaxUpdate加载页面时把页面的js反复的加载导致我的页面出现触发两次或者更多次事件,所以再进行该页面的下一步操作的时候会发现所有的方法都对应到了一个dom层,如果是提交表单会同时提交好多次。并且此时后台返回的数据也会出现异常。

关于hashchange添加hash参数的时候,原来的代码是这么写的:


$.fn.hashchange = function(options) {    // options array passed    if (Object.prototype.toString.call(options) === "[object Array]") {      for (var i = options.length - 1; i >= 0; i--) {        methods.init.apply(this, [options[i]]);      }      return this;    }    // single option passed    return methods.init.apply(this, arguments);  };
查看源码才知道原来它在添加hash参数的时候并不会进行排重,所以加了很多的hash参数,然后就会导致触发一个事件的时候,触发很多次方法$.fn.hashchange = function (options) {    //by chenjianhui    var self = this;    var _options = window._options;    // options array passed    if (Object.prototype.toString.call(options) === "[object Array]") {        //for (var i = options.length - 1; i >= 0; i--) {        //    methods.init.apply(this, [options[i]]);        //}        //如果已有的option为空        if (_options == undefined) {            window._options = new Array();            for (var i = options.length - 1; i >= 0; i--) {                window._options.push(options[i]);                methods.init.apply(this, [options[i]]);            }        } else {            for (var i = options.length - 1; i >= 0; i--) {                var isHas = false;                for (var j in _options) {                    if (_options[j].hash == options[i].hash) {                        isHas = true;                    }                }                if(!isHas){                    window._options.push(options[i]);                    methods.init.apply(this, [options[i]]);                }            }        }        return this;    }

        通过以上的代码我将传进来的option临时放到了windows对象里面,因为这些值应该属于一个全局使用的一个值。


        至此之后添加进来的hash就不会再有重复的hash值,这样就不会造成反复添加hash然后一个hash产生多次触发事件的情况了。

        这个代码应该还有优化的空间比如在判断是否存在的问题上可以使用jquery的isInArray方法可能更加直观。如果更好的改进方案请联系,大家一起前进。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
移動開發工程師
手記
粉絲
18
獲贊與收藏
136

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消