移動端 h5 開發相關內容總結——JavaScript 篇

標籤：

1.改變頁面標題的內容

有時候我們開發 h5頁面的時候需要動態去更新title 的名字，這個時候使用

    document.titile=‘修改後的名字‘;

就可以解決我們的問題。

或者使用

    //當前firefox對 title 參數不支援    history.pushstate(state,title,url);

這種方法不僅能夠修改 title 而且能夠修改 url 的值，並且將這些資訊儲存到瀏覽器的曆史堆棧中，當使用者使用返回按鈕的時候能夠得到更加好的體驗。
當我們在做一個無重新整理更新頁面資料的時候，可以使用這種方法來記錄頁面的狀態，使得頁面能夠回退。

2.日誌記錄同步發送請求

有這樣的一個情境：
在做電商類的產品的時候，我們要對每個產品的點擊數進行統計（其實就是出發一個ajax請求）。PC端的互動大多數是點擊商品後新開頁面。這個時候ajax是同步發送或者非同步發送對統計沒有影響。
但是嵌套在用戶端中，長長是在當前 tab 中跳頁。如果我們仍舊使用非同步ajax 請求，有請求會被阻斷，統計結果不準確。

3.JavaScript 中 this 相關

這部分內容之前也是看過很多次，但是都不能夠理解深層次的含義。後來看的多了，也就理解了。

var ab = {    ‘a‘: 1,    ‘b‘: 2,    ‘c‘: 3,    abc:function(){        // 對象的方法中，this是綁定的當前對象        var that=this;        console.log(‘abc‘);        var aaa=function(){            //that指向的是當前對象            console.log(that.a);            //函數中this的值綁定的是全域的window對象            console.log(this);        };        aaa();    }};console.log(‘---------‘);ab.abc();

以上代碼瀏覽器中輸出結果如下：

    var BBB=function(){        var a=0;        this.b=1;        return this;    }    var bb= new BBB();

在瀏覽器中輸入一下的內容查看輸出：

我們對代碼做一下修改，如下：

    var BBB=function(){        var a=0;        this.b=1;    }    var bb= new BBB();

與之上相同的輸入，查看一下輸出是什麼

由上可知 new 操作符的執行過程：

1. 一個新對象被建立。它繼承自BBB.prototype。
2. 建構函式 BBB 被執行。執行的時候，相應的傳參會被傳入，同時上下文this會被指定為這個新執行個體。new BBB 等同於new BBB(), 只能用在不傳遞任何參數的情況。

3. 如果建構函式返回了一個“對象”，那麼這個對象會取代整個new出來的結果。如果建構函式沒有返回對象，那麼new出來的結果為步驟1建立的對象。

   一般情況下建構函式不返回任何值，不過使用者如果想覆蓋這個傳回值，可以自己選擇返回一個普通對象來覆蓋。當然，返回數組也會覆蓋，因為數組也是對象。

4.JavaScript 中閉包相關

定義在閉包中的函數可以“記憶”它建立時候的環境。

var test=function(string){    return function(){        console.log(string);    }};var tt=test();tt();

//li列表點擊每一行 顯示當前的行數 var add_li_event=function(node){    var helper=function(i){        return function(e){            alert(i);        }    };    for (var i = 0, len =node.length; i < len; i++) {       node[i].onclick=helper(i);     }};

5.銷毀事件綁定

我自己在寫 js 的事件綁定的時候也經曆了一個過程，剛開始的時候onclick，bind，live，delegate,on 這樣一個過程。

之所以會有這樣的需求就是因為我們頁面上的 DOM 是動態更新。比如說，某塊內容是點擊頁面上的內容顯示出來，然後在這塊新出現的內容上使用click肯定是滿足不了需求的。

live 和delegate 屬於較早版本的事件委託（代理事件）的寫法。最新版本的 jquery 都是使用on 來做代理事件。效率上比 live 和 delegate更高。

live是將事件綁定到當前的document ，如果文件項目嵌套太深，在冒泡的過程中影響效能。
而 delegate和on 的區別就是

    jQueryObject.delegate( selector , events [, data ], handler )    //或者    jQueryObject.delegate( selector, eventsMap )

    jQueryObject.on( events [, selector ] [, data ], handler )    //或者    jQueryObject.on( eventsMap [, selector ] [, data ] )

由此可知，使用on的話，子代元素的選取器是可選的。但是 delegate的選取器是必須的。on比delegate更加的靈活。

很多時候我們都是只聲明事件綁定，而不管事件的銷毀。但是在編寫前端外掛程式的時候，我們需要提供事件銷毀的方法，提供給外掛程式使用者調用。這樣做的好處就是使，使用者對外掛程式更加可控，釋放記憶體，提供頁面的效能。

    var that={};    $(‘.event_dom‘).on(‘click‘,‘.childK_dom‘,function(){});    $(window).on(‘scroll‘,scrollEvent);    var scrollEvent=function(){};    //事件銷毀    that.desrory=function(){        $(‘.event_dom‘).off();        //window 方法的銷毀必須使用事件名稱和回呼函數,主要是 window 上可能綁定這系統自訂的事件和回掉        $(window).off(‘scroll‘,scrollEvent);    };

如果您覺得不錯，請訪問 github（點我） 地址給我一顆星。謝謝啦！

移動端 h5 開發相關內容總結——JavaScript 篇