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

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));