分享
 
 
 

谈谈如何高效开发javascript

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

一、简化代码

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有