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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機(jī)域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、花溪網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

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

關(guā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ù)的時候并不會進(jìn)行排重，所以加了很多的hash參數(shù)，然后就會導(dǎo)致觸發(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;
    }

        通過以上的代碼我將傳進(jìn)來的option臨時放到了windows對象里面，因為這些值應(yīng)該屬于一個全局使用的一個值。

        至此之后添加進(jìn)來的hash就不會再有重復(fù)的hash值，這樣就不會造成反復(fù)添加hash然后一個hash產(chǎn)生多次觸發(fā)事件的情況了。

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