JS代码优化(上篇)
目录
JS代码优化(上篇)
1、按强范例风格写代码
2、淘汰作用域的查找
3、制止 == 的使用
4、归并表达式
5、淘汰魔数
6、使用ES6简化代码
7、代码净化
1、按强范例风格写代码
(1)界说变量时指明数据范例
- var num = 0, str = '', obj = null;
复制代码 (2)不要随意地改变变量的范例,需要更改就创建新变量赋值
- //bad 整型变成字符串范例,js最终会表明成为汇编语言,就会做额外处理处罚var num = 5;num = "-" + num;//bestvar num = 5;var sign = "-" + num;
复制代码 (3)函数的返回范例应该是要确定的
- //bad 返回范例要确定,不能一下是字符串,一下是数字。 字符串与数值运算:NaN function getPrice(count){ if(count < 0) return ""; else return count * 100;}//best 返回-1表现不正当,范例确定的话,JS表明器就不会做额外工作,可加快运行速度function getPrice(count){ if(count < 0) return -1; else return count * 100;}
复制代码
2、淘汰作用域的查找
(1)不要让代码袒露在全局作用域下,弄成一个局部的作用域
- //bad script 标签里面,代码的上下文都是全局作用域的//best function 制造一个局部作用域,也可以用 ES6 的块级作用域// 局部作用域的查找是很快的。同时直接在全局作用域界说变量,会污染 window 对象。
复制代码 (2)不要滥用闭包
- 闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。
- //bad 在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,//一级一级地往上直到找到了,大概到了全局作用域还没找到。闭包嵌套越深,查找时间越长function getResult(count){ count++; function process(){ var factor = 2; return count * factor - 5; } return process();}//best 闭包的count变量直接通报已往 process(count)function getResult(count){ count++; function process(count){ var factor = 2; return count * factor - 5; } return process(count);}
复制代码 (3)全局变量频繁使用时,可用局部变量缓存一下
- //bad window.location 全局变量,查找就会迟钝var url = "";if(window.location.protocal === "https:"){ url = "wss://xxx.com" + window.location.pathname + window.location.search;}//best //频繁地使用了 window.location 对象,先缓存一个局部变量,查找快于全局查找,代码也少点var url = "";var location = window.location;if(location.protocal === "https:"){ url = "wss://xxx.com" + location.pathname + location.search;}
复制代码
3、制止 == 的使用
(1)如果你确定了变量的范例,就使用 === 来替换 ==
- // 一个是字符串,一个是整数 ,直接用===if(typeof num != "undefined"){ }var num = parseInt(value);if(num == 10){ }
复制代码 (2)如果范例不确定,手动范例转换,别让别人或自己猜这里有范例转换
- var totalPage = "5";if(parseInt(totalPage) === 1){ }
复制代码 (3)使用==在 JSLint 检查的时候是不通过的
- if(a == b){ }//JSLint下会输出Expected ‘===’ and instead saw ‘==’.if(a == b){}
复制代码 (4)使用==大概会出现一些希奇的现象,这些希奇的现象大概会给代码埋入隐患
- null == undefined //true'' == '0' //false0 == '' //true0 == '0' //true'' == 0 //truenew String("abc") == "abc" //truenew Boolean(true) == true //truetrue == 1 //true/*上面的比力在用===的时候都是 false,这样才是比力公道的。null == undefined //true 特别地希奇null 和 undefined //是两个毫无关系的值null 应该是作为初始化空值使用undefined 是用于查验某个变量是否未界说*/
复制代码
4、归并表达式
- 如果用 1 句代码就可以实现 5 句代码的功能,那往往 1 句代码的执行效率会比力高,而且可读性大概会更好。
(1)用三目运算符取代简朴的 if-else
- //badfunction getPrice(count){ if(count < 0) return -1; else return count * 100;}//best 如果写了if-else ,压缩工具也会帮你改成三目运算符形式function getPrice(count){ return count < 0 ? return -1 : count * 100;}//压缩形式:function getPrice(e){return 0>e?-1:100*e}
复制代码 (2)使用连等
- //连等是利用赋值运算表达式会返回所赋的值,而且执行顺序是从右到左的overtime = favhouse = listingDetail = {...}//用了赋值表达式会返回一个值,再进行判断,+号把字符串转成了整数var age = 0;if((age = +form.age.value) >= 18){ console.log("你是成年人");} else { consoe.log("小朋侪,你还有" + (18 - age) + "就成年了");}
复制代码 (3)利用自增
- //利用自增也可以简化代码。如下,每发出一条消息,localMsgId 就自增 1chatService.sendMessage(localMsgId++, msgContent);
复制代码
5、淘汰魔数
- /上面的四个常量分别代表什么呢?不去查就不知道有什么用,这些意义不明的常量就叫“魔数”dialogHandler.showQuestionNaire("seller", "sell", 5, true);//best 给常量取个名字,这样就很清楚了var naireType = "seller", dialogType = "sell", questionsCount = 5, reloadWindow = true;naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);
复制代码
6、使用ES6简化代码
- ES6 已经发展许多年了,兼容性也已经很好了。恰本地使用,可以让代码更加地轻便优雅。
(1)使用箭头函数取代小函数(数组从大到小排序)
- // JS的sort 方法var nums = [4, 8, 1, 9, 0];nums.sort(function(a, b){ return b - a;});//输出[9, 8, 4, 1, 0]// ES6 箭头函数排序一行搞定var nums = [4, 8, 1, 9, 0];``nums.sort(a, b => b - a);nums.sort((a, b) => b - a); //输出[9, 8, 4, 1, 0]//延时器setTimeout(() => console.log("hi"), 3000)
复制代码
(2)使用 ES6 的 class
- function Person(name, age){ this.name = name; this.age = age;}Person.prototype.addAge = function(){ this.age++;};Person.prototype.setName = function(name){ this.name = name;};// class 还可以很方便地实现继续、静态的成员函数,就不需要自己再去通过一些本事去实现了。class Person{ constructor(name, age){ this.name = name; this.age = age; } addAge(){ this.age++; } setName(name){ this.name = name; }}
复制代码
- 虽然 ES6 的 class 和使用 function 的 prototype 本质上是一样的,都是用的原型。但是用 class 可以淘汰代码量,同时让代码看起来更加地高大上。
(3)字符串拼接
- //以前要用+号拼接var tpl ='' +' 1' +'
- ';//现在只要用两个反引号“`”就可以了var tpl =` 1
- `;//反引号还支持占位替换//原本写法var page = 5, type = encodeURIComponet("#js");var url = "/list?page=" + page + "&type=" + type;//反引号写法 就不消使用+号把字符串拆散了var url = `/list?page=${page}&type=${type}`;
复制代码
7、代码净化
(1)注重定名
- //badfunction mergeNumberListIntoUniqueList(listOne, listTwo) { return [...new Set([...listOne, ...listTwo])]}//bestfunction mergeLists(listOne, listTwo) { return [...listOne, ...listTwo]}function createUniqueList(list) { return [...new Set(list)]}
复制代码 (2)IF语句优化
- //badif(value === 'duck' || value === 'dog' || value === 'cat') { // ...}//best 将七零八落的条件判断放到一个变量中存储,比看臃肿的表达式要好许多const options = ['duck', 'dog', 'cat'];if (options.includes(value)) { // ...}
复制代码 (3)赶早返回
- //badfunction handleEvent(event) { if (event) { const target = event.target; if (target) { // Your awesome piece of code that uses target } }}//bestfunction handleEvent(event) { if (!event || !event.target) { return; } // Your awesome piece of code that uses target}
复制代码 (4)解构赋值
- // object 解构赋值const numbers = {one: 1, two: 2};const {one, two} = numbers;console.log(one); // 1console.log(two); // 2// array 解构赋值const numbers = [1, 2, 3, 4, 5];const [one, two] = numbers;console.log(one); // 1console.log(two); // 2
复制代码 (5)童子军规则
- 童子军有一条规则:永远保持脱离时的露营比你发现它时更整洁。如果你在地面上发现了脏东西,那么无论是否是你留下的,你都要将它清理干净。你要有意地为下一组露营者改善情况。
- 我们编写代码也是这样子,如果你在代码中发现了脏代码,那么你可以实验去修改它,纵然是一个没有被引用到的变量名。
(6)代码风格
- 在你的团队中使用一种代码风格,好比限定代码缩进的规范是两空格呢还是四空格;使用单引号呢还是双引号呢;使用同类的一种框架呢,还是盛行两种管理方案的框架呢...这样团队中人员接办项目的本钱就会低落,开发人员的心里淘汰倾轧感~
来源:https://blog.csdn.net/qq_40976321/article/details/111962079
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |