關于jquery hashChange反復添加hash之后造成多次觸發(fā)事件的bug

        jquery hashChange是一個監(jiān)聽瀏覽器hash的改變，根據(jù)hash的改變進行對應的觸發(fā)對應事件的插件。

       讀了事件加載的源碼才理解了其中的緣故，這之間踩過一些坑，寫下來希望能幫到之后用它的人。

        hashchange的主要的原理是監(jiān)聽瀏覽器的hashchange事件然后將事件進行分發(fā)，利用ajax處理事物的一種機制。

        最近項目用到了這個插件，我們的項目用到了jqeury的ajax update進行異步的加載頁面并把頁面的內(nèi)同append到對應的區(qū)域中去，起先我以為是ajaxUpdate加載頁面時把頁面的js反復的加載導致我的頁面出現(xiàn)觸發(fā)兩次或者更多次事件，所以再進行該頁面的下一步操作的時候會發(fā)現(xiàn)所有的方法都對應到了一個dom層，如果是提交表單會同時提交好多次。并且此時后臺返回的數(shù)據(jù)也會出現(xiàn)異常。

關于hashchange添加hash參數(shù)的時候，原來的代碼是這么寫的：

$.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參數(shù)的時候并不會進行排重，所以加了很多的hash參數(shù)，然后就會導致觸發(fā)一個事件的時候，觸發(fā)很多次方法

$.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產(chǎn)生多次觸發(fā)事件的情況了。

        這個代碼應該還有優(yōu)化的空間比如在判斷是否存在的問題上可以使用jquery的isInArray方法可能更加直觀。如果更好的改進方案請聯(lián)系，大家一起前進。