一、简化代码
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
1.1简化常用对象定义:
使用 var obj = {}; 代替 var obj = new object();
使用 var arr = []; 代替 var arr = new array();
1.2精简if语句
三元操作符可以有效精简只涉及赋值传值操作的if语句,比如
var score = 60, grade;
if (score var grade = score
三元操作符也支持嵌套,但是嵌套的层次太多会影响程序的可读性,这方面要多加斟酌。
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 if (window.attachevent) {
eventname = “on” + eventname;
while (++i } else if (window.addeventlistener) {
while (++i 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 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应放置于程序的最前面,方便查看和修改。
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/