总结开发过程踩到的坑（三）

2024年5月12日 137次阅读来源: 水杯中的大海

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

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

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

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

let { attr1, attr2 } = obj

3. 限制小数正则

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

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

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

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。
样式归类
可以复用，后续可能用到的样式，尽量放到公共的文件中，其它的样式可以按照功能来进行划分。

    原文作者：水杯中的大海
    原文地址: https://segmentfault.com/a/1190000013642200
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网

总结开发过程踩到的坑（三）

目录

1. input 上传同一文件问题

2. let 的一些用法

3. 限制小数正则

4. DOM 操作的方法

5. 根据对象字段排序

6. 代码规范