在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。

本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外（滑稽）。

目录

1. input 上传同一文件问题
2. let 的一些用法
3. 限制小数正则
4. DOM 操作的方法
5. 根据对象字段排序
6. 代码规范

1. input 上传同一文件问题

这是一个常在开发中碰到的问题，试了网上很多方法，最简单的方法：

1. 上传文件时，修改 input 上传类型
2. 上传完成后再将上传文件类型恢复
3. 若有form表单，可以通过 reset() 方法重置表单解决

2. let 的一些用法

先来说说 let 比较常见的特性：

1. let 用来声明变量，所声明的变量只在 let 命令所在的代码块内有效。块级作用域的出现，实习上使得应用广泛的 IIFE 不再必要了。
2. let 声明变量不存在变量提升，如果在使用之后声明，值为 undefined。
3. let 不允许在相同作用域内重复声明同一个变量。

在使用的过程，其实还有一个很方便的用法，如需要获取某一对象的几个属性，无需多次声明变量：

let { attr1, attr2 } = obj

3. 限制小数正则

有一段时间没有写正则表达式了，忘得差不多了，所以就把这个算成一个坑吧，需求是这样的：
需要实现一个输入框限制输入内容为数字，整数位不超过 8 位，小数位不超过 6 位，核心实现方式如下

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

“?:” 表示如果不满足条件不保存括号里的内容
“?” 表示尽可能少的匹配满足条件的内容

4. DOM 操作的方法

这里简单说一下插入节点，最直接的想到的就是 appendChild 和 insertBefore，其实还有一个很实用的方法：

insertAdjacentHTML/insertAdjacentText
该方法接收两个参数，分别是插入位置和插入内容，插入位置参数：

1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. 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。

• 样式归类

  可以复用，后续可能用到的样式，尽量放到公共的文件中，其它的样式可以按照功能来进行划分。