91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

一、簡(jiǎn)化代碼
采用更為簡(jiǎn)短的寫法，不僅可以減少輸入的字符數(shù)，還可以減少文件大小。大部分采用簡(jiǎn)單寫法的代碼，執(zhí)行效率都有輕微提高。

1.1  簡(jiǎn)化常用對(duì)象定義：
使用 var obj = {}; 代替 var obj = new Object();
使用 var arr = []; 代替 var arr = new Array();

1.2  精簡(jiǎn)if語句
三元操作符可以有效精簡(jiǎn)只涉及賦值傳值操作的if語句，比如
var score = 60, grade;
if (score < 60) {
    grade = “不及格”;
} else {
    grade = “及格”;
}
可以精簡(jiǎn)為：
var score = 60;
var grade = score < 60 ? “不及格” : “及格”;
三元操作符也支持嵌套，但是嵌套的層次太多會(huì)影響程序的可讀性，這方面要多加斟酌。

1.3  使用JSON
JSON是一種輕量級(jí)的數(shù)據(jù)格式，輕量級(jí)首先體現(xiàn)在它的結(jié)構(gòu)定義非常簡(jiǎn)單。
var obj = {};
obj.p1 = ‘a(chǎn)’;
obj.p2 = ‘b’;
obj.p3 = ‘c’;
可精簡(jiǎn)為：
var obj = {
    p1 : ‘a(chǎn)’,
    p2 : ‘b’,
    p3 : ‘c’
};

二、使用高效率的代碼
網(wǎng)上流傳的效率優(yōu)化文章非常多，一些比較專業(yè)的Javascript書籍也談到了不少，因此，這里就只列出一些很少談到的。

2.1  精簡(jiǎn)循環(huán)體
循環(huán)的效率很大程度上是由循環(huán)體決定的，與之相比，用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);
        }
    }
}
循環(huán)每執(zhí)行一次，都會(huì)判斷window對(duì)象的attachEvent或addEventListener是否存在，其實(shí)這個(gè)僅判斷一次也就夠了；此外，“”on” + eventName”的字符串拼接也會(huì)重復(fù)執(zhí)行。優(yōu)化如下：
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  盡量使用原生的函數(shù)而不是自定義函數(shù)
當(dāng)你對(duì)Javascript的內(nèi)置類型變量執(zhí)行某項(xiàng)操作時(shí)，你應(yīng)該先查查這項(xiàng)操作是否有原生的方法。
要生成一個(gè)數(shù)組的副本，你會(huì)怎么做呢？遍歷數(shù)組元素然后逐個(gè)賦值到另一個(gè)數(shù)組，這似乎是唯一的方法。其實(shí)，原生的Array.prototype.slice就可以達(dá)到復(fù)制的目的。這個(gè)方法可以從某個(gè)數(shù)組返回選定的元素，且不影響原來的數(shù)組。如果參數(shù)留空，返回的就是全部元素。
Array.prototype.slice還可以對(duì)某些不是數(shù)組而又能通過數(shù)字索引訪問的類型進(jìn)行操作，比如arguments：
function test() {
    alert(Array.prototype.slice.call(arguments));
}
test(1, 2, 3); // output “1,2,3″
在Firefox下，它甚至可以對(duì)HtmlCollection進(jìn)行操作。可惜在IE下不行。

另一個(gè)例子是數(shù)組排序，一般情況下，我們不需要另外寫排序算法，用原生的Array.prototype.sort就夠了。sort方法只有一個(gè)參數(shù)，該參數(shù)是一個(gè)函數(shù)，決定兩個(gè)相比較的元素誰在前誰在后，默認(rèn)是按照字符順序排序，比如11會(huì)排在2之前。要按數(shù)字大小排序，可以這樣寫：
var arr = [11, 2, 0, 12, 33];
arr.sort(
    function(a, b) {
        return a - b;
    }
);
也可以按照對(duì)象的某個(gè)屬性進(jìn)行排序：
var arr = [
    { id : 11 },
    { id : 0 },
    { id : 22 }
];
arr.sort(
    function(a, b) {
        return a.id - b.id;
    }
);

2.3  數(shù)組去重復(fù)
Array類型并沒有提供去重復(fù)的方法，如果要把數(shù)組的重復(fù)元素干掉，那得自己想辦法：
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;
}
總體思路是把數(shù)組元素逐個(gè)搬運(yùn)到另一個(gè)數(shù)組，搬運(yùn)的過程中檢查這個(gè)元素是否有重復(fù)，如果有就直接丟掉。從嵌套循環(huán)就可以看出，這種方法效率極低。我們可以用一個(gè)hashtable的結(jié)構(gòu)記錄已有的元素，這樣就可以避免內(nèi)層循環(huán)。恰好，在Javascript中實(shí)現(xiàn)hashtable是極為簡(jiǎn)單的，改進(jìn)如下：
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;
}

三、使代碼更易讀、更好維護(hù)
無論是在開發(fā)中還是開發(fā)后，保持代碼清晰易讀可以更快更準(zhǔn)確地修改代碼。

3.1  連接HTML字符串
相信做前端開發(fā)的朋友都受過這個(gè)折磨：連接HTML的時(shí)候被可惡的單引號(hào)、雙引號(hào)搞得頭昏腦脹。比如：
element.innerHTML = ‘<a href=”‘ + url + ‘” onclick=”alert(\” + msg + ‘\’);”>’ + text + ‘</a>’;
這里介紹一個(gè)字符串格式化函數(shù)：
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];
        }
    );
};
調(diào)用方法很簡(jiǎn)單：
element.innerHTML = String.format(’<a href=”%1″ onclick=”alert(\’%2\’);”>%3</a>’, url, msg, text);
意思就是用第n個(gè)參數(shù)把%n替換掉。這樣一來清晰多了吧。

3.2  為您的程序打造一個(gè)Config配置對(duì)象
編寫Java或者C#程序的時(shí)候，我們一般會(huì)從XML讀取程序的配置信息。在Javascript里面，用XML做配置信息不大劃算，一方面要多請(qǐng)求一個(gè)XML文件或者把XML字符串轉(zhuǎn)換為XML對(duì)象，另一方面XML對(duì)象的方法比較復(fù)雜冗長(zhǎng)。輕量級(jí)的JSON是最好的選擇。
程序中的常量應(yīng)該放到Config配置對(duì)象中，比如Ajax請(qǐng)求的Url、某個(gè)操作的提示等，例如：
var Config = {
    ajaxUrl : “test.jsp”,
    successTips : “請(qǐng)求完成”
};
如果Config的數(shù)量較多，可以根據(jù)配置類型多嵌套一層，比如：
var Config = {
    url : {
        src1 : “test1.jsp”,
        src2 : “test2.jsp”,
        .
        .
    },
    tips : {
        src1Suc : “請(qǐng)求1完成”,
        src2Suc: “請(qǐng)求2完成”,
        .
        .
    }
};
Config應(yīng)放置于程序的最前面，方便查看和修改。

該文章在 2010/8/17 23:37:32 編輯過