我觉得写好代码和作文章差不多,无外乎:工整、优雅、拒绝重复、惜字如金。对代码有感情,每一行都应该尽心尽力,并且还要有把所有代码扔垃圾篓之后再重写两遍的冲动,一旦有了这种冲动之后,什么都挡不住你,连吃喝拉撒时,问题都会浮现到你脑子里,你就会不由自主地解决它们……
网上有不少关于 JS 编写优化建议,这里我根据自己的经验提出一些比较有用的建议。
JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:
var num, str, obj;
var num =0, str ='', obj =null;
定义变量的时候就给他一个默认值,这样不仅方便了解释器,也方便了阅读代码的人,他会在心里有数——知道这些变量可能会当作什么用。
(2)不要随意地改变变量的类型,例如下面代码:
var num =5;num ="-"+ num;
var num =5;var sign ="-"+ num;
function getPrice(count){ if(count <0)return""; elsereturn count *100;}
function getPrice(count){ if(count <0)return-1; elsereturn count *100;}
然后告诉使用者,如果返回-1就表示不合法。如果类型确定,解释器也不用去做一些额外的工作,可以加快运行速度。
(1)不要让代码暴露在全局作用域下
例如以下运行在全局作用域的代码:
<script> var map = document.querySelector("#my-map"); map.style.height ="600px";</script>
<script>!function(){ var map = document.querySelector("#my-map"); map.style.height ="600px";}()</script>
上面用了一个function制造一个局部作用域,也可以用ES6的块级作用域。由于map这个变量直接在当前的局部作用域命中了,所以就不用再往上一级的作用域(这里是全局作用域)查找了,而局部作用域的查找是很快的。同时直接在全局作用域定义变量,会污染window对象。
(2)不要滥用闭包
闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。这样就导致了在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,一级一级地往上直到找到了,或者到了全局作用域还没找到。因此如果闭包嵌套得越深,那么变量查找的时间就越长。如下:
function getResult(count){ count++; function process(){ var factor =2; return count * factor -5; } return process();}
function getResult(count){ count++; function process(count){ var factor =2; return count * factor -5; } return process(count);}
var url ="";if(window.location.protocal ==="https:"){ url ="wss://xxx.com"+ window.location.pathname + window.location.search;}
var url ="";var location = window.location;if(location.protocal ==="https:"){ url ="wss://xxx.com"+ location.pathname + location.search;}
搞成了一个局变变量,这样查找就会明显快于全局的查找,代码也可以写少一点。
这里你可能会有疑问了,有些人喜欢用==,有些人喜欢用===,大家的风格不一样,你为什么要强制别人用===呢?习惯用==的人,不能仅仅是因为==比===少敲了一次键盘。为什么不提倡用==呢?
(1)如果你确定了变量的类型,那么就没必要使用==了,如下:
if(typeof num !="undefined"){
}var num = parseInt(value);if(num ==10){
}
上面的两个例子都是确定类型的,一个是字符串,一个是整数。就没必要使用==了,直接用===就可以了。
(2)如果类型不确定,那么应该手动做一下类型转换,而不是让别人或者以后的你去猜这里面有类型转换,如下:
var totalPage ="5";if(parseInt(totalPage)===1){
}
if(a == b){
}
Expected ‘===’ and instead saw ‘==’.
null==undefined //true'' == '0' //false0 == '' //true0 == '0' //true'
' == 0 //truenew String("abc") == "abc" //truenew Boolean(true) == true //truetrue == 1 //true
上面的比较在用===的时候都是false,这样才是比较合理的。例如第一点null居然会等于undefined,就特别地奇怪,因为null和undefined是两个毫无关系的值,null应该是作为初始化空值使用,而undefined是用于检验某个变量是否未定义。
这和第1点介绍强类型的思想是相通的。
如果用1句代码就可以实现5句代码的功能,那往往1句代码的执行效率会比较高,并且可读性可能会更好
(1)用三目运算符取代简单的if-else
如上面的getPrice函数:
function getPrice(count){ if(count <0)return-1; elsereturn count *100;}
function getPrice(count){ return count <0?return-1: count *100;}
function getPrice(e){return0>e?-1:100*e}
(2)连等
连等是利用赋值运算表达式会返回所赋的值,并且执行顺序是从右到左的,如下:
overtime = favhouse = listingDetail ={...}
var age =0;if((age =+form.age.value)>=18){ console.log("你是成年人");}else{ consoe.log("小朋友,你还有"+(18- age)+"就成年了");}
也是利用了赋值表达式会返回一个值,在if里面赋值的同时用它的返回值做判断,然后else里面就已经有值了。上面的+号把字符串转成了整数。
(3)自增
利用自增也可以简化代码。如下,每发出一条消息,localMsgId就自增1:
chatService.sendMessage(localMsgId++, msgContent);
5. 减少魔数
例如,在某个文件的第800行,冒出来了一句:
dialogHandler.showQuestionNaire("seller","sell",5,true);
var naireType ="seller", dialogType ="sell", questionsCount =5, reloadWindow =true;
naireHandler.showNaire(naireType, dialogType, questionsCount, reloadWindow);
这样意义就很明显了。
ES6已经发展很多年了,兼容性也已经很好了。恰当地使用,可以让代码更加地简洁优雅。
(1)使用箭头函数取代小函数
有很多使用小函数的场景,如果写个function,代码起码得写3行,但是用箭头函数一行就搞定了,例如实现数组从大到小排序:
var nums =[4,8,1,9,0];nums.sort(function(a, b){ return b - a;});//输出[9, 8, 4, 1, 0]
var nums =[4,8,1,9,0];nums.sort(a, b => b - a);
setTimeout(()=> console.log("hi"),3000)
箭头函数在C++/Java等其它语言里面叫做Lambda表达式,Ruby比较早就有这种语法形式了,后来C++/Java也实现了这种语法。
当然箭头函数或者Lambda表达式不仅适用于这种一行的,多行代码也可以,不过在一行的时候它的优点才比较明显。
(2)使用ES6的class
虽然ES6的class和使用function的prototype本质上是一样的,都是用的原型。但是用class可以减少代码量,同时让代码看起来更加地高大上,使用function要写这么多:
functionPerson(name, age){ this.name = name; this.age = age;}
Person.prototype.addAge =function(){ this.age++;};
Person.prototype.setName =function(name){ this.name = name;};
classPerson{ constructor(name, age){ this.name = name; this.age = age; } addAge(){ this.age++; } setName(name){ this.name = name; }}
并且class还可以很方便地实现继承、静态的成员函数,就不需要自己再去通过一些技巧去实现了。
(3)字符串拼接
以前要用+号拼接:
var tpl = '<div>'+ ' <span>1</span>'+ '</div>';
var tpl =` <div> <span>1</span> </div>`;
var page =5, type = encodeURIComponet("#js");var url ="/list?page="+ page +"&type="+ type;
var url =`/list?page=${page}&type=${type}`;
就不用使用+号把字符串拆散了。
(4)块级作用域变量
块级作用域变量也是ES6的一个特色,下面的代码是一个任务队列的模型抽象:
var tasks =[];for(var i =0; i <4; i++){ tasks.push(function(){ console.log("i is "+ i); });}for(var j =0; j < tasks.length; j++){ tasks[j]();}
var tasks =[];for(var i =0; i <4; i++){ !function(k){ tasks.push(function(){ console.log("i is "+ k); }); }(i);}for(var j =0; j < tasks.length; j++){ tasks[j]();}
var tasks =[];for(let i =0; i <=4; i++){ tasks.push(function(){ console.log("i is "+ i); });}for(var j =0; j < tasks.length; j++){ tasks[j]();}
只改动了3个字符就达到了目的。因为for循环里面有个大括号,大括号就是一个独立的作用域,let定义的变量在独立的作用域里面它的值也是独立的。当然即使没写大括号for循环执行也是独立的。
除了以上几点,ES6还有其它一些比较好用的功能,如Object的assign,Promise等,也是可以帮助写出简洁高效的代码。
以上列了我自己在实际写代码过程中遇到的一些问题和一些个人认为比较重要的方面,其它的还有变量命名、缩进、注释等,这里就不提及了。写代码的风格也体现了编程的素养,有些人的代码看起来非常地干净利落,而有些人的代码看起来让人比较痛苦。这种编程素质的提升需要有意识地去做一些改进,有些人虽然代码写得很烂,但是他自己并不觉得有什么问题。这就需要多去学下别人的代码,甚至学一下其它语言的书写,两者一比较就能发现差异,或者看下这方面的书,像什么代码大全之类的。
一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间
良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。
减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!
Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。
程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。
函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程
朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构
页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮
软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!