資訊專欄INFORMATION COLUMN
摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。
在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。
本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外（滑稽）。
目錄input 上傳同一文件問題
let 的一些用法
限制小數(shù)正則
DOM 操作的方法
根據(jù)對(duì)象字段排序
代碼規(guī)范
1. input 上傳同一文件問題這是一個(gè)常在開發(fā)中碰到的問題，試了網(wǎng)上很多方法，最簡(jiǎn)單的方法：
上傳文件時(shí)，修改 input 上傳類型
上傳完成后再將上傳文件類型恢復(fù)
若有form表單，可以通過 reset() 方法重置表單解決
2. let 的一些用法先來說說 let 比較常見的特性：
let 用來聲明變量，所聲明的變量只在 let 命令所在的代碼塊內(nèi)有效。塊級(jí)作用域的出現(xiàn)，實(shí)習(xí)上使得應(yīng)用廣泛的 IIFE 不再必要了。
let 聲明變量不存在變量提升，如果在使用之后聲明，值為 undefined。
let 不允許在相同作用域內(nèi)重復(fù)聲明同一個(gè)變量。
在使用的過程，其實(shí)還有一個(gè)很方便的用法，如需要獲取某一對(duì)象的幾個(gè)屬性，無需多次聲明變量：
let { attr1, attr2 } = obj
3. 限制小數(shù)正則
有一段時(shí)間沒有寫正則表達(dá)式了，忘得差不多了，所以就把這個(gè)算成一個(gè)坑吧，需求是這樣的：
需要實(shí)現(xiàn)一個(gè)輸入框限制輸入內(nèi)容為數(shù)字，整數(shù)位不超過 8 位，小數(shù)位不超過 6 位，核心實(shí)現(xiàn)方式如下
var reg = /^d{0,8}(?:.d{1,8})?/g;
"?:" 表示如果不滿足條件不保存括號(hào)里的內(nèi)容
"?" 表示盡可能少的匹配滿足條件的內(nèi)容
這里簡(jiǎn)單說一下插入節(jié)點(diǎn)，最直接的想到的就是 appendChild 和 insertBefore，其實(shí)還有一個(gè)很實(shí)用的方法：
insertAdjacentHTML/insertAdjacentText
該方法接收兩個(gè)參數(shù)，分別是插入位置和插入內(nèi)容，插入位置參數(shù)：
beforeBegin: 插入到標(biāo)簽開始前
afterBegin:插入到標(biāo)簽開始標(biāo)記之后
beforeEnd:插入到標(biāo)簽結(jié)束標(biāo)記前
afterEnd:插入到標(biāo)簽結(jié)束標(biāo)記后
使用實(shí)例：
obj.insertAdjacentHTML("afterEnd","");
5. 根據(jù)對(duì)象字段排序
var objs = {
f: {
id: 2,
name: "2"
},
a: {
id: 3,
name: "3"
},
c: {
id: 1,
name: "1"
}
};
// 自定義排序規(guī)則，按對(duì)象的id排序
var sortedObjKeys = Object.keys(objs).sort(function(a, b) {
return objs[b].id - objs[a].id;
});
// 按默認(rèn)排序規(guī)則，按對(duì)象的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ī)范
其實(shí)代碼規(guī)范這個(gè)問題很重要，卻一直被自己忽視，這一方面也一直很薄弱，這里簡(jiǎn)單說一說 css。
實(shí)際開發(fā)中，當(dāng)代碼量達(dá)到一定程度時(shí)，有一個(gè)好的規(guī)范的代碼就顯得尤為重要了，同樣的雜亂無章的代碼也會(huì)影響開發(fā)效率，不利于代碼復(fù)用，對(duì)于后期的維護(hù)和項(xiàng)目的交接也是一場(chǎng)災(zāi)難。
樣式命名
盡量使用通俗易懂的名字，避免字母加數(shù)字的組合，做到見名知意。如左側(cè)導(dǎo)航欄，可以這樣命名：
容器： .l-nav-container
每一項(xiàng)： .l-nav-item
是否使用 reset
根據(jù)實(shí)際開發(fā)需求來進(jìn)行判斷是否有必要使用 reset 重置瀏覽器默認(rèn)樣式，或者嘗試使用 reset 的替代方案 Normalize。
樣式歸類
可以復(fù)用，后續(xù)可能用到的樣式，盡量放到公共的文件中，其它的樣式可以按照功能來進(jìn)行劃分。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/93326.html
摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...
摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...
摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的...
閱讀 1672·2021-10-29 13:11
閱讀 835·2021-09-22 10:02
閱讀 1696·2021-08-20 09:35
閱讀 1557·2019-08-30 15:54
閱讀 2464·2019-08-30 15:44
閱讀 1388·2019-08-29 16:52
閱讀 1103·2019-08-23 12:56
閱讀 762·2019-08-22 15:16
