前端開發個人筆記，那些小的知識點（持續更新）
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
(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));
浙公網安備 33010602011771號