1.改變頁面標題的內容
有時候我們開發 h5頁面的時候需要動態的去更新title 的名字，這個時候使用
|
1 |
document.title='修改後的名字'; |
就可以解決我們的問題。
或者使用
|
1 2 |
//當前firefox對 title 引數不支援 history.pushstate(state,title,url); |
這種方法不僅能夠修改 title 而且能夠修改 url 的值，並且將這些資訊儲存到瀏覽器的歷史堆疊中，當使用者使用返回按鈕的時候能夠得到更加好的體驗。
當我們在做一個無重新整理更新頁面資料的時候，可以使用這種方法來記錄頁面的狀態，使得頁面能夠回退。
2.日誌記錄同步傳送請求
有這樣的一個場景：
在做電商類的產品的時候，我們要對每個產品的點選數進行統計（其實就是出發一個ajax請求）。PC端的互動大多數是點選商品後新開頁面。這個時候ajax是同步傳送或者非同步傳送對統計沒有影響。
但是巢狀在客戶端中，長長是在當前 tab 中跳頁。如果我們仍舊使用非同步的ajax 請求，有請求會被阻斷，統計結果不準確。
3.JavaScript 中 this 相關
這部分內容之前也是看過很多次，但是都不能夠理解深層次的含義。後來看的多了，也就理解了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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(); |
以上程式碼瀏覽器中輸出結果如下：
|
1 2 3 4 5 6 7 |
var BBB=function(){ var a=0; this.b=1; return this; } var bb= new BBB(); |
在瀏覽器中輸入一下的內容檢視輸出：
我們對程式碼做一下修改，如下：
|
1 2 3 4 5 6 |
var BBB=function(){ var a=0; this.b=1; } var bb= new BBB(); |
與之上相同的輸入，檢視一下輸出是什麼
由上可知 new 操作符的執行過程：
- 一個新物件被建立。它繼承自
BBB.prototype。 - 建構函式
BBB被執行。執行的時候，相應的傳參會被傳入，同時上下文this會被指定為這個新例項。new BBB等同於new BBB(), 只能用在不傳遞任何引數的情況。 - 如果建構函式返回了一個“物件”，那麼這個物件會取代整個new出來的結果。如果建構函式沒有返回物件，那麼new出來的結果為步驟1建立的物件。
一般情況下建構函式不返回任何值，不過使用者如果想覆蓋這個返回值，可以自己選擇返回一個普通物件來覆蓋。當然，返回陣列也會覆蓋，因為陣列也是物件。
4.JavaScript 中閉包相關
定義在閉包中的函式可以“記憶”它建立時候的環境。
|
1 2 3 4 5 6 7 |
var test=function(string){ return function(){ console.log(string); } }; var tt=test(); tt(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//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 的區別就是
|
1 2 3 |
jQueryObject.delegate( selector , events [, data ], handler ) //或者 jQueryObject.delegate( selector, eventsMap ) |
|
1 2 3 |
jQueryObject.on( events [, selector ] [, data ], handler ) //或者 jQueryObject.on( eventsMap [, selector ] [, data ] ) |
由此可知，使用on的話，子代元素的選擇器是可選的。但是 delegate的選擇器是必須的。on比delegate更加的靈活。
很多時候我們都是隻宣告事件繫結，而不管事件的銷燬。但是在編寫前端外掛的時候，我們需要提供事件銷燬的方法，提供給外掛使用者呼叫。這樣做的好處就是使，使用者對外掛更加可控，釋放記憶體，提供頁面的效能。
|
1 2 3 4 5 6 7 8 9 10 |
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（點我） 地址給我一顆星。謝謝啦！
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
