Code-review前端代码优化

所谓无章可循，前端时间在团队code-review中发现，不同开发者在不同时期写的代码可谓五花八门。因此，我们提出了一些相关的代码规范，希望未来能够形成一个团队的编码规范。本文主要优化了一些JavaScript，使其更健壮、更易读、更易维护。gitthub地址：github.com/Michael-lzg...上一篇：code-review前端代码规范if判断优化JavaScript条件语句在我们平时的开发中不可避免的要用到，但是很多时候我们的代码写的并不好，一个一系列的if-else或者多次嵌套的判断会让代码非常臃肿，下面的例子进行了优化。需求：现在有4款产品，分别是手机、电脑、电视、游戏机。当然，每个产品显示的价格是不同的。1、最简单的方法：if判断letcommodity={phone:'手机',computer:'电脑',television:'电视机',gameBoy:'游戏机',}functionprice(name){if(name===commodity.phone){console.log(1999)}elseif(name===commodity.computer){console.log(9999)}elseif(name===commodity.television){console.log(2999)}elseif(name===commodity.gameBoy){console.log(3999)}}price('手机')//9999缺点：代码太长，对维护和阅读不友好2.更好的方法:Switchletcommodity={phone:'手机',computer:'电脑',television:'电视',gameBoy:'游戏机',}constprice=(name)=>{switch(name){casecommodity.phone:console.log(1999)breakcasecommodity.computer:console.log(9999)breakcasecommodity.television:console.log(2999)breakcasecommodity.gameBoy:console.log(3999)break}}price('mobilephone')//99993，更好的方法：策略模式策略模式使用了组合、委托、多态等技术和思想，可以有效避免多个条件选择语句。它对开闭原则提供了完美的支持，将算法封装在独立的策略中，使其易于切换、易于理解、易于扩展。constcommodity=newMap([['phone',1999],['computer',9999],['television',2999],['gameBoy',3999],])constprice=(name)=>{returncommodity.get(name)}price('phone')//1999的优化包括是ES7的新API。和indexOf不同的是includes直接返回布尔值，而indexOf返回索引值，数组和字符String都有includes方法。需求：我们实现一个身份认证方法，通过传入身份Id返回对应的验证结果传统方法functionverifyIdentity(identityId){if(identityId==1||identityId==2||identityId==3||identityId==4){return'您的身份合法，请通过！'}else{return'您的身份无效'}}includes优化函数verifyIdentity(identityId){if([1,2,3,4].includes(identityId)){return'您的身份合法，请通过！'}else{return'你的身份不合法'}}for循环在JavaScript中，我们可以使用for(),while(),for(in),for(in)几种循环，其实就是这三种for的效率(in)in循环极差，因为需要查询hashkey，所以尽量少用。for循环是最传统的语句，它以变量i作为索引对数组进行操作，以跟踪它被访问的位置。vararr=['a','b','c']for(vari=0;ix*x)需要注意的是箭头函数不绑定参数，但使用其余参数...来解决。//不能使用参数letfun1=(b)=>{console.log(arguments)}fun1(2,92,32,32)//UncaughtReferenceError:argumentsisnotdefined//使用剩余参数letfun2=(...c)=>{console.log(c)}fun2(3,82,32,11323)//[3,82,32,11323]Dom创建创建多个dom元素时，首先将元素追加到DocumentFragment，最后将DocumentFragment统一添加到页面中。常规方法；for(vari=0;i<1000;i++){varel=document.createElement('p')el.innerHTML=idocument.body.appendChild(el)}使用DocumentFragment优化多次appendvarfrag=document.createDocumentFragment()for(vari=0;i<1000;i++){varel=document.createElement('p')el.innerHTML=ifrag.appendChild(el)}document.body.appendChild(frag)更好方法：使用innerHTML赋值而不是构建dom元素varhtml=[]for(vari=0;i<1000;i++){html.push('

'+i+'

')}document.body.innerHTML=html.join('')内存泄漏系统进程不再使用而没有及时释放的内存称为内存泄漏。当内存占用越来越高时，轻则影响系统性能，重则导致进程崩溃。内存泄露的原因全局变量1、未声明的变量、或者使用this（this指向window）创建的变量都会导致内存泄露){this.a="Actually,I'maglobalvariable"}fn()解决方法：避免创建全局变量，使用严格模式，在JavaScript文件头或函数的顶部加上usestrict。2.vue单页面应用中，切换页面时声明的全局变量没有被清除。解决方法：在页面卸载时顺便处理掉引用。destroyed(){window.test=null//页面卸载时解引用}Closure闭包导致内存泄漏的原因：闭包可以在函数中维护局部变量，使其无法被释放。functionfn(){vara="I'ma"returnfunction(){console.log(a)}}解决方法：在外部定义事件处理函数，释放闭包，或者定义事件处理函数的外部函数,删除对dom的引用。定时器或者事件监听因为项目中有些页面难免会遇到定时器或者事件监听的需求。但是在离开当前页面时，如果没有及时合理的清除定时器，会造成业务逻辑混乱，甚至应用卡顿。这时候需要清空定时器事件监听，即页面卸载（关闭）的生命周期函数，清空定时器。方法：{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等，但是有时候我们并不想在事件不断触发的过程中如此频繁的执行函数。这时候就用到了防抖和节流。案例一：远程搜索需要通过接口动态获取数据。如果每次用户输入时都请求该接口，这是对带宽和性能的浪费。{{item.label}}情况二：当滚动事件持续触发时，handle函数并没有立即执行，而是1000毫秒内未触发handle函数只会在滚动事件后触发一次。functiondebounce(fn,wait){lettimeout=nullreturnfunction(){if(timeout!==null)clearTimeout(timeout)timeout=setTimeout(fn,wait)}}functionhandle(){console.log(Math.random())}window.addEventListener('scroll',debounce(handle,1000))异步加载js浏览器默认同步加载js脚本。在解析HTML的过程中，遇到在上面的代码中，