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