1. 优先使用 ===,而不是 ==
JavaScript 使用两种相等性操作符:===
,!==
和==
,!=
。通常认为做比较的最佳实践是使用前一组操作符。
"若两个操作数的类型和值相同,那么===
比较的结果为真,!==
比较的结果为假。" --- JavaScript语言精粹(JavaScript: The Good Parts)
然而,如果使用==
和!=
,当比较不同类型的操作数时,你就会碰到问题啦。在这种情况下,这组操作符会尝试对操作数的值做无用的强制转换。
2. Eval 就是糟糕的代名词
对于那些不熟悉JavaScript的人来说,函数"evel"让我们能够访问JavaScript编译器。我们可以通过给"eval"传递一个字符串参数来得到该字符串执行的结果。
这不仅会极大地降低你的脚本的性能,也会造成一个巨大的安全隐患,因为这赋予传递进来的纯文本太多的能力。要尽可能地避免eval函数的使用。
3.不要懒手
技术上来说,你确实可能侥幸地省略多数花括号和分号。大多数浏览器都能够正确地解释如下代码片段:
if(someVariableExists)
x = false
然而,再考虑一下这段代码:
if(someVariableExists)
x = false
anotherFunctionCall();
可能会有人认为上一段代码等价于:
if(someVariableExists) {
x = false;
anotherFunctionCall();
}
很不幸,他错了。事实上,它的本意是:
if(someVariableExists)
x = false;
anotherFunctionCall();
你应该也注意到了,代码中缩进模仿了花括号的功能。毋庸置疑,这是非常恐怖的做法,无论如何都应该避免。唯一可以省略花括号的时候是在一行式的语句中,但即使这种情况,也是很有争议的。
if(2 + 2 === 4) return 'nicely done';
始终要想着以后
如果以后的某个时候,你需要在这种if语句中增加更多的命令,那该怎么办呢?没法子,你就只能重写这块代码了。处理这个问题的底线是对于省略写法保持谨慎。
4.使用JS Lint
JSLint是Douglas Crockford编写的一个调试器。简单地将你的脚本拷贝进去,它就会快速地扫描你的代码中任何明显的问题和错误。
>
"JSLint获取一份JavaScript源码,然后扫描代码。如果发现问题,就会返回一条信息描述这个问题以及这个问题在源码中的大致位置。问题虽然经常是语法错误,却不一定是。JSLint也会查看一些风格习惯以及结构问题。它并不证明你的代码是否正确,只是提供另外的一双眼睛来帮助发现问题。"---JSLint文档
在结束脚本代码的编写之前,对其执行一次JSLint,能够保证你不会犯一些愚蠢的错误。
5.将脚本置于页面的底部
这条技巧在本系列前面的文章中也推荐过。因为它在此处也非常合适(As it's highly appropriate though),所有我将那段信息直接粘贴在这里。
记住---这条最佳实践的主要目标是尽可能快速地为用户加载页面。当加载一个脚本时,浏览器直到整个脚本文件全部加载完毕才能继续。因此,用户必须等上更长的时间才能注意到任何的进度。
如果JS文件的目的仅仅是增加功能---例如,在点击某个按钮后---那么就将那些文件放在底部,body结束标签之前吧。这绝对是一个最佳实践。
更好的做法
<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
6.在For语句之外声明变量
当执行一个冗长的"for"语句之时,仅仅让解释引擎做必须干的活吧。例如:
糟糕的做法
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
注意上面代码片段中的每次迭代都需要检查数组的长度,并且每次都要遍历DOM树找到"container"元素---效率多低啊!
更好的做法
var container = 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>';
>
"我不会以测试基准来烦你;你只须相信我(或者自己去测试一下)---这是目前为止最快的方式!"
使用原生方法(比如join()),不用管抽象层面背后发生了什么,通常会比任何非原生方法快得多。 --- James Padolsey, james.padolsey.com"
8.减少全局变量
"通过将全局的东西封装进单个命名空间,能够大大降低与其他应用、部件、代码库交互混乱的概率。"--- Douglas Crockford
var name = 'jeffrey';
var lastname = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name
更好的做法
var DudeNameSpace = {
name: 'Jeffrey',
lastname: 'Way',
doSometing: function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
注意我们是怎样将全局性的“足迹”减少为一个命名可笑的"DudeNameSpace"对象的。
9.注释你的代码
一开始看起来似乎没有必要,但请相信我,你将会想尽可能好地注释你的代码。当你几个月后再次回到项目,会发生什么呢?发现你根本没法轻松地记起当初对每一行代码的想法。或者,如果你的某个同事需要修改你的代码,那又会怎么样呢?始终,一直记着注释你代码的重要部分吧。
// Cycle through array and echo out each name
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
10.拥抱渐进增强
始终考虑到如何处理JavaScript禁用的情况。也许你会想“大多数我网页的阅读器都是启用JavaScript的,因此我不担心这个问题。”然而,这会是一个巨大的错误。
你曾花时间去看过关闭JavaScript后你的漂亮的滑动条是什么样么?(下载Web开发者工具栏以方便干这事。)也许它会完全破坏你的站点。按照以往经验,设计你的站点时应假设将会禁用JavaScript。那么,一旦你这样做了,那么开始渐进地增强你的网页布局吧!
11.不要传递字符串给"SetInterval"或"SetTimeOut"
考虑一下如下代码:
setInterval(
"document.getElementById('container').innerHTML += 'my new number: ' + i", 3000
);
这段代码不仅低效,而且其行为与"eval"函数相同。永远不要传给字符串给SetInterval和SetTimeOut。相反,应传递一个函数名。
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;
很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕。作为替代,你应该使用var。
var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;
13.使用{}而不是New Object()
JavaScript中有多种创建对象的方式。也许更传统的方式是使用"new"构造器,像这样:
var o = new Object();
o.name = 'Jeffrey';
o.lastname = 'Way';
o.someFuncion = function() {
console.log(this.name);
}
然而,这种方式因其行为并不是我们所想的那样而被认为是“糟糕的实践。相反,我推荐你使用更健壮的对象字面方法。
更好的写法
var o = {
name: 'Jeffrey',
lastName: 'Way',
someFunction: function() {
console.log(this.name);
}
};
注意如果你只是想简单地创建个空对象,{}就派上用场了。
var o = {};
"对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观。不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等。" --- dyn-web.com
14.使用[]而不是New Array()
这同样适用于创建一个新数组。
过得去的写法
var a = new Array();
a[0] = 'Joe';
a[1] = 'Plumber';
更好的写法
var a = ['Joe', 'Plumber'];
"JavaScript中一个常见的错误是需要数组时使用对象或需要对象时使用数组。规则很简单:当属性名是小的连续整数时,你应该使用数组。否则,使用对象"---Douglas Crockford
15.一长串变量?省略"var"关键字,使用逗号替代
var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';
更好的写法
var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';
相当的不言自明。我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了。
16.始终,始终使用分号
技术上来说,大多数浏览器都允许你的省略一些分号。
var someItem = 'some string'
function doSomething() {
return 'something'
}
话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难。
更好的写法
var someItem = 'some string';
function doSomething() {
return 'something';
}
18."For in"语句
遍历对象内的成员时,你也会得到方法函数。为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息。
for(key in object) {
if(object.hasOwnProperty(key)) {
... then do something...
}
}
引自JavaScript: 语言精粹, Douglas Crockford著
19.使用Firebug的"Timer"特性来优化代码
需要一种快速简单的方法来检测一个操作花费多长时间么?使用Firebug的"timer"特性记录结果。
function TimeTracker() {
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
20.阅读,阅读,再阅读
我是一个Web开发博客的超级粉丝(比如这个博客!),但吃午餐或者睡前,博客确实不是书籍的替代品。始终在你的床前桌上放一本wen开发书籍吧。如下是一些我最喜欢的JavaScript书籍。
多阅读几遍。我仍旧在读!
21.自执行函数(Self-Executing Functions)
相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些。简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数。
(function doSomething() {
return {
name: 'jeff',
lastName: 'way'
};
})();
22.原始(raw)JavaScript代码的执行速度始终快于使用代码库
JavaScript代码库,如jQuery和Mootools,能够为你节省大量的编码时间---特别是使用AJAX操作。话虽如此,始终谨记代码库的执行速度始终是比不上原始JavaScript代码的(假设了代码的正确性)。
jQuery的"each"方法用来做遍历非常赞,但使用原生"for"语句始终会快一些。
23.Crockford的JSON.Parse
虽然JavaScript 2应该有一个内置的JSON解析器,但写本文之时,我们仍旧需要自己实现。Douglas Crockford,JSON的创造者,已经实现了一个解析器供你使用。可以从这里下载。
简单地导入该脚本,你就能获得一个新的JSON全局对象,用于解析你的.json文件。
var response = JSON.parse(xhr.responseText);
var container = document.getElementById('container');
for(var i = 0, len = response.length; i < len; i++) {
container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}
24.删除"Language"
几年前,在script标签内常见有"language"属性。
<script type="text/javascript" language="javascript">
...
</script>
然而,这个属性很早就被弃用了,所以就不要再使用了。
分享到:
相关推荐
这份压缩包文件"遵循最佳实践,以JavaScript为初学者实现的算法和数据结构_JavaScript_下载.zip"显然是一个专门为JavaScript初学者设计的学习资源,旨在帮助他们理解和实现基本的算法与数据结构。下面我们将详细探讨...
这份"javascript笔记"可能是作者根据自己的学习和实践整理而成,对初学者来说是非常宝贵的资源。笔记中可能涵盖了变量声明、数据类型(如字符串、数字、布尔值、对象、数组等)、运算符、流程控制(如条件语句和循环...
标题中的“jquery+纯生javascript写的适合初学者”暗示了这个压缩包可能包含了一系列使用JavaScript和jQuery库编写的示例代码或教程,旨在帮助初学者理解这两种技术的基础和交互方式。JavaScript是一种广泛用于Web...
作为初学者,理解JavaScript的基础概念和语法是至关重要的。 1. **基础语法** JavaScript是基于ECMAScript规范的,它的语法深受C和Java的影响。基本数据类型包括字符串、数字、布尔值,还有特殊的null和undefined...
本教程针对初学者,旨在提供一个经典的学习路径,让你轻松掌握JavaScript的基础知识,并体验到编程的乐趣。 JavaScript,简称JS,是由Netscape公司的Brendan Eich在1995年发明的。它是一种解释型、弱类型的脚本语言...
### JavaScript的24条实践——深入解读 ...以上六点涵盖了部分《JavaScript的24条实践》的内容,每一条都是基于实践经验总结出的最佳实践,旨在帮助开发者写出更加高效、可维护的JavaScript代码。
作为初学者,掌握JavaScript是踏入Web开发领域的基础。 首先,JavaScript是解释型的,这意味着代码无需编译,而是逐行在浏览器中执行。这种特性使得JS具有很高的灵活性,同时也降低了开发过程中的门槛。其次,它是...
JavaScript是Web开发中不可或缺的一部分,尤其对于初学者来说,掌握其基本概念和常用技巧至关重要。这份"JavaScript常用初学者帮助大全"将引导你逐步走进JavaScript的世界。 首先,JavaScript是一种解释型、弱类型...
这个压缩包集合了一些适合初学者的JavaScript学习资源,包括`.chm`(Microsoft帮助文档格式)和一个`.rar`文件,这些资料将帮助初学者深入理解和掌握JavaScript的基本概念和实践技巧。 1. **JavaScript宝典.chm** -...
作为初学者,了解JavaScript的基础知识至关重要。本教程旨在为新手提供一个全面的入门指南,帮助他们快速掌握JavaScript的核心概念。 首先,JavaScript是一种解释型、弱类型、基于原型的脚本语言。这意味着它不需要...
FAQ(Frequently Asked Questions,常见问题解答)部分通常会涵盖初学者在学习过程中可能遇到的问题和解决方法,比如安装和配置工具链(如Create React App)、调试技巧、错误排查、最佳实践等。通过阅读FAQ,学习者...
在“web网页制作初学者”这个主题中,我们主要探讨的是如何从零开始学习创建一个基本的网页,特别是在教育背景下的应用,例如学校网站。在这个过程中,我们将关注以下几个关键知识点: 1. HTML(HyperText Markup ...
JavaScript是开发客户端的重要技术,他实现了前端的开发,减轻了服务器的工作量,大大的提升了系统的运行速度
初学者需要掌握基本的JavaScript语法和事件处理,以便有效地利用这些功能。 学习HTML框架,还需要掌握版本控制工具,如Git,这对于协作开发和代码管理至关重要。同时,熟悉基本的命令行操作也十分必要,因为许多...
javascript-idiosyncrasies, 对初学者的一组Javascript特性 JavaScript特性这是一个 Collection 中的事物,可以能无法被识别,espcially是初学者。免责声明:其中一些代码Fragment只是演示了 JavaScript 奇怪的部分...
JavaScript,React和WordPress是当前Web开发领域中的三个关键组件,对于初学者来说,理解它们的交互和使用方式至关重要。在“JavaScriptReact和WordPress初学者研讨会”中,我们将深入探讨这三个技术的基础知识,...
总的来说,这个“网页制作素材”压缩包为初学者提供了一个宝贵的起点,通过探索和实践,你可以建立起坚实的基础,进一步探索更复杂的网页制作技术和工具,如前端框架(如Bootstrap)、JavaScript库(如jQuery)和...
**Ajax模式与最佳实践** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这本《Ajax模式与最佳实践》...无论你是初学者还是有经验的开发者,都能从中受益匪浅。