15條JavaScript最佳實踐小結
更新時間：2013年08月09日 11:05:52 作者：
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會看到明顯的速度提升。本文總結了15條小建議，感興趣的朋友可以參考下
本文檔整理大部分公認的、或者少有爭議的JavaScript良好書寫規(guī)范（Best Practice）。一些顯而易見的常識就不再論述（比如要用對象支持識別判斷，而不是瀏覽器識別判斷；比如不要嵌套太深）。條目順序按重要級粗略的從高到低排列。
把外部JavaScript文件放在HTML底部
我們的目標是相同的：為用戶盡可能快地顯示內容。當載入一個腳本文件的時候，HTML會停止解析，直到腳本載入完畢。因此，用戶可能會長時間對著一個空白的屏幕，看上去什么都沒有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點擊動作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無論如何，這毫無疑問是一個非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個數(shù)組
//這段糟糕的代碼會在每次進入循環(huán)的時候都計算一次數(shù)組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內了，每次循環(huán)都會創(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)體外聲明變量，變量只會創(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);
}
用盡量簡短的代碼
如果可以增加可讀性的話，那么使用代碼的簡短格式是有意義的，下面是一份不完全的列表：
//對于條件判斷只有兩次的，這是一種冗長的寫法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
//更好的代碼
var direction = (x > 100) ? 1 : -1;
//判斷一個 變量是否定義，如果否，就賦予一個值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}
//更好的代碼
var x = v || 10;
//重復了變量名很多次
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';
//更好的寫法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
//重復了很多次數(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'
];
單引號和雙引號
為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號。
//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>');
避免混入其他技術
CSS:假設我們的頁面上有必須填入的輸入框（擁有class“mandatory”），如果它沒有被輸入數(shù)據(jù)，周圍就會加上紅色邊框。
//一段混合了其他技術的代碼會這樣做：
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';
}
}
//一段良好的代碼會這么做：將風格化的事情交給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:假設我們有內多HTML內容需要用JavaScript來載入，那么使用Ajax載入單獨的文件，而不是通過JavaScript處理DOM，后者會讓代碼難以處理，并且出現(xiàn)難以維護的兼容性問題。
驗證JavaScript代碼
瀏覽器處理JavaScript代碼可能會非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習慣。
最簡單的檢測你的代碼質量的方法是通過一個在線JavaScript驗證工具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
使用更簡單的格式來寫innerscript
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時隨地都會輸入錯誤的數(shù)據(jù)。這不是因為他們蠢，而是因為他們很忙，并且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。
//如果members的類型不是數(shù)組，那么下面的代碼會拋出一個錯誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
//良好的習慣是檢查參數(shù)是否是一個數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測試它是否擁有數(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
另一個安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說你的function從用戶名輸入框中取得用戶名做某項操作，但用戶名中的單引號或者雙引號可能會導致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因為在一個頁面中包含的所有JavaScript都在同一個域中運行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉（overwrite）你的。
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個沒有名字的方法將他們全都包起來。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個“命名空間”中
//我們這里用一個function做命名空間而不是一個var，因為在前者中聲明function更簡單，而且能保護隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調用的函數(shù)和屬性都要寫在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會更加直觀。
//在function中不用var引起的迷惑性問題
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!");
}
}
使用前置+號來把字符串轉化為數(shù)字
JavaScript中，“+”操作符即被用來作為數(shù)字加，也被用來連接字符串。如果需要求表單中幾個值的和，那么用+可能會出現(xiàn)問題。
//會出現(xià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的一個暗示：這是一個數(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()方法是在運行時把任何代碼當作對象來計算/運行的方法。實際上由于安全性的緣故，大部分情況下都不應該用eval()，總是有一種更“正確”的方法來完成同樣的工作的?；驹瓌t是，eval is evil，在任何時候都不要用它，除非你是一個老手，并且知道你不得不這樣做。
for in語句
遍歷一個對象中的所有條目的時候，用for in語句是非常方便的。但有時候我們不需要遍歷對象中的方法，如果不需要的話，可以加上一條filter。
//加上了一個過濾器的for in語句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術上說，你可以忽略很多花括號和分號。
//雖然看上去很不對頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
//這個代碼看上去更不對頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠不要省略分號；2.不要省略花括號，除非在同一行中。
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對象屬性的時候用方括號而不是點號
在JavaScript中取得某對象的屬性有兩種方法：
//點號標記
MyObject.property
//方括號標記
MyObject["property"]
如果是用點號標記取得對象的屬性，屬性名稱是硬編碼，無法在運行時更改；而用方括號的話，JavaScript會求得方括號內值然后通過計算結果來求得屬性名。也就是說用方括號標記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
//這樣是不行的
MyObject.value+i
//這樣就沒有問題
MyObject["value"+i]
假設JavaScript會被禁用
我知道這樣的假設會傷害JavaScript開發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨姂撟鲞@樣的假設。這是漸進增強中很重要的一部分。
使用JavaScript庫
現(xiàn)在有很多非常流行的JavaScript庫，比如YUI和jQuery、Dojo。它們的缺點是需要下載一個額外的文件，優(yōu)點卻更多：兼容性更強；代碼更簡單易懂。好的庫有很多，但你不應該在一個項目中把它們都用上，因為可能存在兼容性問題。選擇一個自己習慣的就好。
不要忘記的一點是，原生的JavaScript毫無疑問更快，如果是小規(guī)模的使用，最好還是用原生的。
把外部JavaScript文件放在HTML底部
我們的目標是相同的：為用戶盡可能快地顯示內容。當載入一個腳本文件的時候，HTML會停止解析，直到腳本載入完畢。因此，用戶可能會長時間對著一個空白的屏幕，看上去什么都沒有發(fā)生。如果你的JavaScript代碼只是增加一些功能（比如按鈕的點擊動作），那么盡管大膽地把文件引用放在HTML底部吧（就在</body>之前），你會看到明顯的速度提升。如果是用于其他目的的腳本文件，則需要慎重地考慮。但無論如何，這毫無疑問是一個非常值得考慮的地方。
優(yōu)化循環(huán)
循環(huán)遍歷一個數(shù)組
復制代碼 代碼如下:
//這段糟糕的代碼會在每次進入循環(huán)的時候都計算一次數(shù)組的長度
var names = ['George','Ringo','Paul','John'];
for(var i=0;i<names.length;i++){
doSomeThingWith(names[i]);
}
復制代碼 代碼如下:
//這樣的話，就只會計算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;i<all;i++){
doSomeThingWith(names[i]);
}
復制代碼 代碼如下:
//這樣就更加簡短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;i<j;i++){
doSomeThingWith(names[i]);
}
復制代碼 代碼如下:
//這段代碼的糟糕之處在于，它把變量聲明放在循環(huán)體內了，每次循環(huán)都會創(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)體外聲明變量，變量只會創(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);
}
用盡量簡短的代碼
如果可以增加可讀性的話，那么使用代碼的簡短格式是有意義的，下面是一份不完全的列表：
復制代碼 代碼如下:
//對于條件判斷只有兩次的，這是一種冗長的寫法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
復制代碼 代碼如下:
//更好的代碼
var direction = (x > 100) ? 1 : -1;
復制代碼 代碼如下:
//判斷一個 變量是否定義，如果否，就賦予一個值，糟糕的代碼
if(v){
var x = v;
} else {
var x = 10;
}
復制代碼 代碼如下:
//更好的代碼
var x = v || 10;
復制代碼 代碼如下:
//重復了變量名很多次
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';
復制代碼 代碼如下:
//更好的寫法是這樣
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};
復制代碼 代碼如下:
//重復了很多次數(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'
];
單引號和雙引號
為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號。
復制代碼 代碼如下:
//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>');
避免混入其他技術
CSS:假設我們的頁面上有必須填入的輸入框（擁有class“mandatory”），如果它沒有被輸入數(shù)據(jù)，周圍就會加上紅色邊框。
復制代碼 代碼如下:
//一段混合了其他技術的代碼會這樣做：
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';
}
}
復制代碼 代碼如下:
//一段良好的代碼會這么做：將風格化的事情交給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:假設我們有內多HTML內容需要用JavaScript來載入，那么使用Ajax載入單獨的文件，而不是通過JavaScript處理DOM，后者會讓代碼難以處理，并且出現(xiàn)難以維護的兼容性問題。
驗證JavaScript代碼
瀏覽器處理JavaScript代碼可能會非常寬容，但我建議你不要依賴瀏覽器的解析能力，因此養(yǎng)成了懶散的編碼習慣。
最簡單的檢測你的代碼質量的方法是通過一個在線JavaScript驗證工具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
使用更簡單的格式來寫innerscript
復制代碼 代碼如下:
//早期的代碼可能是這樣的
<script type="text/javascript" language="javascript">
...
</script>
復制代碼 代碼如下:
//現(xiàn)在不用language屬性了
<script type="text/javascript">
...
</script>
總是檢查數(shù)據(jù)
要檢查你的方法輸入的所有數(shù)據(jù)，一方面是為了安全性，另一方面也是為了可用性。用戶隨時隨地都會輸入錯誤的數(shù)據(jù)。這不是因為他們蠢，而是因為他們很忙，并且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。
復制代碼 代碼如下:
//如果members的類型不是數(shù)組，那么下面的代碼會拋出一個錯誤
function buildMemberList(members){
var all = members.length;
var ul = document.createElement('ul');
for(var i=0;i
復制代碼 代碼如下:
//良好的習慣是檢查參數(shù)是否是一個數(shù)組
function buildMemberList(members){
//數(shù)組的typeof是object，所以如果要判斷是否為數(shù)組的話，可以測試它是否擁有數(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
另一個安全隱患是直接從DOM中取出數(shù)據(jù)使用。比如說你的function從用戶名輸入框中取得用戶名做某項操作，但用戶名中的單引號或者雙引號可能會導致你的代碼崩潰。
避免全局變量
全局變量和全局函數(shù)是非常糟糕的。因為在一個頁面中包含的所有JavaScript都在同一個域中運行。所以如果你的代碼中聲明了全局變量或者全局函數(shù)的話，后面的代碼中載入的腳本文件中的同名變量和函數(shù)會覆蓋掉（overwrite）你的。
復制代碼 代碼如下:
//糟糕的全局變量和全局函數(shù)
var current = null;
function init(){...}
function change(){...}
function verify(){...}
解決辦法有很多，Christian Heilmann建議的方法是：
復制代碼 代碼如下:
//如果變量和函數(shù)不需要在“外面”引用，那么就可以使用一個沒有名字的方法將他們全都包起來。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
復制代碼 代碼如下:
//如果變量和函數(shù)需要在“外面”引用，需要把你的變量和函數(shù)放在一個“命名空間”中
//我們這里用一個function做命名空間而不是一個var，因為在前者中聲明function更簡單，而且能保護隱私數(shù)據(jù)
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空間外調用的函數(shù)和屬性都要寫在return里面
return{
init:init,
//甚至你可以為函數(shù)和屬性命名一個別名
set:change
}
}();
聲明變量的話，總是用var
JavaScript中的變量可能是全局域或者局部域，用var聲明的話會更加直觀。
復制代碼 代碼如下:
//在function中不用var引起的迷惑性問題
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!");
}
}
使用前置+號來把字符串轉化為數(shù)字
JavaScript中，“+”操作符即被用來作為數(shù)字加，也被用來連接字符串。如果需要求表單中幾個值的和，那么用+可能會出現(xiàn)問題。
復制代碼 代碼如下:
//會出現(xià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的一個暗示：這是一個數(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()方法是在運行時把任何代碼當作對象來計算/運行的方法。實際上由于安全性的緣故，大部分情況下都不應該用eval()，總是有一種更“正確”的方法來完成同樣的工作的?；驹瓌t是，eval is evil，在任何時候都不要用它，除非你是一個老手，并且知道你不得不這樣做。
for in語句
遍歷一個對象中的所有條目的時候，用for in語句是非常方便的。但有時候我們不需要遍歷對象中的方法，如果不需要的話，可以加上一條filter。
復制代碼 代碼如下:
//加上了一個過濾器的for in語句
for(key in object) {
if(object.hasOwnProperty(key) {
...then do something...
}
}
不要偷懶省略”和{}
從技術上說，你可以忽略很多花括號和分號。
復制代碼 代碼如下:
//雖然看上去很不對頭，大部分瀏覽器都能正確解析這段代碼
if(someVariableExists)
x = false
復制代碼 代碼如下:
//這個代碼看上去更不對頭了，咋眼一看似乎下面的句都被執(zhí)行了
//實際上只有x=false在if中
if(someVariableExists)
x = false
anotherFunctionCall();
所以，要記住的原則是：1.永遠不要省略分號；2.不要省略花括號，除非在同一行中。
復制代碼 代碼如下:
//這樣是OK的
if(2 + 2 === 4) return 'nicely done';
獲取對象屬性的時候用方括號而不是點號
在JavaScript中取得某對象的屬性有兩種方法：
復制代碼 代碼如下:
//點號標記
MyObject.property
復制代碼 代碼如下:
//方括號標記
MyObject["property"]
如果是用點號標記取得對象的屬性，屬性名稱是硬編碼，無法在運行時更改；而用方括號的話，JavaScript會求得方括號內值然后通過計算結果來求得屬性名。也就是說用方括號標記的方式，屬性名稱可以是硬編碼的，也可以是變量或者函數(shù)返回值。
復制代碼 代碼如下:
//這樣是不行的
MyObject.value+i
復制代碼 代碼如下:
//這樣就沒有問題
MyObject["value"+i]
假設JavaScript會被禁用
我知道這樣的假設會傷害JavaScript開發(fā)者的感情，可是在目前數(shù)據(jù)不明朗的情況下我們?yōu)榱税踩鹨姂撟鲞@樣的假設。這是漸進增強中很重要的一部分。
使用JavaScript庫
現(xiàn)在有很多非常流行的JavaScript庫，比如YUI和jQuery、Dojo。它們的缺點是需要下載一個額外的文件，優(yōu)點卻更多：兼容性更強；代碼更簡單易懂。好的庫有很多，但你不應該在一個項目中把它們都用上，因為可能存在兼容性問題。選擇一個自己習慣的就好。
不要忘記的一點是，原生的JavaScript毫無疑問更快，如果是小規(guī)模的使用，最好還是用原生的。
相關文章
深入理解JavaScript系列（46）：代碼復用模式（推薦篇）詳解
這篇文章主要介紹了深入理解JavaScript系列（46）：代碼復用模式（推薦篇）詳解,本文講解了原型繼承、復制所有屬性進行繼承、混合（mix-in）、借用方法等模式,需要的朋友可以參考下2015-03-03
bootstrap weebox 支持ajax的模態(tài)彈出框
本篇介紹的bootstrap weebox（支持ajax的模態(tài)彈出框），歷經多次修改，目前版本已經穩(wěn)定，整合了bootstrap的響應式，界面簡單，功能卻無比豐富，支持ajax、圖片預覽等等2017-02-02
JS實現(xiàn)超簡潔網頁title標題跑動閃爍提示效果代碼
這篇文章主要介紹了JS實現(xiàn)超簡潔網頁title標題跑動閃爍提示效果代碼,涉及JavaScript結合定時函數(shù)動態(tài)操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
本篇文章主要是對js確認刪除對話框效果的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要為大家詳細介紹了JavaScript圖片懶加載的優(yōu)化方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
js實現(xiàn)tab選項卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當原理也比較簡單。2010-04-04
為一個字符串進行URL編碼很容易,只需要調用encodeURI,傳入要編碼的字符串即可,而且實現(xiàn)的方法不止這一個,下面這篇文章主要給大家介紹了關于js對url進行編碼解碼的三種方式,需要的朋友可以參考下2023-02-02
在做網頁開發(fā)的時候，有時候希望給圖片設置一個備選路徑，即，當src屬性對應的主路徑加載失敗的時候，圖片可以馬上切換到備選路徑，怎么實現(xiàn)呢?下面通過本文給大家分享JavaScript為一張圖片設置備選路徑的方法，一起看看吧2017-01-01
這篇文章主要介紹了JavaScript日期庫date-fn.js使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
右下角彈出提示框想必大家不會陌生吧，本文簡單的為大家實現(xiàn)一個，具體代碼如下，有需求的朋友可以參考下2013-08-08