適合Web前端新手的JavaScript開(kāi)發(fā)技巧有哪些

本篇內(nèi)容介紹了“適合Web前端新手的JavaScript開(kāi)發(fā)技巧有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、在使用 javascript 類(lèi)庫(kù)之前先學(xué)習(xí) javascript

互聯(lián)網(wǎng)充斥著很多的 javascript 類(lèi)庫(kù)，很多程序員都往往使用 js 類(lèi)庫(kù)而不理解負(fù)面影響。強(qiáng)烈建議你在使用第三方類(lèi)庫(kù)之前學(xué)習(xí)基本的 JS 代碼，否則，你就準(zhǔn)備著倒霉吧。

2、思考后再修改 prototypes

添加新的屬性到對(duì)象 prototype 中是導(dǎo)致腳本出錯(cuò)的常見(jiàn)原因。

yourObject.prototype.anotherFunction = 'Hello';

yourObject.prototype.anotherMethod = function(){...}

在上面代碼中，所有的變量都會(huì)被影響，因?yàn)樗麄兌祭^承于 yourObject。這樣的使用會(huì)導(dǎo)致意想不到的行為。所以建議在使用完后刪除類(lèi)似的修改。

yourObject.prototype.anotherFunction = 'Hello';

yourObject.prototype.anotherMethod = function () { … };

test.anotherMethod();

delete yourObject.prototype.anotherFunction = 'Hello';

delete yourObject.prototype.anotherMethod = function () { … };

在這里小編建了一個(gè)前端學(xué)習(xí)交流扣扣群：132667127，我自己整理的最新的前端資料和高級(jí)開(kāi)發(fā)教程，如果有想需要的，可以加群一起學(xué)習(xí)交流

3、Debug Javascript 代碼

即使最好的開(kāi)發(fā)人員都會(huì)犯錯(cuò)。為了最大化的減少類(lèi)似錯(cuò)誤，請(qǐng)?jiān)谀愕?debugger 中運(yùn)行你的代碼，確認(rèn)你沒(méi)有遇到任何細(xì)微的錯(cuò)誤。

4、避免 Eval

你的 JS 在沒(méi)有 eval 方法的時(shí)候也可以很好的工作。eval 允許訪問(wèn) javascript 編譯器。如果一個(gè)字符串作為參數(shù)傳遞到 eval，那么它的結(jié)果可以被執(zhí)行。

這會(huì)很大的降低代碼的性能。盡量避免在產(chǎn)品環(huán)境中使用 eval。

5、 最小化 DOM 訪問(wèn)

DOM 是最復(fù)雜的 API，會(huì)使得代碼執(zhí)行過(guò)程變慢。有時(shí)候 web 頁(yè)面可能沒(méi)有加載或者加載不完整。最好避免 DOM。

6、盡可能的保持代碼簡(jiǎn)潔

可能大家都聽(tīng)到過(guò)了N遍這個(gè)代碼簡(jiǎn)潔問(wèn)題了。作為一個(gè)開(kāi)發(fā)人員你可能在你的代碼開(kāi)發(fā)過(guò)程中使用了很多次，但千萬(wàn)不要在 js 開(kāi)發(fā)中忘記這點(diǎn)。

§ 盡量在開(kāi)發(fā)模式中添加注釋和空格，這樣保持代碼的可讀性

§ 在發(fā)布到產(chǎn)品環(huán)境前請(qǐng)將空格和注釋都刪除，并且盡量縮寫(xiě)變量和方法名

使用第三方工具幫助你實(shí)現(xiàn)壓縮 javascript。

7、不要用 “SetTimeOut” 和 “Setinterval” 方法來(lái)作為 “Eval” 的備選

setTimeOut( "document.getID('value')", 3000);

在以上代碼中 document.getID(‘value’) 在 setTimeOut 方法中被作為字符串來(lái)處理。 這類(lèi)似于 eval 方法，在每個(gè)代碼執(zhí)行中來(lái)執(zhí)行一個(gè)字符串，因此會(huì)降低性能，因此，建議在這些方法中傳遞一個(gè)方法。

setTimeOut(yourFunction, 3000);

8、[] 比 new Array(); 更好

一個(gè)常犯的錯(cuò)誤在于使用當(dāng)需要數(shù)組的時(shí)候使用一個(gè)對(duì)象或者該使用對(duì)象的時(shí)候使用一個(gè)數(shù)組。但是使用原則很簡(jiǎn)單：

“當(dāng)屬性名稱(chēng)是小的連續(xù)整數(shù)，你應(yīng)該使用數(shù)組。否則，使用一個(gè)對(duì)象” – Douglas Crockford, JavaScript: Good Parts 的作者.

建議：

var a = ['1A','2B'];

避免：

var a = new Array();

a[0] = "1A";

a[1] = "2B";

9、盡量不要多次使用 var

在初始每一個(gè)變量的時(shí)候，程序員都習(xí)慣使用 var 關(guān)鍵字。相反，建議你使用逗號(hào)來(lái)避免多余的關(guān)鍵字，并且減少代碼體積。 如下：

var variableOne = 'string 1',

variableTwo = 'string 2',

variableThree = 'string 3';

10、不要忽略分號(hào) “;”

這往往是大家花費(fèi)數(shù)個(gè)小時(shí)進(jìn)行 debug 的原因之一。

“適合Web前端新手的JavaScript開(kāi)發(fā)技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！