15條JavaScript最佳實(shí)踐小結(jié)
更新時(shí)間：2013年08月09日 11:05:52 作者：
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會(huì)看到明顯的速度提升。本文總結(jié)了15條小建議，感興趣的朋友可以參考下
本文檔整理大部分公認(rèn)的、或者少有爭(zhēng)議的JavaScript良好書(shū)寫(xiě)規(guī)范（Best Practice）。一些顯而易見(jiàn)的常識(shí)就不再論述（比如要用對(duì)象支持識(shí)別判斷，而不是瀏覽器識(shí)別判斷；比如不要嵌套太深）。條目順序按重要級(jí)粗略的從高到低排列。
把外部JavaScript文件放在HTML底部
我們的目標(biāo)是相同的：為用戶盡可能快地顯示內(nèi)容。當(dāng)載入一個(gè)腳本文件的時(shí)候，HTML會(huì)停止解析，直到腳本載入完畢。因此，用戶可能會(huì)長(zhǎng)時(shí)間對(duì)著一個(gè)空白的屏幕，看上去什么都沒(méi)有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點(diǎn)擊動(dòng)作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會(huì)看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無(wú)論如何，這毫無(wú)疑問(wèn)是一個(gè)非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個(gè)數(shù)組
//這段糟糕的代碼會(huì)在每次進(jìn)入循環(huán)的時(shí)候都計(jì)算一次數(shù)組的長(zhǎng)度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
//這樣的話，就只會(huì)計(jì)算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
//這樣就更加簡(jiǎn)短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內(nèi)了，每次循環(huán)都會(huì)創(chuàng)建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
//在循環(huán)體外聲明變量，變量只會(huì)創(chuàng)建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
用盡量簡(jiǎn)短的代碼
如果可以增加可讀性的話，那么使用代碼的簡(jiǎn)短格式是有意義的，下面是一份不完全的列表：
//對(duì)于條件判斷只有兩次的，這是一種冗長(zhǎng)的寫(xiě)法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
//更好的代碼
var direction = (x > 100) ? 1 : -1;
//判斷一個(gè) 變量是否定義，如果否，就賦予一個(gè)值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}
//更好的代碼
var x = v || 10;
//重復(fù)了變量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';
//更好的寫(xiě)法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
//重復(fù)了很多次數(shù)組名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';
//更好的代碼
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];
單引號(hào)和雙引號(hào)
為了避免混亂，我們建議在HTML中使用雙引號(hào)，在JavaScript中使用單引號(hào)。
//html
<img src="picture.gif" />
//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>
//一段混用的jQuery代碼
$('h1').after('<div id="content"><h2>目錄</h2><ol></ol></div>');
避免混入其他技術(shù)
CSS:假設(shè)我們的頁(yè)面上有必須填入的輸入框（擁有class“mandatory”），如果它沒(méi)有被輸入數(shù)據(jù)，周圍就會(huì)加上紅色邊框。
//一段混合了其他技術(shù)的代碼會(huì)這樣做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}
//一段良好的代碼會(huì)這么做：將風(fēng)格化的事情交給CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}
HTML:假設(shè)我們有內(nèi)多HTML內(nèi)容需要用JavaScript來(lái)載入，那么使用Ajax載入單獨(dú)的文件，而不是通過(guò)JavaScript處理DOM，后者會(huì)讓代碼難以處理，并且出現(xiàn)難以維護(hù)的兼容性問(wèn)題。
驗(yàn)證JavaScript代碼
瀏覽器處理JavaScript代碼可能會(huì)非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習(xí)慣。
最簡(jiǎn)單的檢測(cè)你的代碼質(zhì)量的方法是通過(guò)一個(gè)在線JavaScript驗(yàn)證工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更簡(jiǎn)單的格式來(lái)寫(xiě)innerscript
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時(shí)隨地都會(huì)輸入錯(cuò)誤的數(shù)據(jù)。這不是因?yàn)樗麄兇?，而是因?yàn)樗麄兒苊?，并且思考的方式跟你不同。用typeof方法來(lái)檢測(cè)你的function接受的輸入是否合法。
//如果members的類型不是數(shù)組，那么下面的代碼會(huì)拋出一個(gè)錯(cuò)誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
//良好的習(xí)慣是檢查參數(shù)是否是一個(gè)數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測(cè)試它是否擁有數(shù)組才有的function：slice
if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
另一個(gè)安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說(shuō)你的function從用戶名輸入框中取得用戶名做某項(xiàng)操作，但用戶名中的單引號(hào)或者雙引號(hào)可能會(huì)導(dǎo)致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因?yàn)樵谝粋€(gè)頁(yè)面中包含的所有JavaScript都在同一個(gè)域中運(yùn)行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會(huì)覆蓋掉（overwrite）你的。
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個(gè)沒(méi)有名字的方法將他們?nèi)及饋?lái)。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個(gè)“命名空間”中
//我們這里用一個(gè)function做命名空間而不是一個(gè)var，因?yàn)樵谇罢咧新暶鱢unction更簡(jiǎn)單，而且能保護(hù)隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調(diào)用的函數(shù)和屬性都要寫(xiě)在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個(gè)別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會(huì)更加直觀。
//在function中不用var引起的迷惑性問(wèn)題
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
//解決方法是在function中聲明變量也用var
function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}
使用前置+號(hào)來(lái)把字符串轉(zhuǎn)化為數(shù)字
JavaScript中，“+”操作符即被用來(lái)作為數(shù)字加，也被用來(lái)連接字符串。如果需要求表單中幾個(gè)值的和，那么用+可能會(huì)出現(xiàn)問(wèn)題。
//會(huì)出現(xiàn)問(wèn)題的代碼
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
//在字符串前面加上“+”，這是給JavaScript的一個(gè)暗示：這是一個(gè)數(shù)字而不是字符串
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
避免使用eval()方法
JavaScript中的eval()方法是在運(yùn)行時(shí)把任何代碼當(dāng)作對(duì)象來(lái)計(jì)算/運(yùn)行的方法。實(shí)際上由于安全性的緣故，大部分情況下都不應(yīng)該用eval()，總是有一種更“正確”的方法來(lái)完成同樣的工作的。基本原則是，eval is evil，在任何時(shí)候都不要用它，除非你是一個(gè)老手，并且知道你不得不這樣做。
for in語(yǔ)句
遍歷一個(gè)對(duì)象中的所有條目的時(shí)候，用for in語(yǔ)句是非常方便的。但有時(shí)候我們不需要遍歷對(duì)象中的方法，如果不需要的話，可以加上一條filter。
//加上了一個(gè)過(guò)濾器的for in語(yǔ)句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術(shù)上說(shuō)，你可以忽略很多花括號(hào)和分號(hào)。
//雖然看上去很不對(duì)頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
//這個(gè)代碼看上去更不對(duì)頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實(shí)際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠(yuǎn)不要省略分號(hào)；2.不要省略花括號(hào)，除非在同一行中。
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對(duì)象屬性的時(shí)候用方括號(hào)而不是點(diǎn)號(hào)
在JavaScript中取得某對(duì)象的屬性有兩種方法：
//點(diǎn)號(hào)標(biāo)記
MyObject.property
//方括號(hào)標(biāo)記
MyObject["property"]
如果是用點(diǎn)號(hào)標(biāo)記取得對(duì)象的屬性，屬性名稱是硬編碼，無(wú)法在運(yùn)行時(shí)更改；而用方括號(hào)的話，JavaScript會(huì)求得方括號(hào)內(nèi)值然后通過(guò)計(jì)算結(jié)果來(lái)求得屬性名。也就是說(shuō)用方括號(hào)標(biāo)記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
//這樣是不行的
MyObject.value+i
//這樣就沒(méi)有問(wèn)題
MyObject["value"+i]
假設(shè)JavaScript會(huì)被禁用
我知道這樣的假設(shè)會(huì)傷害JavaScript開(kāi)發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨?jiàn)應(yīng)該做這樣的假設(shè)。這是漸進(jìn)增強(qiáng)中很重要的一部分。
使用JavaScript庫(kù)
現(xiàn)在有很多非常流行的JavaScript庫(kù)，比如YUI和jQuery、Dojo。它們的缺點(diǎn)是需要下載一個(gè)額外的文件，優(yōu)點(diǎn)卻更多：兼容性更強(qiáng)；代碼更簡(jiǎn)單易懂。好的庫(kù)有很多，但你不應(yīng)該在一個(gè)項(xiàng)目中把它們都用上，因?yàn)榭赡艽嬖诩嫒菪詥?wèn)題。選擇一個(gè)自己習(xí)慣的就好。
不要忘記的一點(diǎn)是，原生的JavaScript毫無(wú)疑問(wèn)更快，如果是小規(guī)模的使用，最好還是用原生的。
把外部JavaScript文件放在HTML底部
我們的目標(biāo)是相同的：為用戶盡可能快地顯示內(nèi)容。當(dāng)載入一個(gè)腳本文件的時(shí)候，HTML會(huì)停止解析，直到腳本載入完畢。因此，用戶可能會(huì)長(zhǎng)時(shí)間對(duì)著一個(gè)空白的屏幕，看上去什么都沒(méi)有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點(diǎn)擊動(dòng)作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會(huì)看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無(wú)論如何，這毫無(wú)疑問(wèn)是一個(gè)非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個(gè)數(shù)組
復(fù)制代碼 代碼如下:
//這段糟糕的代碼會(huì)在每次進(jìn)入循環(huán)的時(shí)候都計(jì)算一次數(shù)組的長(zhǎng)度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這樣的話，就只會(huì)計(jì)算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這樣就更加簡(jiǎn)短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
復(fù)制代碼 代碼如下:
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內(nèi)了，每次循環(huán)都會(huì)創(chuàng)建變量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
復(fù)制代碼 代碼如下:
//在循環(huán)體外聲明變量，變量只會(huì)創(chuàng)建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
用盡量簡(jiǎn)短的代碼
如果可以增加可讀性的話，那么使用代碼的簡(jiǎn)短格式是有意義的，下面是一份不完全的列表：
復(fù)制代碼 代碼如下:
//對(duì)于條件判斷只有兩次的，這是一種冗長(zhǎng)的寫(xiě)法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
復(fù)制代碼 代碼如下:
//更好的代碼
var direction = (x > 100) ? 1 : -1;
復(fù)制代碼 代碼如下:
//判斷一個(gè) 變量是否定義，如果否，就賦予一個(gè)值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}
復(fù)制代碼 代碼如下:
//更好的代碼
var x = v || 10;
復(fù)制代碼 代碼如下:
//重復(fù)了變量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';
復(fù)制代碼 代碼如下:
//更好的寫(xiě)法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
復(fù)制代碼 代碼如下:
//重復(fù)了很多次數(shù)組名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';
復(fù)制代碼 代碼如下:
//更好的代碼
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];
單引號(hào)和雙引號(hào)
為了避免混亂，我們建議在HTML中使用雙引號(hào)，在JavaScript中使用單引號(hào)。
復(fù)制代碼 代碼如下:
//html
<img src="picture.gif" />
復(fù)制代碼 代碼如下:
//JavaScript
<script type="text/javascript">
document.write('<p>');
</script>
復(fù)制代碼 代碼如下:
//一段混用的jQuery代碼
$('h1').after('<div id="content"><h2>目錄</h2><ol></ol></div>');
避免混入其他技術(shù)
CSS:假設(shè)我們的頁(yè)面上有必須填入的輸入框（擁有class“mandatory”），如果它沒(méi)有被輸入數(shù)據(jù)，周圍就會(huì)加上紅色邊框。
復(fù)制代碼 代碼如下:
//一段混合了其他技術(shù)的代碼會(huì)這樣做：
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].style.borderColor = '#f00';
inputs[i].style.borderStyle = 'solid';
inputs[i].style.borderWidth = '1px';
}
}
復(fù)制代碼 代碼如下:
//一段良好的代碼會(huì)這么做：將風(fēng)格化的事情交給CSS吧
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
if(inputs[i].className === 'mandatory' &&
inputs[i].value === ''){
inputs[i].className += ' error';
}
}
HTML:假設(shè)我們有內(nèi)多HTML內(nèi)容需要用JavaScript來(lái)載入，那么使用Ajax載入單獨(dú)的文件，而不是通過(guò)JavaScript處理DOM，后者會(huì)讓代碼難以處理，并且出現(xiàn)難以維護(hù)的兼容性問(wèn)題。
驗(yàn)證JavaScript代碼
瀏覽器處理JavaScript代碼可能會(huì)非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習(xí)慣。
最簡(jiǎn)單的檢測(cè)你的代碼質(zhì)量的方法是通過(guò)一個(gè)在線JavaScript驗(yàn)證工具JSLint。
“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation
使用更簡(jiǎn)單的格式來(lái)寫(xiě)innerscript
復(fù)制代碼 代碼如下:
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
復(fù)制代碼 代碼如下:
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時(shí)隨地都會(huì)輸入錯(cuò)誤的數(shù)據(jù)。這不是因?yàn)樗麄兇?，而是因?yàn)樗麄兒苊?，并且思考的方式跟你不同。用typeof方法來(lái)檢測(cè)你的function接受的輸入是否合法。
復(fù)制代碼 代碼如下:
//如果members的類型不是數(shù)組，那么下面的代碼會(huì)拋出一個(gè)錯(cuò)誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
復(fù)制代碼 代碼如下:
//良好的習(xí)慣是檢查參數(shù)是否是一個(gè)數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測(cè)試它是否擁有數(shù)組才有的function：slice
if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
另一個(gè)安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說(shuō)你的function從用戶名輸入框中取得用戶名做某項(xiàng)操作，但用戶名中的單引號(hào)或者雙引號(hào)可能會(huì)導(dǎo)致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因?yàn)樵谝粋€(gè)頁(yè)面中包含的所有JavaScript都在同一個(gè)域中運(yùn)行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會(huì)覆蓋掉（overwrite）你的。
復(fù)制代碼 代碼如下:
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
復(fù)制代碼 代碼如下:
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個(gè)沒(méi)有名字的方法將他們?nèi)及饋?lái)。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
復(fù)制代碼 代碼如下:
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個(gè)“命名空間”中
//我們這里用一個(gè)function做命名空間而不是一個(gè)var，因?yàn)樵谇罢咧新暶鱢unction更簡(jiǎn)單，而且能保護(hù)隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調(diào)用的函數(shù)和屬性都要寫(xiě)在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個(gè)別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會(huì)更加直觀。
復(fù)制代碼 代碼如下:
//在function中不用var引起的迷惑性問(wèn)題
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
復(fù)制代碼 代碼如下:
//解決方法是在function中聲明變量也用var
function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}
使用前置+號(hào)來(lái)把字符串轉(zhuǎn)化為數(shù)字
JavaScript中，“+”操作符即被用來(lái)作為數(shù)字加，也被用來(lái)連接字符串。如果需要求表單中幾個(gè)值的和，那么用+可能會(huì)出現(xiàn)問(wèn)題。
復(fù)制代碼 代碼如下:
//會(huì)出現(xiàn)問(wèn)題的代碼
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
復(fù)制代碼 代碼如下:
//在字符串前面加上“+”，這是給JavaScript的一個(gè)暗示：這是一個(gè)數(shù)字而不是字符串
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
避免使用eval()方法
JavaScript中的eval()方法是在運(yùn)行時(shí)把任何代碼當(dāng)作對(duì)象來(lái)計(jì)算/運(yùn)行的方法。實(shí)際上由于安全性的緣故，大部分情況下都不應(yīng)該用eval()，總是有一種更“正確”的方法來(lái)完成同樣的工作的。基本原則是，eval is evil，在任何時(shí)候都不要用它，除非你是一個(gè)老手，并且知道你不得不這樣做。
for in語(yǔ)句
遍歷一個(gè)對(duì)象中的所有條目的時(shí)候，用for in語(yǔ)句是非常方便的。但有時(shí)候我們不需要遍歷對(duì)象中的方法，如果不需要的話，可以加上一條filter。
復(fù)制代碼 代碼如下:
//加上了一個(gè)過(guò)濾器的for in語(yǔ)句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術(shù)上說(shuō)，你可以忽略很多花括號(hào)和分號(hào)。
復(fù)制代碼 代碼如下:
//雖然看上去很不對(duì)頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
復(fù)制代碼 代碼如下:
//這個(gè)代碼看上去更不對(duì)頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實(shí)際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠(yuǎn)不要省略分號(hào)；2.不要省略花括號(hào)，除非在同一行中。
復(fù)制代碼 代碼如下:
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對(duì)象屬性的時(shí)候用方括號(hào)而不是點(diǎn)號(hào)
在JavaScript中取得某對(duì)象的屬性有兩種方法：
復(fù)制代碼 代碼如下:
//點(diǎn)號(hào)標(biāo)記
MyObject.property
復(fù)制代碼 代碼如下:
//方括號(hào)標(biāo)記
MyObject["property"]
如果是用點(diǎn)號(hào)標(biāo)記取得對(duì)象的屬性，屬性名稱是硬編碼，無(wú)法在運(yùn)行時(shí)更改；而用方括號(hào)的話，JavaScript會(huì)求得方括號(hào)內(nèi)值然后通過(guò)計(jì)算結(jié)果來(lái)求得屬性名。也就是說(shuō)用方括號(hào)標(biāo)記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
復(fù)制代碼 代碼如下:
//這樣是不行的
MyObject.value+i
復(fù)制代碼 代碼如下:
//這樣就沒(méi)有問(wèn)題
MyObject["value"+i]
假設(shè)JavaScript會(huì)被禁用
我知道這樣的假設(shè)會(huì)傷害JavaScript開(kāi)發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨?jiàn)應(yīng)該做這樣的假設(shè)。這是漸進(jìn)增強(qiáng)中很重要的一部分。
使用JavaScript庫(kù)
現(xiàn)在有很多非常流行的JavaScript庫(kù)，比如YUI和jQuery、Dojo。它們的缺點(diǎn)是需要下載一個(gè)額外的文件，優(yōu)點(diǎn)卻更多：兼容性更強(qiáng)；代碼更簡(jiǎn)單易懂。好的庫(kù)有很多，但你不應(yīng)該在一個(gè)項(xiàng)目中把它們都用上，因?yàn)榭赡艽嬖诩嫒菪詥?wèn)題。選擇一個(gè)自己習(xí)慣的就好。
不要忘記的一點(diǎn)是，原生的JavaScript毫無(wú)疑問(wèn)更快，如果是小規(guī)模的使用，最好還是用原生的。
相關(guān)文章
深入理解JavaScript系列（46）：代碼復(fù)用模式（推薦篇）詳解
這篇文章主要介紹了深入理解JavaScript系列（46）：代碼復(fù)用模式（推薦篇）詳解,本文講解了原型繼承、復(fù)制所有屬性進(jìn)行繼承、混合（mix-in）、借用方法等模式,需要的朋友可以參考下2015-03-03
bootstrap weebox 支持ajax的模態(tài)彈出框
本篇介紹的bootstrap weebox（支持ajax的模態(tài)彈出框），歷經(jīng)多次修改，目前版本已經(jīng)穩(wěn)定，整合了bootstrap的響應(yīng)式，界面簡(jiǎn)單，功能卻無(wú)比豐富，支持ajax、圖片預(yù)覽等等2017-02-02
JS實(shí)現(xiàn)超簡(jiǎn)潔網(wǎng)頁(yè)title標(biāo)題跑動(dòng)閃爍提示效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超簡(jiǎn)潔網(wǎng)頁(yè)title標(biāo)題跑動(dòng)閃爍提示效果代碼,涉及JavaScript結(jié)合定時(shí)函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
本篇文章主要是對(duì)js確認(rèn)刪除對(duì)話框效果的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript圖片懶加載的優(yōu)化方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當(dāng)原理也比較簡(jiǎn)單。2010-04-04
js對(duì)url進(jìn)行編碼解碼的三種方式總結(jié)
為一個(gè)字符串進(jìn)行URL編碼很容易,只需要調(diào)用encodeURI,傳入要編碼的字符串即可,而且實(shí)現(xiàn)的方法不止這一個(gè),下面這篇文章主要給大家介紹了關(guān)于js對(duì)url進(jìn)行編碼解碼的三種方式,需要的朋友可以參考下2023-02-02
使用JavaScript為一張圖片設(shè)置備選路徑的方法
在做網(wǎng)頁(yè)開(kāi)發(fā)的時(shí)候，有時(shí)候希望給圖片設(shè)置一個(gè)備選路徑，即，當(dāng)src屬性對(duì)應(yīng)的主路徑加載失敗的時(shí)候，圖片可以馬上切換到備選路徑，怎么實(shí)現(xiàn)呢?下面通過(guò)本文給大家分享JavaScript為一張圖片設(shè)置備選路徑的方法，一起看看吧2017-01-01
JavaScript日期庫(kù)date-fn.js使用方法解析
這篇文章主要介紹了JavaScript日期庫(kù)date-fn.js使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
右下角彈出提示框想必大家不會(huì)陌生吧，本文簡(jiǎn)單的為大家實(shí)現(xiàn)一個(gè)，具體代碼如下，有需求的朋友可以參考下2013-08-08