前端開發個人筆記，那些小的知識點（持續更新）

2015年2月最後一天開始更新這篇部落格。

這篇部落格會一直更新，存放一些平時看到的前端開發知識小點。這些知識點如果單獨寫一篇部落格或者随筆又太占地方了，是以就聚合在一起。寫的目的一是以免自己忘記，正所謂好記性不如爛筆頭，二是也可以分享給大家。

==================== 正文開始 ===========================

parseInt("10") => parseInt("010", 10) => 10
parseInt("010") => parseInt("010", 8) => 8    // 老版本的IE
parseInt("0x10") => parseInt("010", 16) => 16    // 全部浏覽器      

是以用parseInt的時候一定要指定進制。

移動端通過判斷touchstart和touchmove內插補點來判斷滑動的方向，還需要考慮滑動角度的問題，或者使用滑動判斷的插件。

數組的sort是按照ASCII字母排序，是以[1, 2, 11, 123, 22].sort(); 傳回的結果是[1, 11, 123, 2, 22]。如果需要按大小排序，那麼需要這麼寫

[1, 2, 11, 123, 22].sort(function(a, b){
    return a - b;
});      

減少重繪，提高性能的要點

1.避免在document上直接進行頻繁的DOM操作，如果确實需要可以采用off-document的方式進行，具體的方法包括但不完全包括以下幾種： 

(1). 先将元素從document中删除，完成修改後再把元素放回原來的位置 

(2). 将元素的display設定為”none”，完成修改後再把display修改為原來的值 

(3). 如果需要建立多個DOM節點，可以使用DocumentFragment建立完後一次性的加入document 

2.集中修改樣式 

(1). 盡可能少的修改元素style上的屬性 

(2). 盡量通過修改className來修改樣式 

(3). 通過cssText屬性來設定樣式值 

3. 緩存Layout屬性值 

對于Layout屬性中非引用類型的值（數字型），如果需要多次通路則可以在一次通路時先存儲到局部變量中，之後都使用局部變量，這樣可以避免每次讀取屬性時造成浏覽器的渲染。 

var width = el.offsetWidth;

var scrollLeft = el.scrollLeft; 

4.設定元素的position為absolute或fixed 

在元素的position為static和relative時，元素處于DOM樹結構當中，當對元素的某個操作需要重新渲染時，浏覽器會渲染整個頁面。将元素的position設定為absolute和fixed可以使元素從DOM樹結構中脫離出來獨立的存在，而浏覽器在需要渲染時隻需要渲染該元素以及位于該元素下方的元素，進而在某種程度上縮短浏覽器渲染時間，這在當今越來越多的Javascript動畫方面尤其值得考慮。

數組（Array）的splice方法可以删除，插入，替換元素。三個參數分别是（起始位置， 删除項數， 插入元素）。如果說對資料操作是增删改查，那麼這個方法直接實作了增、删、改。是數組操作的一個重要方法。

TCP/IP 是傳輸層協定。 socket是對TCP/IP的封裝，提供了一些方法可以更友善的直接操作資料。而資料格式等一般自己去定義。

HTTP在TCP/IP之上的應用層協定，實作HTTP協定的工具（比如浏覽器）對資訊進行封裝， 然後走TCP/IP協定。

關系相當于 HTTP(浏覽器實作) -> TCP/IP（作業系統實作）在它們之間有一個socket，用來一般傳輸資料，可以把資料格式定義成和HTTP一樣，那麼就相當于socket實作HTTP。

IE模拟DOMContentLoaded，兩個方法

1：一種是建立空script标簽，屬性擁有defer，然後待onreadystatechange為complete時激發DOMContentLoaded

2：一種是通過調用IE私有方法doScroll('left')的原理去判斷DOMContentLoaded

HTTP常見狀态碼

200 / 204（成功，但是無需傳回值）

301（永久重定向） / 302（臨時重定向） / 304 

400 （bad request）/ 403 （forbidden）/ 404

500 / 502(網關問題) / 503（伺服器繁忙） / 504(逾時)

JavaScript數組淺拷貝常見的兩種方法

方法一：slice。 var array = [1, 2, 3].slice(0);

方法二：contact。 var array = [1, 2, 3].concat();

移動端單頁宣傳頁開發方法

單頁宣傳頁就是微信中經常看到的那種，一進去看到一個頁面，然後滑動一下看到第二個，再滑動看到下一個這種。

這裡簡單記錄下通用方法流程

1：分析設計圖，指出不合理部分（比如各種螢幕尺寸是否考慮，橫屏豎屏是否考慮等）

2：确定一下尺寸及範圍（比如常見的320*180 、640*960）等

3：頁面如果圖檔資源過多，可以先做一個loading動畫，然後異步去加載圖檔，等圖檔加載完再開始第一屏。（因為移動端網速有可能很慢，如果滑動下圖檔還沒有加載出來，就體驗太差了）

4：js計算螢幕尺寸，并且把相應的div設定成滿屏（這裡滿屏是指視口的大小，是以設計圖需要考慮微信自己的導航、topbar這些東西占有的位置）。然後背景圖通過background-size來填滿div。

5：展示第一屏，加點動畫

6：如何設定動畫：動畫主要就是transition和animation。差別主要就是transition隻能設定開始結束狀态，animation可以設定多個狀态，還可以設定循環等，簡而言之，animation比transition強大很多。

加入動畫的常見方法就是就是加一個類名，然後這個類型下是定義了另一個狀态的，然後因為定義了transition，就有動畫了。

比如 div{top: 0;opacity: 0;}然後有1s的transition，接着給它加一個類test，那麼如果這樣定義test。div.test{top: 10px; opacity: 1;}那麼便會有一個漸顯和從上往下的動畫了。

7：接下來便是向上滑，這裡首先可以用一些現成的手勢插件比如 hammer.js/swipe 等等。如果是自己弄，那麼有幾點要注意，

首先，通過判斷touchstart和touchmove來判斷滑動的距離等。然後距離太短可以忽略，也許是使用者不小心碰了一下，距離到一定程度，要判斷下角度，如果在45°到135°之間，才是向上滑，否則認為是向下或者兩側滑。

8：載入到了下一屏，重複上面第5點開始的工作。

移動端使用rem時候動态設定html字型大小

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));