深入理解javascript學(xué)習(xí)筆記（一） 編寫高質(zhì)量代碼
更新時(shí)間：2012年08月09日 15:52:28 作者：
編寫高質(zhì)量JavaScript的一些要素，例如避免全局變量，使用單變量聲明，在循環(huán)中預(yù)緩存length(長(zhǎng)度)，遵循代碼閱讀，以及更多
一、變量
•全局變量
JavaScript的兩個(gè)特征，不自覺(jué)地創(chuàng)建出全局變量是出乎意料的容易。首先，你可以甚至不需要聲明就可以使用變量；第二，JavaScript有隱含的全局概念，意味著你不聲明的任何變量都會(huì)成為一個(gè)全局對(duì)象屬性（不是真正意義上的全局變量，可以用delete刪除）
function sum(x,y) {
// result 未聲明，為隱式全局變量
result = x + y;
return result;
}
function foo() {
// 使用任務(wù)鏈進(jìn)行部分var聲明，b為隱式全局變量
var a = b = 1;
}
建議：
function (x,y) {
var a ,b ;
a = b = 1;//a,b 為局部變量
}
•var作用
通過(guò)var創(chuàng)建的全局變量（任何函數(shù)之外的程序中創(chuàng)建）是不能被刪除的。無(wú)var創(chuàng)建的隱式全局變量（無(wú)視是否在函數(shù)中創(chuàng)建）是能被刪除的。
// 定義三個(gè)全局變量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
global_fromfunc = 3; // 反面教材
}());
// 試圖刪除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true
// 測(cè)試該刪除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"
•單var形式聲明變量
在函數(shù)頂部使用單var語(yǔ)句是比較有用的一種形式。所有未初始化但聲明的變量的初始值是undefined
function func() {
var a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
// function body...
}
•var散布問(wèn)題
// 反例
myname = "global"; // 全局變量
function func() {
alert(myname); //"undefined" var myname = "local"; alert(myname); // "local" } func();等同于：
myname = "global"; // global variable
function func() {
var myname; // 等同于 -> var myname = undefined;
alert(myname); // "undefined"
myname = "local";
alert(myname); // "local"}
func();
二 for循環(huán)
•建議使用
function looper() {
var i = 0,
max,
myarray = [];
// ...
for (i = 0, max = myarray.length; i < max; i++) {
// 使用myarray[i]做點(diǎn)什么
}
}
使用以下表達(dá)式代替i++
i = i + 1
i += 1以下兩種循環(huán)方式更快
//第一種變化的形式：
var i, myarray = [];
for (i = myarray.length; i–-;) {
// 使用myarray[i]做點(diǎn)什么
}
//第二種使用while循環(huán)：
var myarray = [],
i = myarray.length;
while (i–-) {
// 使用myarray[i]做點(diǎn)什么
}
•for-in循環(huán)
應(yīng)用在非數(shù)組對(duì)象的遍歷上，數(shù)組使用正常的for循環(huán)，對(duì)象使用for-in循環(huán)。使用hasOwnProperty()方法，當(dāng)遍歷對(duì)象屬性的時(shí)候可以過(guò)濾掉從原型鏈上下來(lái)的屬性。
三 避免隱式類型轉(zhuǎn)換
•堅(jiān)持使用===和！==
四 避免使用eval，以及避免給setInterval(), setTimeout()和Function()構(gòu)造函數(shù)傳遞字符串，用函數(shù)代替。
五 parseInt（）數(shù)值轉(zhuǎn)換
建議給基數(shù)參數(shù)賦值，
var month = "06",
year = "09";
month = parseInt(month, 10);//開(kāi)頭為0的字符串會(huì)被當(dāng)做8進(jìn)制處理
year = parseInt(year, 10);
六 編程規(guī)范
構(gòu)造函數(shù)命名：MyConstructor();
一般函數(shù)命名：myFunction();
變量命名：firstName;
私有屬性或方法：_secondeName,
常量：PI,MAX;
•全局變量
JavaScript的兩個(gè)特征，不自覺(jué)地創(chuàng)建出全局變量是出乎意料的容易。首先，你可以甚至不需要聲明就可以使用變量；第二，JavaScript有隱含的全局概念，意味著你不聲明的任何變量都會(huì)成為一個(gè)全局對(duì)象屬性（不是真正意義上的全局變量，可以用delete刪除）
復(fù)制代碼 代碼如下:
function sum(x,y) {
// result 未聲明，為隱式全局變量
result = x + y;
return result;
}
function foo() {
// 使用任務(wù)鏈進(jìn)行部分var聲明，b為隱式全局變量
var a = b = 1;
}
建議：
復(fù)制代碼 代碼如下:
function (x,y) {
var a ,b ;
a = b = 1;//a,b 為局部變量
}
•var作用
通過(guò)var創(chuàng)建的全局變量（任何函數(shù)之外的程序中創(chuàng)建）是不能被刪除的。無(wú)var創(chuàng)建的隱式全局變量（無(wú)視是否在函數(shù)中創(chuàng)建）是能被刪除的。
復(fù)制代碼 代碼如下:
// 定義三個(gè)全局變量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
global_fromfunc = 3; // 反面教材
}());
// 試圖刪除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true
// 測(cè)試該刪除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"
•單var形式聲明變量
在函數(shù)頂部使用單var語(yǔ)句是比較有用的一種形式。所有未初始化但聲明的變量的初始值是undefined
復(fù)制代碼 代碼如下:
function func() {
var a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
// function body...
}
•var散布問(wèn)題
復(fù)制代碼 代碼如下:
// 反例
myname = "global"; // 全局變量
function func() {
alert(myname); //"undefined" var myname = "local"; alert(myname); // "local" } func();等同于：
myname = "global"; // global variable
function func() {
var myname; // 等同于 -> var myname = undefined;
alert(myname); // "undefined"
myname = "local";
alert(myname); // "local"}
func();
二 for循環(huán)
•建議使用
復(fù)制代碼 代碼如下:
function looper() {
var i = 0,
max,
myarray = [];
// ...
for (i = 0, max = myarray.length; i < max; i++) {
// 使用myarray[i]做點(diǎn)什么
}
}
使用以下表達(dá)式代替i++
復(fù)制代碼 代碼如下:
i = i + 1
i += 1以下兩種循環(huán)方式更快
//第一種變化的形式：
var i, myarray = [];
for (i = myarray.length; i–-;) {
// 使用myarray[i]做點(diǎn)什么
}
//第二種使用while循環(huán)：
var myarray = [],
i = myarray.length;
while (i–-) {
// 使用myarray[i]做點(diǎn)什么
}
•for-in循環(huán)
應(yīng)用在非數(shù)組對(duì)象的遍歷上，數(shù)組使用正常的for循環(huán)，對(duì)象使用for-in循環(huán)。使用hasOwnProperty()方法，當(dāng)遍歷對(duì)象屬性的時(shí)候可以過(guò)濾掉從原型鏈上下來(lái)的屬性。
三 避免隱式類型轉(zhuǎn)換
•堅(jiān)持使用===和！==
四 避免使用eval，以及避免給setInterval(), setTimeout()和Function()構(gòu)造函數(shù)傳遞字符串，用函數(shù)代替。
五 parseInt（）數(shù)值轉(zhuǎn)換
建議給基數(shù)參數(shù)賦值，
復(fù)制代碼 代碼如下:
var month = "06",
year = "09";
month = parseInt(month, 10);//開(kāi)頭為0的字符串會(huì)被當(dāng)做8進(jìn)制處理
year = parseInt(year, 10);
六 編程規(guī)范
構(gòu)造函數(shù)命名：MyConstructor();
一般函數(shù)命名：myFunction();
變量命名：firstName;
私有屬性或方法：_secondeName,
常量：PI,MAX;
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
js構(gòu)造函數(shù)constructor和原型prototype原理與用法實(shí)例分析
這篇文章主要介紹了js構(gòu)造函數(shù)constructor和原型prototype原理與用法,結(jié)合實(shí)例形式分析js構(gòu)造函數(shù)constructor和原型prototype基本原理、功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點(diǎn)擊觸發(fā)js彈出層,滑過(guò)觸發(fā)js彈出層,帶動(dòng)畫效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。2015-05-05
javascript檢測(cè)移動(dòng)設(shè)備橫豎屏
移動(dòng)端的開(kāi)發(fā)過(guò)程中，免不了要判斷橫豎屏，然后在執(zhí)行其他操作，比如分別加載不同樣式，橫屏顯示某些內(nèi)容，豎屏顯示其他內(nèi)容等等。2016-05-05
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用less(最優(yōu)方式)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這是一個(gè)非常有趣的題目。我們先從Object.prototype.toString入手，看能否解決它。2010-02-02
我們經(jīng)常使用 window.onload 來(lái)處理頁(yè)面，當(dāng)頁(yè)面加載完成做一些事情。但這個(gè) window.onload 是頁(yè)面全部加載完成，甚至包括圖片,下面我們就來(lái)詳細(xì)探討下window.onload的用法2015-09-09
下面小編就為大家?guī)?lái)一篇模仿password輸入框的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
這篇文章主要介紹了原生js實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12