在平常工做中，時常會碰到各類各樣的坑，有時真的以爲不少時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，但願本身可以跨越重重阻礙，越走越遠。學會時常總結，不斷提高本身。css

本文章旨在總結開發過程當中碰到的容易忘記或者比較重要的坑，一方面加深本身對於該部分的理解，另外一方面但願可以分享給你們，知識在於分享，固然踩過的坑也不例外（滑稽）。正則表達式

let 用來聲明變量，所聲明的變量只在 let 命令所在的代碼塊內有效。塊級做用域的出現，實習上使得應用普遍的 IIFE 再也不必要了。
let 聲明變量不存在變量提高，若是在使用以後聲明，值爲 undefined。
let 不容許在相同做用域內重複聲明同一個變量。

在使用的過程，其實還有一個很方便的用法，如須要獲取某一對象的幾個屬性，無需屢次聲明變量：代碼規範

let { attr1, attr2 } = obj

3. 限制小數正則

有一段時間沒有寫正則表達式了，忘得差很少了，因此就把這個算成一個坑吧，需求是這樣的：
須要實現一個輸入框限制輸入內容爲數字，整數位不超過 8 位，小數位不超過 6 位，核心實現方式以下code

var reg = /^\d{0,8}(?:\.\d{1,8})?/g;

"?:" 表示若是不知足條件不保存括號裏的內容
"?" 表示儘量少的匹配知足條件的內容orm

4. DOM 操做的方法

這裏簡單說一下插入節點，最直接的想到的就是 appendChild 和 insertBefore，其實還有一個很實用的方法：對象

insertAdjacentHTML/insertAdjacentText
該方法接收兩個參數，分別是插入位置和插入內容，插入位置參數：排序

beforeBegin: 插入到標籤開始前
afterBegin:插入到標籤開始標記以後
beforeEnd:插入到標籤結束標記前
afterEnd:插入到標籤結束標記後

使用實例：作用域

obj.insertAdjacentHTML("afterEnd","<input type='text'/>");

5. 根據對象字段排序

var objs = {
    f: {
        id: 2,
        name: '2'
    }, 
    a: {
        id: 3,
        name: '3'
    }, 
    c: {
        id: 1,
        name: '1'
    }
};

// 自定義排序規則，按對象的id排序
var sortedObjKeys = Object.keys(objs).sort(function(a, b) {
    return objs[b].id - objs[a].id;
});

// 按默認排序規則，按對象的key排序
var sortedObjKeys = Object.keys(objs).sort();

for (var index in sortedObjKeys) {
    console.log(sortedObjKeys[index]);
    console.log(objs[sortedObjKeys[index]]);
    console.log('----------');
}

6. 代碼規範

其實代碼規範這個問題很重要，卻一直被本身忽視，這一方面也一直很薄弱，這裏簡單說一說 css。

實際開發中，當代碼量達到必定程度時，有一個好的規範的代碼就顯得尤其重要了，一樣的雜亂無章的代碼也會影響開發效率，不利於代碼複用，對於後期的維護和項目的交接也是一場災難。

樣式命名
儘可能使用通俗易懂的名字，避免字母加數字的組合，作到見名知意。如左側導航欄，能夠這樣命名：
容器： .l-nav-container
每一項： .l-nav-item
是否使用 reset
根據實際開發需求來進行判斷是否有必要使用 reset 重置瀏覽器默認樣式，或者嘗試使用 reset 的替代方案 Normalize。
樣式歸類
能夠複用，後續可能用到的樣式，儘可能放到公共的文件中，其它的樣式能夠按照功能來進行劃分。

總結開發過程踩到的坑（三）

目錄

1. input 上傳同一文件問題

2. let 的一些用法

3. 限制小數正則

4. DOM 操做的方法

5. 根據對象字段排序

6. 代碼規範