談談如何高效開發javascript

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

一、簡化代碼

採用更為簡短的寫法，不僅可以減少輸入的字元數，還可以減少檔案大小。 大部分採用簡單寫法的代碼，執行效率都有輕微提高。

1.1 簡化常用物件定義：

使用 var obj = {}; 代替 var obj = new Object();

使用 var arr = []; 代替 var arr = new Array();

1.2 精簡if語句

三元操作符可以有效精簡只涉及賦值傳值操作的if語句，比如

var score = 60, grade;

if (score < 60) {

grade = 「不及格」;

} else {

grade = 「及格」;

}

可以精簡為：

var score = 60;

var grade = score < 60 ? 「不及格」 : 「及格」;

三元操作符也支援嵌套，但是嵌套的層次太多會影響程式的可讀性，這方面要多加斟酌。

1.3 使用JSON

JSON是一種羽量級的資料格式，羽量級首先體現在它的結構定義非常簡單。

var obj = {};

obj.p1 = ‘a’;

obj.p2 = ‘b’;

obj.p3 = ‘c’;

可精簡為：

var obj = {

p1 : ‘a’,

p2 : ‘b’,

p3 : ‘c’

};

二、使用高效率的代碼

網上流傳的效率優化文章非常多，一些比較專業的JAVAscript書籍也談到了不少，因此，這裡就只列出一些很少談到的。

2.1 精簡循環體

迴圈的效率很大程度上是由循環體決定的，與之相比，用for還是while的差別就太小了。 考慮如下的代碼，其功能是為某一批元素添加事件：

function addEvent(elems, eventName, handler) {

for (var i = 0, len = elems.length; i < len; i++) {

if (window.attachEvent) {

elems[i].attachEvent(」on」 + eventName, handler);

} else if (window.addEventListener) {

elems[i].addEventListener(eventName, handler, false);

}

}

}

迴圈每執行一次，都會判斷window物件的attachEvent或addEventListener是否存在，其實這個僅判斷一次也就夠了;此外，「」on」 + eventName」的字串拼接也會重複執行。 優化如下：

function addEvent(elems, eventName, handler) {

var i = -1, len = elems.length;

if (window.attachEvent) {

eventName = 「on」 + eventName;

while (++i < len) {

elems[i].attachEvent(eventName, handler);

}

} else if (window.addEventListener) {

while (++i < len) {

elems[i].addEventListener(eventName, handler, false);

}

}

}

2.2 儘量使用原生的函數而不是自訂函數

當你對JAVAscript的內置類型變數執行某項操作時，你應該先查查這項操作是否有原生的方法。

要生成一個陣列的副本，你會怎麼做呢?遍歷陣列元素然後逐個賦值到另一個陣列，這似乎是唯一的方法。 其實，原生的Array.prototype.slice就可以達到複製的目的。 這個方法可以從某個陣列返回選定的元素，且不影響原來的陣列。 如果參數留空，返回的就是全部元素。

Array.prototype.slice還可以對某些不是陣列而又能通過數位索引訪問的類型進行操作，比如arguments：

function test() {

alert(Array.prototype.slice.call(arguments));

}

test(1, 2, 3); output 「1,2,3″

在Firefox下，它甚至可以對HtmlCollection進行操作。 可惜在IE下不行。

另一個例子是陣列排序，一般情況下，我們不需要另外寫排序演算法，用原生的Array.prototype.sort就夠了。 sort方法只有一個參數，該參數是一個函數，決定兩個相比較的元素誰在前誰在後，預設是按照字元順序排序，比如11會排在2之前。 要按數位大小排序，可以這樣寫：

var arr = [11, 2, 0, 12, 33];

arr.sort(

function(a, b) {

return a - b;

}

);

也可以按照物件的某個屬性進行排序：

var arr = [

{ id : 11 },

{ id : 0 },

{ id : 22 }

];

arr.sort(

function(a, b) {

return a.id - b.id;

}

);

2.3 陣列去重複

Array類型並沒有提供去重複的方法，如果要把陣列的重複元素幹掉，那得自己想辦法：

function unique(arr) {

var result = [], isRepeated;

for (var i = 0, len = arr.length; i < len; i++) {

isRepeated = false;

for (var j = 0, len = result.length; j < len; j++) {

if (arr[i] == result[j]) {

isRepeated = true;

break;

}

}

if (!isRepeated) {

result.push(arr[i]);

}

}

return result;

}

總體思路是把陣列元素逐個搬運到另一個陣列，搬運的過程中檢查這個元素是否有重複，如果有就直接丟掉。 從嵌套迴圈就可以看出，這種方法效率極低。 我們可以用一個hashtable的結構記錄已有的元素，這樣就可以避免內層迴圈。 恰好，在JAVAscript中實現hashtable是極為簡單的，改進如下：

function unique(arr) {

var result = [], hash = {};

for (var i = 0, elem; (elem = arr[i]) != null; i++) {

if (!hash[elem]) {

result.push(elem);

hash[elem] = true;

}

}

return result;

}

三、使代碼更易讀、更好維護

無論是在開發中還是開發後，保持代碼清晰易讀可以更快更準確地修改代碼。

3.1 連接HTML字串

相信做前端開發的朋友都受過這個折磨：連接HTML的時候被可惡的單引號、雙引號搞得頭昏腦脹。 比如：

element.innerHTML = ‘’ + text + ‘’;

這裡介紹一個字串格式化函數：

String.format = function(str) {

var args = arguments, re = new RegExp(」%([1-" + args.length + "])」, 「g」);

return String(str).replace(

re,

function($1, $2) {

return args[$2];

}

);

};

調用方法很簡單：

element.innerHTML = String.format(’%3’, url, msg, text);

意思就是用第n個參數把%n替換掉。 這樣一來清晰多了吧。

3.2 為您的程式打造一個Config設定物件

編寫JAVA或者C#程式的時候，我們一般會從XML讀取程式的配置資訊。 在JAVAscript裡面，用XML做配置資訊不大划算，一方面要多請求一個XML檔或者把XML字串轉換為XML物件，另一方面XML物件的方法比較複雜冗長。 羽量級的JSON是最好的選擇。

程式中的常量應該放到Config設定物件中，比如Ajax請求的Url、某個操作的提示等，例如：

var Config = {

ajaxUrl : 「test.jsp」,

successTips : 「請求完成」

};

如果Config的數量較多，可以根據配置類型多嵌套一層，比如：

var Config = {

url : {

src1 : 「test1.jsp」,

src2 : 「test2.jsp」,

.

.

},

tips : {

src1Suc : 「請求1完成」,

src2Suc: 「請求2完成」,

.

.

}

};

Config應放置於程式的最前面，方便查看和修改。

　　文章來源：HTTP://bbs.seuuo.com/html/13/category-catid-13.html