在一样平常工作中,经常会遇到林林总总的坑,偶然真的以为许多时刻开辟的履历都是踩坑踩出来的。在通往大牛的道路上,愿望本身能够逾越重重障碍,越走越远。学会经常总结,不停提拔本身。
本文章旨在总结开辟历程当中遇到的轻易遗忘或许比较主要的坑,一方面加深本身关于该部份的明白,另一方面愿望能够分享给人人,学问在于分享,固然踩过的坑也不破例(诙谐)。
目次
- 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","<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。
- 款式归类
能够复用,后续能够用到的款式,只管放到大众的文件中,别的的款式能够根据功能来举行分别。