移動端 h5 開發相關內容總結——JavaScript 篇
來自： http://web.jobbole.com/84941/
1.改變頁面標題的內容
有時候我們開發 h5頁面的時候需要動態的去更新title 的名字，這個時候使用
JavaScript
document.titile='修改后的名字';
document.titile='修改后的名字';</div>
就可以解決我們的問題。
或者使用
JavaScript
//當前firefox對 title 參數不支持
history.pushstate(state,title,url);
//當前firefox對 title 參數不支持 history.pushstate(state,title,url);</div>
這種方法不僅能夠修改 title 而且能夠修改 url 的值，并且將這些信息存儲到瀏覽器的歷史堆棧中，當用戶使用返回按鈕的時候能夠得到更加好的體驗。當我們在做一個無刷新更新頁面數據的時候，可以使用這種方法來記錄頁面的狀態，使得頁面能夠回退。
2.日志記錄同步發送請求
有這樣的一個場景：
在做電商類的產品的時候，我們要對每個產品的點擊數進行統計（其實就是出發一個 ajax 請求）。PC端的交互大多數是點擊商品后新開頁面。這個時候 ajax 是 同步發送 或者 異步發送 對統計沒有影響。
但是嵌套在客戶端中，長長是在當前 tab 中跳頁。如果我們仍舊使用異步的 ajax 請求，有請求會被阻斷，統計結果不準確。
3.JavaScript 中 this 相關
這部分內容之前也是看過很多次，但是都不能夠理解深層次的含義。后來看的多了，也就理解了。
JavaScript
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();</pre>
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();
</div>
以上代碼瀏覽器中輸出結果如下：
JavaScript
var BBB=function(){
var a=0;
this.b=1;
return this;
}
var bb= new BBB();</pre>
var BBB=function(){
var a=0;
this.b=1;
return this;
}
var bb= new BBB();
</div>
在瀏覽器中輸入一下的內容查看輸出：
我們對代碼做一下修改，如下：
JavaScript
var BBB=function(){
var a=0;
this.b=1;
}
var bb= new BBB();</pre>
var BBB=function(){
var a=0;
this.b=1;
}
var bb= new BBB();
</div>
與之上相同的輸入，查看一下輸出是什么
由上可知 new 操作符的執行過程：
- 一個新對象被創建。它繼承自 BBB.prototype 。
- 構造函數 BBB 被執行。執行的時候，相應的傳參會被傳入，同時上下文 this 會被指定為這個新實例。 new BBB 等同于 new BBB() , 只能用在不傳遞任何參數的情況。
- 如果構造函數返回了一個“對象”，那么這個對象會取代整個new出來的結果。如果構造函數沒有返回對象，那么new出來的結果為步驟1創建的對象。
一般情況下構造函數不返回任何值，不過用戶如果想覆蓋這個返回值，可以自己選擇返回一個普通對象來覆蓋。當然，返回數組也會覆蓋，因為數組也是對象。
4.JavaScript 中閉包相關
定義在閉包中的函數可以“記憶”它創建時候的環境。
JavaScript
var test=function(string){
return function(){
console.log(string);
}
};
var tt=test();
tt();
var test=function(string){
return function(){
console.log(string);
}
};
var tt=test();
tt();
</div>
JavaScript
//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);
}
};</pre>
//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);
}
};
</div>
5.銷毀事件綁定
我自己在寫 js 的事件綁定的時候也經歷了一個過程，剛開始的時候 onclick ， bind ， live ， delegate , on 這樣一個過程。
之所以會有這樣的需求就是因為我們頁面上的 DOM 是動態更新。比如說，某塊內容是點擊頁面上的內容顯示出來，然后在這塊新出現的內容上使用 click 肯定是滿足不了需求的。
live 和 delegate 屬于較早版本的事件委托（代理事件）的寫法。最新版本的 jquery 都是使用 on 來做代理事件。效率上比 live 和 delegate 更高。
live 是將事件綁定到當前的 document ，如果文檔元素嵌套太深，在冒泡的過程中影響性能。
而 delegate 和 on 的區別就是
JavaScript
jQueryObject.delegate( selector , events [, data ], handler )
//或者
jQueryObject.delegate( selector, eventsMap )
jQueryObject.delegate( selector , events [, data ], handler )
//或者
jQueryObject.delegate( selector, eventsMap )
</div>
JavaScript
jQueryObject.on( events [, selector ] [, data ], handler )
//或者
jQueryObject.on( eventsMap [, selector ] [, data ] )
jQueryObject.on( events [, selector ] [, data ], handler )
//或者
jQueryObject.on( eventsMap [, selector ] [, data ] )
</div>
由此可知，使用 on 的話，子代元素的選擇器是可選的。但是 delegate 的選擇器是必須的。 on 比 delegate 更加的靈活。
很多時候我們都是只聲明事件綁定，而不管事件的銷毀。但是在編寫前端插件的時候，我們需要提供事件銷毀的方法，提供給插件使用者調用。這樣做的好處就是使，使用者對插件更加可控，釋放內存，提供頁面的性能。
JavaScript
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);
};
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);
};
</div>
如果您覺得不錯，請訪問 github（ 點我 ） 地址給我一顆星。謝謝啦！
</div>
本文由用戶 fmqg9864 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！