十年網(wǎng)站開(kāi)發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無(wú)憂售后,網(wǎng)站問(wèn)題一站解決
本篇文章為大家展示了實(shí)現(xiàn)JavaScript優(yōu)秀實(shí)踐時(shí)要注意應(yīng)避開(kāi)使用的舊結(jié)構(gòu),內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程,更有兗州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
與任何其他編程語(yǔ)言一樣,JavaScript也有自己的最佳實(shí)踐列表,使程序更易于閱讀和維護(hù)。
由于JavaScript有很多小陷阱,因此要注意避開(kāi)??梢酝ㄟ^(guò)輕松地遵循一些最佳實(shí)踐使JavaScript代碼易于閱讀。
避免聲明全局變量
無(wú)論出于何種原因,都應(yīng)該盡量避免使用全局變量。
其一是它們很容易在不同的地方被覆蓋,因?yàn)槿肿兞吭谌魏蔚胤蕉际强捎玫?。此外,全局變量是window對(duì)象的屬性,還可以覆蓋window對(duì)象中的內(nèi)容。
這兩個(gè)問(wèn)題會(huì)使代碼難以執(zhí)行。因此應(yīng)該盡可能多地定義局部變量。
可以使用var、let或const關(guān)鍵字來(lái)定義局部變量。
用var定義的變量在定義之前,在被定義的層次及以下是可用的。例如以下代碼:
const log = () => { console.log(x); } log(); var x = 1; log();代碼中,第一個(gè)console.log中的x是未定義的,第二個(gè)log中x則為1.
以下為同效代碼:
var x; constlog= () => { console.log(x); } log(); x =1; log();用let聲明的變量只有在定義之后才可用,所以如果給出以下代碼:
const log = () => { console.log(x); } log(); let x = 1; log();會(huì)出現(xiàn)以下錯(cuò)誤信息:
Uncaught ReferenceError: Cannotaccess ‘x’ before initialization
使用const關(guān)鍵字可定義只能分配一次且不能再分配的常量。與var不同,這種常量只有在聲明之后才可用。
例如以下代碼:
{console.log(x);}const x = 1;log();在const x = 1之前調(diào)用log也會(huì)出現(xiàn)以下錯(cuò)誤信息:
Uncaught ReferenceError: Cannotaccess ‘x’ before initialization
如果想要在程序的不同部分中使用變量,應(yīng)使用JavaScript模塊,然后在發(fā)布代碼時(shí)將這些模塊構(gòu)建到一個(gè)或多個(gè)大型文件中。這一方法自ES6后可行。
可以導(dǎo)出變量并將其引入至其他模塊。還可以使用“導(dǎo)出默認(rèn)”導(dǎo)出整個(gè)模塊。通過(guò)這種方式只能導(dǎo)出應(yīng)該在模塊外部可用的部分,其他都為不可見(jiàn)的。
此外還可以使用閉包將變量保存在函數(shù)中,這樣可避免外部調(diào)用。以下為簡(jiǎn)單的閉包使用:
= () => {const x = 3; return () => x * 2;}將x保留在divide函數(shù)中可避免外部調(diào)用,并可返回一個(gè)處理x的函數(shù)。
然后編寫以下代碼調(diào)用:
console.log(divide()());
不要向setInterval或setTimeout傳遞字符串
不應(yīng)將字符串傳遞給setInterval或setTimeout函數(shù)的第一個(gè)參數(shù),而應(yīng)傳遞回調(diào)函數(shù)。
如果傳遞的是一個(gè)字符串而不是一個(gè)回調(diào)函數(shù),瀏覽器將使用eval來(lái)運(yùn)行字符串中的代碼,速度很慢,并易受到代碼注入攻擊。
因此,沒(méi)有理由進(jìn)行以上操作,除非我們真的需要運(yùn)行動(dòng)態(tài)生成的代碼,但這應(yīng)該是非常非常罕見(jiàn)的情況。
不應(yīng)該寫以下代碼:
setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}, 1000);應(yīng)該寫以下代碼:
setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}, 1000);不要使用“with”語(yǔ)句
從表面上看,with語(yǔ)句似乎是訪問(wèn)對(duì)象深度嵌套屬性的一個(gè)良好捷徑。例如可以這樣寫:
let obj = { foo: { bar: { baz: 1 } } } obj.foo.bar.baz=2;而不是:
let obj = { foo: { bar: { baz: 1 } } } with(obj.foo.bar) { var baz =2; }但即使這樣仍會(huì)干擾全局對(duì)象,并使baz是否可以在with語(yǔ)句之外訪問(wèn)變得模糊不定。因?yàn)檫€可以在with語(yǔ)句中聲明新的變量:
let obj = { foo: { bar: { baz: 1 } } } with(obj.foo.bar) { var baz =2; }這里baz變量是在with語(yǔ)句內(nèi)部聲明,但外部無(wú)法調(diào)用。
幸運(yùn)的是,在JavaScript嚴(yán)格模式下不允許使用with語(yǔ)句,所以現(xiàn)在也不必?fù)?dān)心。
var關(guān)鍵字
在ES6中,可分別使用塊作用域的let和const關(guān)鍵字來(lái)聲明變量和常量。之所以可以用來(lái)聲明變量,是因?yàn)樗鼈冇忻鞔_的作用域。
用var聲明的變量使用范圍較為模糊。如果是在如if塊或循環(huán)這樣的程序塊中聲明,聲明的變量在塊外部可用。
例如:
for (let i = 0; i < 10; i++){ var j = i; } console.log(j);這種情況下使用var是可行的,但如果用let替代var聲明變量就會(huì)報(bào)錯(cuò)。
由于作用域是混淆模糊的,我們應(yīng)該停止使用var來(lái)聲明變量。

使用JavaScript編程時(shí),我們希望避免使用存在于早期JavaScript版本中的許多老舊結(jié)構(gòu)。使用這些結(jié)構(gòu)讓代碼難以閱讀,并很容易產(chǎn)生bug。
首先要避免全局變量聲明,以防止在全局范圍內(nèi)意外引用和聲明內(nèi)容。這樣還可降低意外修改全局變量值的可能。
其次應(yīng)該停止在字符串中傳遞代碼,而是將回調(diào)函數(shù)傳遞給setTimeout和setInterval函數(shù)的第一個(gè)參數(shù)。因?yàn)閑val將用于運(yùn)行存儲(chǔ)在字符串中的代碼,這會(huì)讓程序面臨代碼注入攻擊,而且速度也很慢。
另外應(yīng)該避免使用with語(yǔ)句,因?yàn)樗鼤?huì)在全局對(duì)象內(nèi)創(chuàng)建變量。
同樣,由于var關(guān)鍵字聲明的變量的作用域比較模糊,因此應(yīng)避免使用var關(guān)鍵字聲明變量。
上述內(nèi)容就是實(shí)現(xiàn)JavaScript優(yōu)秀實(shí)踐時(shí)要注意應(yīng)避開(kāi)使用的舊結(jié)構(gòu),你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。