總結開發(fā)過程踩到的坑（三）

April 發(fā)布于2019-08-30 14:06 / 1547人閱讀

摘要：本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。

在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。

本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外（滑稽）。

input 上傳同一文件問題

let 的一些用法

限制小數(shù)正則

DOM 操作的方法

根據(jù)對象字段排序

代碼規(guī)范

1. input 上傳同一文件問題

這是一個常在開發(fā)中碰到的問題，試了網(wǎng)上很多方法，最簡單的方法：

上傳文件時，修改 input 上傳類型

上傳完成后再將上傳文件類型恢復

若有form表單，可以通過 reset() 方法重置表單解決

2. let 的一些用法

先來說說 let 比較常見的特性：

let 用來聲明變量，所聲明的變量只在 let 命令所在的代碼塊內有效。塊級作用域的出現(xiàn)，實習上使得應用廣泛的 IIFE 不再必要了。

let 聲明變量不存在變量提升，如果在使用之后聲明，值為 undefined。

let 不允許在相同作用域內重復聲明同一個變量。

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

let { attr1, attr2 } = obj

3. 限制小數(shù)正則

有一段時間沒有寫正則表達式了，忘得差不多了，所以就把這個算成一個坑吧，需求是這樣的：
需要實現(xiàn)一個輸入框限制輸入內容為數(shù)字，整數(shù)位不超過 8 位，小數(shù)位不超過 6 位，核心實現(xiàn)方式如下

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

"?:" 表示如果不滿足條件不保存括號里的內容
"?" 表示盡可能少的匹配滿足條件的內容

4. DOM 操作的方法

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

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

beforeBegin: 插入到標簽開始前

afterBegin:插入到標簽開始標記之后

beforeEnd:插入到標簽結束標記前

afterEnd:插入到標簽結束標記后

使用實例：

obj.insertAdjacentHTML("afterEnd","");

5. 根據(jù)對象字段排序

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

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

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

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

6. 代碼規(guī)范

其實代碼規(guī)范這個問題很重要，卻一直被自己忽視，這一方面也一直很薄弱，這里簡單說一說 css。

實際開發(fā)中，當代碼量達到一定程度時，有一個好的規(guī)范的代碼就顯得尤為重要了，同樣的雜亂無章的代碼也會影響開發(fā)效率，不利于代碼復用，對于后期的維護和項目的交接也是一場災難。

樣式命名

盡量使用通俗易懂的名字，避免字母加數(shù)字的組合，做到見名知意。如左側導航欄，可以這樣命名：
容器： .l-nav-container
每一項： .l-nav-item

是否使用 reset

根據(jù)實際開發(fā)需求來進行判斷是否有必要使用 reset 重置瀏覽器默認樣式，或者嘗試使用 reset 的替代方案 Normalize。

樣式歸類

可以復用，后續(xù)可能用到的樣式，盡量放到公共的文件中，其它的樣式可以按照功能來進行劃分。

云服務器 GPU云服務器存儲過程總結大學三年php總結 webrtc音視頻開發(fā)總結 android webrtc 音視頻開發(fā)總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115775.html

總結開發(fā)過程踩到的坑（三）

摘要：本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

daryl 2019-08-22 15:16 評論0 收藏0
總結開發(fā)過程踩到的坑（三）

摘要：本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

youkede 2019-08-01 18:41 評論0 收藏0
總結開發(fā)過程踩到的坑（二）

摘要：本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發(fā)的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發(fā)過程中碰到的容易忘記或者比較重要的...

laznrbfe 2019-08-22 14:06 評論0 收藏0