23条JavaScript初学者应知的最佳实践方法
1、优先使用===,而不是==
“若两个操作数的类型和值相同,那么===比较的结果为真,!==比较的结果为假。” — JavaScript语言精粹(JavaScript: The Good Parts)
2、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';
4、使用JS Lint
“JSLint获取一份JavaScript源码,然后扫描代码。如果发现问题,就会返回一条信息描述这个问题以及这个问题在源码中的大致位置。问题虽然经常是语法错误,却不一定是。JSLint也会查看一些风格习惯以及结构问题。它并不证明你的代码是否正确,只是提供另外的一双眼睛来帮助发现问题。”—JSLint文档
5、将脚本置于页面的底部
<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(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、构建字符串的最快方式
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';
functiondoSomething() {...}
console.log(name); // Jeffrey -- or window.name
var DudeNameSpace = {
name: 'Jeffrey',
lastname: 'Way',
doSometing: function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
9、注释你的代码
// Cycle through array and echo out each name
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
10、拥抱渐进增强
11、不要传递字符串给”SetInterval”或”SetTimeOut”
setInterval(
"document.getElementById('container').innerHTML += 'my new number: ' + i", 3000
);
setInterval(someFunction, 3000);
12、不要使用”With”语句
with (being.person.man.bodyparts) {
arms = true;
legs = true;
}
being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs = true;
var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;
13、使用{}而不是New Object()
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'
functiondoSomething() {
return 'something'
}
var someItem = 'some string';
functiondoSomething() {
return 'something';
}
17、”For in”语句
for(key in object) {
if(object.hasOwnProperty(key)) {
... then do something...
}
}
18、使用Firebug的”Timer”特性来优化代码
functionTimeTracker() {
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
19、阅读,阅读,再阅读
面向对象的JavaScript
JavaScript:语言精粹
学习jQuery 1.3
学习JavaScript
20、自执行函数(Self-Executing Functions)
(functiondoSomething() {
return {
name: 'jeff',
lastName: 'way'
};
})();
21、原始(raw)JavaScript代码的执行速度始终快于使用代码库
22、Crockford的JSON.Parse
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>';
}
23、删除”Language”
<script type="text/javascript"language="javascript">
...
</script>