2023-10-20 分類: 網站建設
對于初學編程語言的同伙來說,經常會犯一些比較“經典”的錯誤。在這一系列文章中,我們將介紹如何讓初學編程的同伙避免一些基本的錯誤,并且了解如何準確的編程和開發(fā)代碼。
這一篇文章中,我們介紹5個javascript代碼開發(fā)中需要注重的問題和技巧。
冗余的DOM操作
DOM操作眾所周知是比較重量級的。有用的限制交互可以大大的幫助你提高你的代碼的性能??纯聪旅孢@段代碼:
// anti-pattern
for (var i = 0; i < 100; i++){
var li = $(“
$(“#someUL”).append(li);
}
這段代碼循環(huán)修改DOM100次,但是創(chuàng)建了100個jQuery對象。更好的體例是使用document片段,或者創(chuàng)建一個String來包含100個
元素,然后再添加到DOM中去。這里你只需要執(zhí)行一次DOM操作。
優(yōu)化后的代碼:
var liststring = “”;
for (var i = 100; i > 0; i--){
liststring += “
}
document.getElementById(“someUL”).innerHTML(liststring);
以上代碼只調用了一次DOM操作,但是大量使用了字符串的連接操作。除了使用字符串連接,我們可以使用數(shù)組來顯示。
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);
當創(chuàng)建大量的字符串時,保存每一個字符串到數(shù)組里,然后調用join()方法來連接。在javascript中,這是不使用模板類庫和框架外的好高效的字符串連接操作體例。
在線調試
變量和方法名不一致
這可能不是一個性能問題,但是對于編程來說特別很是主要,特殊是當你需要維護別人的代碼??纯慈缦吕樱?/p>
var foo = “bar”;
var plant = “green”;
var car = “red”;
假如你再添加一個變量叫“something”可能就不是那么合適了,你應該保持命名的一致。這也就是為什么在一些編程語言中,我們使用大寫變量名來代表常量。
對于方法來說,我們也需要保持一致,如下:
function subtractFive(number){
return number - 5;
}
假如你有一個以上的減5方法,那么你假如定義加5方法的話,應該使用如下命名體例:
function addFive(number){
return number + 5;
}
有時候假如你定義一個返回方法,那么一般使用getXXX(),假如你只是執(zhí)行操作不返回,那么好好使用doXXX()方法名。
構造器方法好好使用類似其它語言的命名體例,首字母大寫,如下:
function Gbin1(color){
this.color = color;
}
不管怎么,你都應該盡量的讓你的命名更加富有意義,能夠給別人更多的信息。
在for..in循環(huán)中使用 hasOwnProperty 方法
在javascript中數(shù)組是不關聯(lián)的。而對象來說是hashtable類型的。你可以使用for 。.. in循環(huán)來迭代對象屬性。如下:
for (var prop in someObject) {
alert(someObject[prop]); // alert‘s value of property
}
但是問題在于,以上代碼會循環(huán)proptype chain中的所有的屬性,有時候這樣會出錯,你可能只想使用現(xiàn)實存在的屬性。使用hasOwnProperty方法可以幫助你解決這個問題。
for (var prop in someObject) {
if (someObject.hasOwnProperty(prop)) {
alert(someObject[prop]); // alert‘s value of property
}
}
這個方法可以幫助你得到現(xiàn)實存在的屬性值。
比較boolean值
比較boolean值特別很是虛耗計算時間??纯聪旅孢@個例子:
if (foo == true) {
// do something for true
} else {
// do something for false
}
注重上面的==true條件,這個特別很是沒有需要因為foo自己就是boolean值。假如比較,應該使用如下代碼:
if (foo) {
// do something for true
} else {
// do something for false
}
或者測試foo為false,如下:
if (!foo) {
// do something for true
}else {
// do something for false
}
事件綁定
事件在javascript中是特別很是的復雜的話題。以往我們使用行內oncick事件的時代已經曩昔了。。
我們應該使用事件bubbling或者delegation。
舉個例子,假如我們需要讓一組圖片展示到lightbox window里。那么下面這段代碼你不應該使用。
這里我們使用jQuery作為例子。
HTML:.......
javascript(不推薦的寫法):
$(‘a’).on(‘click’, function() {
callLightbox(this);
});
這樣書寫會導致綁定事件到每一個鏈接元素,好好綁定到指定的圖片容器,如下:
$(“#grid-container”).on(“click”, “a”, function(event) {
callLightbox(event.target);
});
在線調試
避免冗余的比較
在javascript和PHP中:
// javascriptreturn foo.toString() !== “” ? true : false;
// php
return (something()) ? true : false;
但是條件比較永遠返回true或者false,所以你沒有需要清楚的添加返回值。以下代碼即可:
// javascriptreturn foo.toString() !== “”;
// php
return something();
希望大家能夠理解并且了解如何避免代碼書寫中的問題,假如你有其它的例子,請與我們分享!
當前文章:初學者應該了解的編程陷阱javascript篇
當前URL:http://m.rwnh.cn/news39/286989.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供手機網站建設、App開發(fā)、品牌網站設計、網站營銷、建站公司、自適應網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容