总结开辟历程踩到的坑（三）

2024年2月16日 135次阅读来源: 水杯中的大海

在一样平常工作中，经常会遇到林林总总的坑，偶然真的以为许多时刻开辟的履历都是踩坑踩出来的。在通往大牛的道路上，愿望本身能够逾越重重障碍，越走越远。学会经常总结，不停提拔本身。

本文章旨在总结开辟历程当中遇到的轻易遗忘或许比较主要的坑，一方面加深本身关于该部份的明白，另一方面愿望能够分享给人人，学问在于分享，固然踩过的坑也不破例（诙谐）。

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. 代码范例