如何编写高效简洁的JavaScript代码

JavaScript开发经验谈
服务器君一共花费了555.733 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

简化代码

采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。

1. 简化常用对象定义

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

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

2. 精简if语句

三元操作符可以有效精简只涉及赋值传值操作的if语句,比如:

var score = 60, grade;
if (score < 60) {
    grade = "不及格";
} else {
    grade = "及格";
}

可以精简为:

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

三元操作符也支持嵌套,但是嵌套的层次太多会影响程序的可读性,这方面要多加斟酌。

3. 使用JSON

JSON是一种轻量级的数据格式,轻量级首先体现在它的结构定义非常简单。

var obj = {};
obj.p1 = 'a';
obj.p2 = 'b';
obj.p3 = 'c';

可精简为:

var obj = {
    p1 : 'a',
    p2 : 'b',
    p3 : 'c',
};

使用高效率的代码

网上流传的效率优化文章非常多,一些比较专业的Javascript书籍也谈到了不少,因此,这里就只列出一些很少谈到的。

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. 尽量使用原生的函数而不是自定义函数

当你对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;
    }
);

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;
}

使代码更易读、更好维护

无论是在开发中还是开发后,保持代码清晰易读可以更快更准确地修改代码。

1. 连接HTML字符串

相信做前端开发的朋友都受过这个折磨:连接HTML的时候被可恶的单引号、双引号搞得头昏脑胀。比如:

element.innerHTML = '<a href="' + url + '" onclick="alert(" + msg + '');">' + 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('<a href="%1" onclick="alert('%2');">%3</a>', url, msg, text);

意思就是用第n个参数把%n替换掉。这样一来清晰多了吧。

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.nowamagic.net/librarys/veda/detail/346,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/346

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《算法导论(原书第2版)》 科曼(Cormen T.H.) (作者), 等 (作者, 译者), 潘金贵 (译者)

《算法导论(原书第2版)》一书深入浅出,全面地介绍了计算机算法。对每一个算法的分析既易于理解又十分有趣,并保持了数学严谨性。本书的设计目标全面,适用于多种用途。涵盖的内容有:算法在计算中的作用,概率分析和随机算法的介绍。本书专门讨论了线性规划,介绍了动态规划的两个应用,随机化和线性规划技术的近似算法等,还有有关递归求解、快速排序中用到的划分方法与期望线性时间顺序统计算法,以及对贪心算法元素的讨论。本书还介绍了对强连通子图算法正确性的证明,对哈密顿回路和子集求和问题的NP完全性的证明等内容。全书提供了900多个练习题和思考题以及叙述较为详细的实例研究。

更多计算机宝库...