JavaScript最佳实践20则

简介: 本文总结了20则JavaScript的最佳实践,希望对各位爪哇国编剧有用。(顺带推销下CoffeeScript)

本文总结了20则JavaScript的最佳实践,希望对各位爪哇国编剧有用。(顺带推销下CoffeeScript)。

image.png

1. 使用 ===

JavaScript有两种等值运算符,分别是=====,以及!==!=。比较两个值的时候,请使用前者,避免JavaScript讨厌的强制类型转换带来预料之外的结果。

CoffeeScript下只提供无强制类型转换的==(别名is)和!=(别名isnt),不用头疼选哪种。


2. eval很邪恶

eval让我们将字符串作为参数执行,这是非常强大的特性。然而,eval会大幅降低脚本的性能,也会引起安全问题。除非你打算用JavaScript写一个编译器,还是对eval敬而远之的好。


3. 少打字多费脑

省掉一些花括号,大多数浏览器仍然能理解,例如:

if(someVariableExists)  

  x = false

然而,复杂一点的代码就可能带来问题:

if(someVariableExists)  

  x = false  

  anotherFunctionCall();

你想表达的也许是:

if(someVariableExists) {  

  x = false;  

  anotherFunctionCall();  

}

然而实际上等价于:

if(someVariableExists) {  

  x = false;  

}  

anotherFunctionCall();

所以,还是乖乖地写花括号吧,这能为你省去无数麻烦。

如果你真那么讨厌花括号,还是投入CoffeeScript的怀抱吧:

if someVariable?

 x=false

if someVariable?

 x=false

 anotherFunctionCall()

同理,大多数浏览器允许你省略分号:

var someItem = 'some string'  

functiondoSomething() {  

 return'something'  

}

这和省略花括号一样糟糕,还是老实一点好:

var someItem = 'some string';  

functiondoSomething() {  

 return'something';  

}

或者,投奔CoffeeScript吧,不用分号了:

someItem = 'some string'

doSomething = -> 'something'

函数的写法是不是也很帅?直接定义一个匿名函数,然后把它赋给一个变量即可。


4. 使用JSLint

JSLint是一款非常棒的调试器,它会迅速找出代码中的问题,包括语法错误、编码风格和程序结构问题。


5. 将脚本放在页面的底部

脚本加载是阻塞的,脚本加载并执行完之后,浏览器不能继续渲染下面的内容。因此,用户被迫等待更长时间。如果你的JavaScript脚本只是用来增强效果,那么请将它放在页面的最后:

<p>And now you know my favorite kinds of corn. </p>  

<scripttype="text/javascript"src="path/to/file.js"></script>  

<scripttype="text/javascript"src="path/to/anotherFile.js"></script>  

</body>  

</html>


6. 避免在for语句中声明变量

糟糕的例子:

for(var i = 0; i < someArray.length; i++) {  

  varcontainer = document.getElementById('container');  

  container.innerHtml += 'my number: ' + i;  

  console.log(i);  

}

每次循环都要计算数组的长度,每次都要遍历DOM查询“container”元素,效率低下!

改成这样就好一些:

varcontainer = document.getElementById('container');  

for(var i = 0, len = someArray.length; i < len;  i++) {  

  container.innerHtml += 'my number: ' + i;  

  console.log(i);  

}

7. 构建字符串的最优方法

遍历数组或对象的时候不一定要用for,使用原生函数往往是更好的选择:

var arr = ['item 1', 'item 2', 'item 3', ...];  

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

8. 减少全局变量

避免模块和类库互相干扰。

var name = 'Jeffrey';  

var lastName = 'Way';  

function doSomething() {...}  

console.log(name);

更好:

varDudeNameSpace = {  

  name : 'Jeffrey',  

  lastName : 'Way',  

  doSomething : function() {...}  

}  

console.log(DudeNameSpace.name)

CoffeeScipt下变量默认非全局,不需要加var,而且编译的时候,整个.coffee文件处于一个函数之中,也就是说,一个独立的命名空间。使用CoffeeScript,不用再操心全局变量问题。


9. 注释

良好的注释,帮助别人或者几个月之后的你理解你的代码。


10. 渐进增强

“大多数访问者启用了JavaScript,不必担心”这是很大的误区。

花费一点时间查看下你漂亮的页面在javascript被关闭时是什么样的吧。设计网站时,首先假定 JavaScript 是被禁用的,在此基础上,渐进增强网站。


11. 不要给setIntervalsetTimeout传递字符串参数

setInterval(  

"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000  

);

上面的代码和eval如出一辙,效率低下。我们应该传递函数:

setInterval(someFunction, 3000);

12. 别用with

看起来,使用with语句的代码很清晰,例如:

with (being.person.man.bodyparts) {  

  arms = true;  

  legs = true;  

}

这比下面的要清爽得多:

being.person.man.bodyparts.arms = true;  

being.person.man.bodyparts.legs= true;

很不幸,使用with语句导致添加新成员时性能低下,我们还是用变量吧:

var o = being.person.man.bodyparts;  

o.arms = true;  

o.legs = true;


13. 使用{}代替new Object()

new加构造函数可以创建对象:

var o = newObject();  

o.name = 'Jeffrey';  

o.lastName = 'Way';  

o.someFunction = function() {  

  console.log(this.name);  

}

这种方法多受诟病,更好的做法是:

var o = {  

  name: 'Jeffrey',  

  lastName = 'Way',  

  someFunction : function() {  

     console.log(this.name);  

  }  

};

这样我们就不需要直接调用构造函数,也不需要为传递给函数的参数的正确顺序而提心吊胆。


14. 使用[]代替new Array()

创建数组也是一样的道理。

var a = newArray();  

a[0] = "Joe";  

a[1] = 'Plumber';

不如

var a = ['Joe','Plumber'];

15. 定义多个变量时,使用逗号

var someItem = 'some string';  

var anotherItem = 'another string';  

var oneMoreItem = 'one more string';

不如这样:

var someItem = 'some string',  

   anotherItem = 'another string',  

   oneMoreItem = 'one more string';

这样代码更清晰。

CoffeeScript?正如我们前面提到的,变量默认非全局,所以我们根本不需要var


16. for in

遍历对象的属性的时候,还会遍历方法函数,真浪费。加上一个if语句过滤下:

for(key in object) {  

  if(object.hasOwnProperty(key) {  

     ...then do something...  

  }  

}

17. 使用Firebug timer 作性能分析

Firebug timer 可以简单地确定操作消耗的时间:

function TimeTracker(){  

console.time("MyTimer");  

for(x=5000; x > 0; x--){}  

console.timeEnd("MyTimer");  

}

18. 阅读,阅读,还是阅读

午餐之余或上床睡觉之前,读点书吧。床头常发一本web开发方面的书。我喜欢读的一些书包括:

读下吧。多读几遍。我常读。


19. 自执行函数

用括号包裹函数定义,然后应用函数:

(functiondoSomething() {  

  return{  

     name: 'jeff',  

     lastName: 'way'  

  };  

})();

CoffeeScript版本更简洁:

(-> { name: 'jeff', lastName: 'way' })()

do的话更清楚:

do -> { name: 'jeff', lastName: 'way' }

20. 原生代码总能比使用库更快

jQuery和Mootools可以节约你大量的开发时间——特别是处理AJAX。但是别忘了,使用库永远不会比原生代码快(假定你编码正确)。


本文为24 JavaScript Best Practices for Beginners的衍生作品,在其基础上进行了归并调整,并加入了 CoffeeScript 的内容。

相关文章
|
9月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
687 1
|
10月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
203 13
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
9月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
375 11
|
11月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践