请选择 进入手机版 | 继续访问电脑版

JS代码优化(上篇)

[复制链接]
轩峰毅飞 发表于 2021-1-1 18:35:07 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JS代码优化(上篇)

目录
JS代码优化(上篇)
1、按强范例风格写代码
2、淘汰作用域的查找
3、制止 == 的使用
4、归并表达式
5、淘汰魔数
6、使用ES6简化代码
7、代码净化
1、按强范例风格写代码

(1)界说变量时指明数据范例


  • 界说变量时给默认值,方便JS剖析器,也方便阅读人
  1. var num = 0,    str = '',    obj = null;
复制代码
(2)不要随意地改变变量的范例,需要更改就创建新变量赋值
  1. //bad  整型变成字符串范例,js最终会表明成为汇编语言,就会做额外处理处罚var num = 5;num = "-" + num;//bestvar num = 5;var sign = "-" + num;
复制代码
(3)函数的返回范例应该是要确定的
  1. //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)不要让代码袒露在全局作用域下,弄成一个局部的作用域
  1. //bad  script 标签里面,代码的上下文都是全局作用域的//best  function 制造一个局部作用域,也可以用 ES6 的块级作用域// 局部作用域的查找是很快的。同时直接在全局作用域界说变量,会污染 window 对象。
复制代码
(2)不要滥用闭包


  • 闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。
  1. //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)全局变量频繁使用时,可用局部变量缓存一下
  1. //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)如果你确定了变量的范例,就使用 === 来替换 ==
  1. // 一个是字符串,一个是整数 ,直接用===if(typeof num != "undefined"){ }var num = parseInt(value);if(num == 10){ }
复制代码
(2)如果范例不确定,手动范例转换,别让别人或自己猜这里有范例转换
  1. var totalPage = "5";if(parseInt(totalPage) === 1){ }
复制代码
(3)使用==在 JSLint 检查的时候是不通过的
  1. if(a == b){ }//JSLint下会输出Expected ‘===’ and instead saw ‘==’.if(a == b){}
复制代码
(4)使用==大概会出现一些希奇的现象,这些希奇的现象大概会给代码埋入隐患
  1. null == undefined          //true&#39;&#39; == &#39;0&#39;                  //false0  == &#39;&#39;                   //true0  == &#39;0&#39;                  //true&#39;&#39; == 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
  1. //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)使用连等
  1. //连等是利用赋值运算表达式会返回所赋的值,而且执行顺序是从右到左的overtime = favhouse = listingDetail = {...}//用了赋值表达式会返回一个值,再进行判断,+号把字符串转成了整数var age = 0;if((age = +form.age.value) >= 18){    console.log("你是成年人");} else {    consoe.log("小朋侪,你还有" + (18 - age) + "就成年了");}
复制代码
(3)利用自增
  1. //利用自增也可以简化代码。如下,每发出一条消息,localMsgId 就自增 1chatService.sendMessage(localMsgId++, msgContent);
复制代码
 

5、淘汰魔数

  1. /上面的四个常量分别代表什么呢?不去查就不知道有什么用,这些意义不明的常量就叫“魔数”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)使用箭头函数取代小函数(数组从大到小排序)
  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
  1. 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)字符串拼接
  1. //以前要用+号拼接var tpl =&#39;&#39; +&#39;    1&#39; +&#39;
  2. &#39;;//现在只要用两个反引号“`”就可以了var tpl =`           1   
  3. `;//反引号还支持占位替换//原本写法var page = 5,    type = encodeURIComponet("#js");var url = "/list?page=" + page + "&type=" + type;//反引号写法  就不消使用+号把字符串拆散了var url = `/list?page=${page}&type=${type}`;
复制代码
 

7、代码净化



(1)注重定名
  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语句优化
  1. //badif(value === &#39;duck&#39; || value === &#39;dog&#39; || value === &#39;cat&#39;) {  // ...}//best 将七零八落的条件判断放到一个变量中存储,比看臃肿的表达式要好许多const options = [&#39;duck&#39;, &#39;dog&#39;, &#39;cat&#39;];if (options.includes(value)) {  // ...}
复制代码
(3)赶早返回

  1. //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)解构赋值

  1. // 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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )