总结开辟历程踩到的坑(三)

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

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

目次

  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。

  • 款式归类

    能够复用,后续能够用到的款式,只管放到大众的文件中,别的的款式能够根据功能来举行分别。

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