對(duì)于初學(xué)編程語(yǔ)言的同伙來(lái)說(shuō)，經(jīng)常會(huì)犯一些比較“經(jīng)典”的錯(cuò)誤。在這一系列文章中，我們將介紹如何讓初學(xué)編程的同伙避免一些基本的錯(cuò)誤，并且了解如何準(zhǔn)確的編程和開發(fā)代碼。

這一篇文章中，我們介紹5個(gè)javascript代碼開發(fā)中需要注重的問(wèn)題和技巧。

冗余的DOM操作

DOM操作眾所周知是比較重量級(jí)的。有用的限制交互可以大大的幫助你提高你的代碼的性能?？纯聪旅孢@段代碼：

// anti-pattern

for （var i = 0; i < 100; i++）{

var li = $（“

”）.html（“This is list item #” + （i+1））;

$（“#someUL”）.append（li）;

}

這段代碼循環(huán)修改DOM100次，但是創(chuàng)建了100個(gè)jQuery對(duì)象。更好的體例是使用document片段，或者創(chuàng)建一個(gè)String來(lái)包含100個(gè)

元素，然后再添加到DOM中去。這里你只需要執(zhí)行一次DOM操作。

優(yōu)化后的代碼：

var liststring = “”;

for （var i = 100; i > 0; i--）{

liststring += “

This is list item #” + （99- i）;

}

document.getElementById（“someUL”）.innerHTML（liststring）;

以上代碼只調(diào)用了一次DOM操作，但是大量使用了字符串的連接操作。除了使用字符串連接，我們可以使用數(shù)組來(lái)顯示。

var liststring = “

”

var lis = ［］;

for （var i = 100; i > 0; i--）{

lis.push（“This is list item #” + （99- i））;

}

liststring += lis.join（“

”） + “

”;

document.getElementById（“someUL”）.innerHTML（liststring）;

當(dāng)創(chuàng)建大量的字符串時(shí)，保存每一個(gè)字符串到數(shù)組里，然后調(diào)用join（）方法來(lái)連接。在javascript中，這是不使用模板類庫(kù)和框架外的好高效的字符串連接操作體例。

在線調(diào)試

變量和方法名不一致

這可能不是一個(gè)性能問(wèn)題，但是對(duì)于編程來(lái)說(shuō)特別很是主要，特殊是當(dāng)你需要維護(hù)別人的代碼?？纯慈缦吕樱?/p>

var foo = “bar”;

var plant = “green”;

var car = “red”;

假如你再添加一個(gè)變量叫“something”可能就不是那么合適了，你應(yīng)該保持命名的一致。這也就是為什么在一些編程語(yǔ)言中，我們使用大寫變量名來(lái)代表常量。

對(duì)于方法來(lái)說(shuō)，我們也需要保持一致，如下：

function subtractFive（number）{

return number - 5;

}

假如你有一個(gè)以上的減5方法，那么你假如定義加5方法的話，應(yīng)該使用如下命名體例：

function addFive（number）{

return number + 5;

}

有時(shí)候假如你定義一個(gè)返回方法，那么一般使用getXXX（），假如你只是執(zhí)行操作不返回，那么好好使用doXXX（）方法名。

構(gòu)造器方法好好使用類似其它語(yǔ)言的命名體例，首字母大寫，如下：

function Gbin1（color）{

this.color = color;

}

不管怎么，你都應(yīng)該盡量的讓你的命名更加富有意義，能夠給別人更多的信息。

在for..in循環(huán)中使用 hasOwnProperty 方法

在javascript中數(shù)組是不關(guān)聯(lián)的。而對(duì)象來(lái)說(shuō)是hashtable類型的。你可以使用for 。.. in循環(huán)來(lái)迭代對(duì)象屬性。如下：

for （var prop in someObject） {

alert（someObject［prop］）; // alert‘s value of property

}

但是問(wèn)題在于，以上代碼會(huì)循環(huán)proptype chain中的所有的屬性，有時(shí)候這樣會(huì)出錯(cuò)，你可能只想使用現(xiàn)實(shí)存在的屬性。使用hasOwnProperty方法可以幫助你解決這個(gè)問(wèn)題。

for （var prop in someObject） {

if （someObject.hasOwnProperty（prop）） {

alert（someObject［prop］）; // alert‘s value of property

}

}

這個(gè)方法可以幫助你得到現(xiàn)實(shí)存在的屬性值。

比較boolean值

比較boolean值特別很是虛耗計(jì)算時(shí)間?？纯聪旅孢@個(gè)例子：

if （foo == true） {

// do something for true

} else {

// do something for false

}

注重上面的==true條件，這個(gè)特別很是沒(méi)有需要因?yàn)閒oo自己就是boolean值。假如比較，應(yīng)該使用如下代碼：

if （foo） {

// do something for true

} else {

// do something for false

}

或者測(cè)試foo為false，如下：

if （！foo） {

// do something for true

}else {

// do something for false

}

事件綁定

事件在javascript中是特別很是的復(fù)雜的話題。以往我們使用行內(nèi)oncick事件的時(shí)代已經(jīng)曩昔了。。

我們應(yīng)該使用事件bubbling或者delegation。

舉個(gè)例子，假如我們需要讓一組圖片展示到lightbox window里。那么下面這段代碼你不應(yīng)該使用。

這里我們使用jQuery作為例子。

HTML：.......

javascript（不推薦的寫法）：

$（‘a(chǎn)’）.on（‘click’， function（） {

callLightbox（this）;

}）;

這樣書寫會(huì)導(dǎo)致綁定事件到每一個(gè)鏈接元素，好好綁定到指定的圖片容器，如下：

$（“#grid-container”）.on（“click”， “a”， function（event） {

callLightbox（event.target）;

}）;

在線調(diào)試

避免冗余的比較

在javascript和PHP中：

// javascriptreturn foo.toString（） ！== “” ？ true ： false;

// php

return （something（）） ？ true ： false;

但是條件比較永遠(yuǎn)返回true或者false，所以你沒(méi)有需要清楚的添加返回值。以下代碼即可：

// javascriptreturn foo.toString（） ！== “”;

// php

return something（）;

希望大家能夠理解并且了解如何避免代碼書寫中的問(wèn)題，假如你有其它的例子，請(qǐng)與我們分享！

當(dāng)前文章：初學(xué)者應(yīng)該了解的編程陷阱javascript篇
當(dāng)前URL：http://jinyejixie.com/news39/286989.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、建站公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)