资讯专栏INFORMATION COLUMN

总结开发过程踩到的坑(三)

youkede / 2599人阅读

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

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


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

目录

input 上传同一文件问题

let 的一些用法

限制小数正则

DOM 操作的方法

根据对象字段排序

代码规范

1. input 上传同一文件问题

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

上传文件时,修改 input 上传类型

上传完成后再将上传文件类型恢复

若有form表单,可以通过 reset() 方法重置表单解决

2. let 的一些用法

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

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","");  
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://www.ucloud.cn/yun/51973.html

相关文章

  • 总结开发过程踩到的坑

    摘要:本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外滑稽。 在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远。学会时常总结,不断提升自己。 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,...

    April 评论0 收藏0
  • 总结开发过程踩到的坑

    摘要:本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外滑稽。 在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远。学会时常总结,不断提升自己。 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,...

    daryl 评论0 收藏0
  • 总结开发过程踩到的坑(二)

    摘要:本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外滑稽。 在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远。学会时常总结,不断提升自己。 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的...

    laznrbfe 评论0 收藏0

发表评论

0条评论

youkede

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<