前端开发,如何写出优秀js代码

时间: 2017-11-11阅读: 2356标签: 前端

什么样的代码是最优秀的的?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明,当然也会讲解一些小技巧。

1.性能好效率高,浏览器中运行效率高的代码。

1.避免全局查找,变量搜索顺序为:先局部,后全局;先解析,后赋值  
var num=1;
;((w)=>{//添加分号,主要为了防止匿名函数调用上一行定义的函数
    console.log(num);//输出nudefined
    console.log(w.num);//输出1
    var num=10;
    console.log(num);//输出10,代表先搜索局部变量
})(window)


2.条件判断,按可能性从高到低,减少条件执行次数
function getStr(){
	var num=Math.floor(Math.random()*10+1);//1到10的随机数
	switch(true){//注意:如果改为num,case里不能写为范围,只能是变量
		case num<8:
			return '1-7之间数字'+num;
		case num===8 || num===9:
			return '8-9之间的数字:'+num;
		case 10:
			return num;
		default:
			return 'default'
	}
}
console.log(getStr());


3.各种类型转换,通过js特殊方式
//将数字转换成字符串
var num=1,
    num_str=""+num;
console.log(num_str+'类型是'+(typeof num_str));//1类型是string
//将字符串转换为其他类型
var str="13.14",
    str_int = ~ ~str, 
    str_float = 1 * str, 
    str_bool = !!str, 
    str_array = [str]; 
console.log(str_int+'类型是'+(typeof str_int));//13类型是number
console.log(str_float+'类型是'+(typeof str_float));//13.14类型是number
console.log(str_bool+'类型是'+(typeof str_bool));//true类型是boolean
console.log(str_array+'类型是'+(typeof str_array));//13.14类型是object

虽然看上去有点丑,但效率却要比parseInt(),parseFloat()等高些,当然使用toString()方法来进行类型转换的也是值得推荐的。


4.优化js的加载

比如通过使用defer,async属性实现js的延迟加载,使用document.createElement ("script")的方式动态加载js等,合并压缩js文件来减少http请求等等


5.其它

能不使用with语句的时候尽量不要使用with语句。

尽量少使用eval ,每次使用eval需要消耗大量时间。

 少使用document.write来给页面生成内容,多用innerHtml来添加。

删除dom节点之前,一定要删除注册在该节点上的事件。 

通过javascript创建的dom对象,必须append到页面中。

......


2.简洁优雅,用最少的字符写出同样的功能。

1.使用三目运算
var a=1,b=2;num;
if (a>b){
 num = a;
}else{
 num=b;
}
//可以替换为:
var num = a > b ? a : b;


2.变量递增/递减/乘/除
var num=10
num =num + 1;
num =num - 1;
//改下为
++num;
--num;
/*其它加减乘除*/
num += 2;
num -= 2;
num *= 2; 
num /= 2;


3.数组和遍历
var a=new Array(); 
a[0]="ab"
a[1]="ac"
a[2]="ad"
for(var x=0;x<a.length;x++) 
{ 
   console.log(a[x]);
} 
//简洁的写法是 
var a=['ab','ac','ad']; 
for(var x in a) 
{ 
    console.log(a[x]);
}


4.一个function就做一件事,拥有统一的属性通过继承实现
function person(name){//定义一个公用类代表:人
  this.name = name || 'default';//属性-名称
  this.eat= function(){//方法-吃饭
    console.log(this.name + '在吃饭!');
  };
  this.sleep=function(){//方法-睡觉,不同的方法分开写,只用于处理一件事
    console.log(this.name+'在睡觉');
   };
}
function man(name){//男人
  	person.call(this);//拥有人类的特征
  	if(name!=undefined){
  		this.name = name;
  	}
}

(function(){
  var Super = function(){};
  Super.prototype = person.prototype;  
  man.prototype = new Super();
})();
var m = new man('tony');
console.log(m.name);//tony
console.log(m.eat());//tony在吃饭
console.log(m instanceof person); // true
console.log(m instanceof man); //true


3.通俗易懂,除了自己他人很快能读懂你的思想。

1.命名规范
const RUNTIME_PATH= "./Runtime/";//常量定义不要使用var,名称用大写“_”隔开。
_fn: function () {} //对象内提供给内部调用的接口,通过“_”作为开头。
let num=0;//作用域被限制在块级中的变量的定义。
function fnGetName(){};//方面命名尽量使用驼峰式。

原则是:

变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号

变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型

尽量避免使用没有意义的命名

禁止使用JavaScript关键词、保留字全名

变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法


2.变量定义始终在前

无论使用let,var来定义变量,我们尽量把它们写在最前面,多个变量可以用过逗号隔开


3.多使用try catch语句
try {
   //语句
}catch (e) {
  //出错怎么办
}finally{
   //无论结果都会执行的
}

这样能很好的让我们捕获错误。当错误发生时JavaScript 会停止执行,并生成一个错误信息。如果你将 throw 和 try 、 catch一起使用,就可以控制程序输出的错误信息。


4.总结:

我不是个伟大的程序员,我只是个有着一些优秀习惯的程序员而已与君共勉愿君写的代码就像阅读优美的文章一样让人流连忘返。还有更多的建议请留言,分享您的知识和经验。


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/88

自学WEB前端的详细路线

学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货

如何从零基础成为优秀的Web前端开发人员?

你想成为一名Web开发人员,有一个问题,在技术行业还没有经验。你可能上了很多课程并且也写了很多个人项目,但是简历上经验一栏却始终和你没有什么关系。转型到一个新的领域并不是那么容易,你想知道你是否已经准备好了

如何在前端中使用protobuf?

由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现

想要成为一个优秀的WEB前端工程,到底该怎么做呢?

互联网已成为当下最火热的行业,互联网的发展带来了巨大的社会变革,从工作到生活,改变着方方面面。 随着互联网的快速发展,IT技术人才缺口开始出现并不断扩大。WEB前端开发工程师作为IT领域中的最热门岗位之一

Web前端需要会哪些?

Web前端开发行业学习门槛也较低,很多转行的小白通过扎实的学习成为了大咖,技术过硬的前端工程师也通过夯实基础,找到了更好的工作,更有从后端转入前端的工程师,因为掌握后端技术而更加有优势,在前端开发行业取得很大成功。

现在学web前端还来得及吗?

前端是个最近几年火起来的工种,而且持续火热中,有个词叫水涨船高,来的人多了,竞争多了,标准也就提高了。现在对前端工程师的要求跟当年前已经不能同日而语了。

零基础转行web前端,要学习多久?需要掌握些什么?

如果你还处于迷茫阶段或者是一个小白,那你不要着急着手开始学习,因为没有目的和方法的学习,只会走弯路。这时候,建议你先深入了解有关前端方面的所有资讯,包括前景、就业、行业发展、技术囊括、职业等等,这样才能有目的和方向的学习

Web前端开发的思考与感悟

最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作

Web前端发展史

前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染

Web前端开发怎么入门?

Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML、CSS、JavaScript三大要素组成。专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全