您好,登錄后才能下訂單哦!
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方法可能更加直觀。如果更好的改進方案請聯系,大家一起前進。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。