code-review 之前,你应该关注的 JS 代码优化清单
本文主要针对一些 JavaScript 进行优化,使之更加健壮,可读性更强,更以维护。
if 判断的优化
1、最简单的方法:if 判断
let commodity = {phone: '手机',computer: '电脑',television: '电视',gameBoy: '游戏机',
}function price(name) {if (name === commodity.phone) {console.log(1999)} else if (name === commodity.computer) {console.log(9999)} else if (name === commodity.television) {console.log(2999)} else if (name === commodity.gameBoy) {console.log(3999)}
}
price('手机') // 9999
缺点:代码太长了,维护和阅读都很不友好
2、好一点的方法:Switch
let commodity = {phone: '手机',computer: '电脑',television: '电视',gameBoy: '游戏机',
}
const price = (name) => {switch (name) {case commodity.phone:console.log(1999)breakcase commodity.computer:console.log(9999)breakcase commodity.television:console.log(2999)breakcase commodity.gameBoy:console.log(3999)break}
}
price('手机') // 9999
3、更优的方法: 策略模式
策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句。它提供了对开放—封闭原则的完美支持,将算法封装在独立的 strategy 中,使得它们易于切换,易于理解,易于扩展。
const commodity = new Map([['phone', 1999],['computer', 9999],['television', 2999],['gameBoy', 3999],
])const price = (name) => {return commodity.get(name)
}
price('phone') // 1999
includes 的优化
includes
是 ES7 新增的 API,与 indexOf
不同的是 includes
直接返回的是 Boolean
值,indexOf
则 返回的索引值, 数组和字符串都有 includes
方法。
需求:我们来实现一个身份认证方法,通过传入身份 Id 返回对应的验证结果
传统方法
function verifyIdentity(identityId) {if (identityId == 1 || identityId == 2 || identityId == 3 || identityId == 4) {return '你的身份合法,请通行!'} else {return '你的身份不合法'}
}
includes
优化
function verifyIdentity(identityId) {if ([1, 2, 3, 4].includes(identityId)) {return '你的身份合法,请通行!'} else {return '你的身份不合法'}
}
for 循环
在 JavaScript 中,我们可以使用 for()
, while()
, for(in)
,for(of)
几种循环,事实上,这三种循环中 for(in)
的效率极差,因为他需要查询散列键,所以应该尽量少用。
for 循环是最传统的语句,它以变量 i 作为索引,以跟踪访问的位置,对数组进行操作。
var arr = ['a', 'b', 'c']
for (var i = 0; i < arr.length; i++) {console.log(arr[i]) //结果依次a,b,c
}
以上的方法有一个问题:就是当数组的长度到达百万级时,arr.length
就要计算一百万次,这是相当耗性能的。所以可以采用以下方法就行改良。
var arr = ['a', 'b', 'c']
for (var i = 0, length = arr.length; i < length; i++) {console.log(arr[i]) //结果依次a,b,c
}
此时 arr.length
只需要计算一次,优化了性能。
for-in
一般用来来遍历对象的属性的,不过属性需要 enumerable
(可枚举)才能被读取到。同时 for-in
也可以遍历数组,遍历数组的时候遍历的是数组的下标值。
var obj = { 0: 'a', 1: 'b', 2: 'c' }
for (var key in obj) {console.log(key) //结果为依次为0,1,2
}var arr = ['a', 'b', 'c']
for (var key in a) {console.log(key) //结果为依次为0,1,2
}
for-of
语句看着有点像 for-in
语句,但是和 for-of
语句不同的是它不可以循环对象,只能循环数组。
var arr = ['a', 'b', 'c']
for (var value of arr) {console.log(value) // 结果依次为a,b,c
}
for-of
比 for-in
循环遍历数组更好。for-of
只要具有 Iterator
接口的数据结构,都可以使用它迭代成员。它直接读取的是键值。for-in
需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到。且 for-in
的 key
是 String
类型,有转换过程,开销比较大。
所以在开发过程中循环数组尽量避免使用 for-in
。
数组去重
数组去重是实际开发处理数据中经常遇到的,方法有很多,这里就不一一例举了。
1、最传统的方法:利用数组的 indexOf
下标属性来查询。
function unique4(arr) {var newArr = []for (var i = 0; i < arr.length; i++) {if (newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i])}}return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]
2、优化:利用 ES6 的 Set
方法。
Set
本身是一个构造函数,用来生成 Set
数据结构。Set
函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。Set
对象允许你存储任何类型的值,无论是原始值或者是对象引用。它类似于数组,但是成员的值都是唯一的,没有重复的值。
function unique4(arr) {return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]
箭头函数
箭头函数表达式的语法比函数表达式更简洁。所以在开发中更推荐使用箭头函数。特别是在 vue
项目中,使用箭头函数不需要在更 this
重新赋一个变量。
// 使用functions
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map(function (x) {return x * x
})
console.log(arrFunc)// 使用箭头函数
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map((x) => x * x)
要注意的是,箭头函数不绑定 arguments
,取而代之用 rest
参数…解决。
// 不能使用 arguments
let fun1 = (b) => {console.log(arguments)
}
fun1(2, 92, 32, 32) // Uncaught ReferenceError: arguments is not defined// 使用rest 参数
let fun2 = (...c) => {console.log(c)
}
fun2(3, 82, 32, 11323) // [3, 82, 32, 11323]
Dom 的创建
创建多个 dom 元素时,先将元素 append
到 DocumentFragment
中,最后统一将 DocumentFragment
添加到页面。
常规方法;
for (var i = 0; i < 1000; i++) {var el = document.createElement('p')el.innerHTML = idocument.body.appendChild(el)
}
使用 DocumentFragment
优化多次 append
var frag = document.createDocumentFragment()
for (var i = 0; i < 1000; i++) {var el = document.createElement('p')el.innerHTML = ifrag.appendChild(el)
}
document.body.appendChild(frag)
更优的方法:使用一次 innerHTML
赋值代替构建 dom 元素
var html = []
for (var i = 0; i < 1000; i++) {html.push('<p>' + i + '</p>')
}
document.body.innerHTML = html.join('')
内存泄漏
系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。
引起内存泄漏的原因
全局变量
1、未声明变量或者使用 this
创建的变量(this
的指向是 window
)都会引起内存泄漏
function fn() {a = "Actually, I'm a global variable"
}
fn()function fn() {this.a = "Actually, I'm a global variable"
}
fn()
解决方法:
避免创建全局变量
使用严格模式,在 JavaScript 文件头部或者函数的顶部加上
use strict
。
2、在 vue 单页面应用,声明的全局变量在切换页面的时候没有清空
<div id="home">这里是首页</div>
export default {mounted() {window.test = {// 此处在全局window对象中引用了本页面的dom对象name: 'home',node: document.getElementById('home')}}}
解决方案: 在页面卸载的时候顺便处理掉该引用。
destroyed () {window.test = null // 页面卸载的时候解除引用
}
闭包
闭包引起的内存泄漏原因:闭包可以维持函数内局部变量,使其得不到释放。
function fn() {var a = "I'm a"return function () {console.log(a)}
}
解决:将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除对 dom 的引用。
定时器或事件监听
由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器事件监听,即在页面卸载(关闭)的生命周期函数里,清除定时器。
methods:{resizeFun () {this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128},setTimer() {this.timer = setInterval(() => { })},clearTimer() {//清除定时器clearInterval(this.timer)this.timer = null}
},
mounted() {this.setTimer()window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {window.removeEventListener('resize', this.resizeFun)this.clearTimer()
}
防抖与节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize
、scroll
、mousemove
等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这时候就用到防抖与节流。
案例 1:远程搜索时需要通过接口动态的获取数据,若是每次用户输入都接口请求,是浪费带宽和性能的。
<Select :remote-method="remoteMethod"><Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select><script>
function debounce(fn, wait) {let timeout = nullreturn function () {if (timeout !== null) clearTimeout(timeout)timeout = setTimeout(fn, wait)}
}export default {methods:{remoteMethod:debounce(function (query) {// to do ...}, 200),}
}
<script>
案例 2:持续触发 scroll
事件时,并不立即执行 handle
函数,当 1000 毫秒内没有触发 scroll
事件时,才会延时触发一次 handle
函数。
function debounce(fn, wait) {let timeout = nullreturn function () {if (timeout !== null) clearTimeout(timeout)timeout = setTimeout(fn, wait)}
}
function handle() {console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))
异步加载 js
默认情况下,浏览器是同步加载 js 脚本,解析 html 过程中,遇到 <script>
标签就会停下来,等脚本下载、解析、执行完后,再继续向下解析渲染。
如果 js 文件体积比较大,下载时间就会很长,容易造成浏览器堵塞,浏览器页面会呈现出“白屏”效果,用户会感觉浏览器“卡死了”,没有响应。此时,我们可以让 js 脚本异步加载、执行。
<script src="path/to/home.js" defer></script>
<script src="path/to/home.js" async></script>
上面代码中,<script>
标签分别有 defer
和 async
属性,浏览器识别到这 2 个属性时 js 就会异步加载。也就是说,浏览器不会等待这个脚本下载、执行完毕后再向后执行,而是直接继续向后执行
defer 与 async 区别:
defer:DOM 结构完全生成,以及其他脚本执行完成,才会执行(渲染完再执行)。有多个
defer
脚本时,会按照页面出现的顺序依次加载、执行。async:一旦下载完成,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染(下载完就执行)。有多个
async
脚本时,不能保证按照页面出现顺序加载、执行
作者:lzg9527
juejin.cn/post/6850037282419392526
code-review 之前,你应该关注的 JS 代码优化清单相关推荐
- Alibaba Code代码索引技术实践:为Code Review提供本地IDE的阅读体验
作者:曲径 阿里研发基础设施团队 Code Review在研发流程中非常重要,但Web界面中Code Intelligence能力的缺失改变了原有的代码阅读习惯,又增加了阅读成本.本文将介绍阿 ...
- 腾讯如何做 Code Review的?万字详解!
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱 作者:cheaterlin,腾讯 PCG 后台开发工程师 来自:腾讯技术工程 前言 作 ...
- 前端代码规范(1)谈code review
前端谈code review 一.review代码的认知 1.code review目的 保证代码可读性,一致性 代码层面减少bug,最基本缺少控制判断.异常处理 传播知识+设计讨论. 相信很多人第一 ...
- Google是如何做Code Review的?| CSDN原力计划
作者 | 帅昕 xindoo 编辑 | 屠敏 出品 | CSDN 博客 我和几个小伙伴一起翻译了Google前一段时间放出来的Google's Engineering Practices docume ...
- 刚进美团,就被各种Code Review,真的有必要吗?
点击关注公众号,Java干货及时送达 众所周知,Code Review是开发过程中一个非常重要的环节,但是很多公司或者团队是没有这一环节的,今天笔者结合自己所在团队,浅谈Code Review的价值及 ...
- 刚入职,就被各种 Code Review,真的有必要吗?
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源:juejin.cn/post/ 6882333635 ...
- 有必要做 Code Review 吗???
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料!作者:梨香 链接:https://juejin.im/pos ...
- 你太菜了,竟然不知道Code Review...
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者:宝玉 来源:http://1t.click/aA4h 我 ...
- 从零开始 Code Review,两年实战经验分享!
点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 来源:http://t.cn/RtHE14S 前几天看了<Code Review 程序员的 ...
最新文章
- ArcIMS 投影问题 如何向地图配置文件中添加投影信息(转载)
- python分类预测降低准确率_python实现吴恩达机器学习练习3(多元分类器和神经网络)...
- 怎么让PHP网页显示时有表格的效果,html的table用法(让网页的视觉效果显示出来)...
- Python字符串之'\x00'与空串''的区别
- SAP “麻辣三人行”小厨房|用黑科技“烹制”HR数字料理
- python 实现简单画板_Python图像处理之简单画板实现方法示例
- Python--网页更新监控工具
- 第三届泰迪杯数据挖掘技能赛一等奖总结经验分享
- LM2903器件使用说明
- 十二生肖的相合、相冲、相刑、相害
- word排版案例报告_轻松搞定论文格式,这是 Word 排版的正确姿势
- uPDF:免费功能强大的 PDF 全能工具箱, PDF 文件处理利器
- godaddy php mail,Godaddy空间发送邮件的方法 | Godaddy美国主机中文指南
- 2019校招前端笔试面试题
- 2021年山东省安全员B证考试资料及山东省安全员B证试题及解析
- 符得海与王岱老师合影20121109
- 孔浩java爱酷网_JAVA
- Java语言 学生信息管理系统
- 单闭环调速仿真matlab,利用Matlab仿真平台设计单闭环直流调速系统
- linux 线程切换开销,协程 用户级(内核级)线程 切换开销 协程与异步回调的差异...
热门文章
- 优考试在线考试系统计算机,优考试在线考试系统
- 软件架构整洁之道-读书笔记(3)
- 郑建新 计算机 山西大学商务学院官网,迎新第一天 | 这是送给2020级新商院人的独家记忆...
- 单字java_Java 字串阵列添加单字问题,以下是题目,和自己写的代码,请帮忙看看,谢谢!...
- mapreduce 人话_MapReduce的假人
- MySQL~聚合查询与联合查询(多表查询、复合查询)
- 【ae调整图层】调整图层上的特效会影响到他下面的所有图层
- vue打包-合并chunk
- keep 虚拟路线修改器_“现在的虚拟恋人有多野??太tm可怕了哈哈哈哈哈!”...
- 苹果手机录音在哪里找?1分钟不到,快速学会