Javascript開發經驗談

來源:互聯網
上載者:User
文章目錄
  • 一、簡化代碼
  • 二、使用高效率的代碼
  • 三、使代碼更易讀、更好維護
一、簡化代碼

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

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 = ‘<a href=”‘ + url + ‘” onclick=”alert(/” + msg + ‘/’);”>’ + text + ‘</a>’;
這裡介紹一個字串格式化函數:
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(’<a href=”%1″ onclick=”alert(/’%2/’);”>%3</a>’, 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://www.ued163.com/?p=422

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.