- 浏览: 395908 次
- 性别:
- 来自: 北京
文章分类
最新评论
一、简化代码
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
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 使用JSONJSON是一种轻量级的数据格式,轻量级首先体现在它的结构定义非常简单。
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:
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;
}
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
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 使用JSONJSON是一种轻量级的数据格式,轻量级首先体现在它的结构定义非常简单。
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:
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;
}
发表评论
-
[转]js获取滚动条位置:绝对有效(经验之谈)
2010-02-26 13:33 7141获取坐标: IE (event.x event.y) 获取滚 ... -
Javascript 最简单检测网速的方法和应用
2010-01-18 10:47 2002Javascript 最简单检测网速的方法和应用。网速很慢,但 ... -
js自定义对象
2009-11-18 14:49 34716一,概述 在Java语言中,我们可以定义自己的类,并根据这 ... -
IE6,IE7和FireFox兼容处理(持续发现中)
2009-11-18 13:30 22721. event.srcElement 属性: IE下可以使用 ... -
Javascript的IE和Firefox兼容性汇编
2009-11-18 13:29 829微软关于IE、Firefox、Opera和Safari的Jav ... -
FF IE 兼容动态增加onclick事件
2009-11-17 13:36 1967<!DOCTYPE HTML PUBLIC &quo ... -
javascript十个最常用的自定义函数
2009-11-17 11:21 919如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的 ... -
js 事件的动态添加与注销
2009-11-17 11:02 1084IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
JavaScript通过attachEvent和detachEvent方法处理带参数的函数
2009-11-17 10:59 20971 <!DOCTYPE html PUBLIC &quo ... -
如何使用Javascript格式化日期显示
2009-09-02 15:36 2301我们都知道在Java和PHP语 ... -
Javascript操作Select和Option
2009-08-25 10:54 1199注意:Option中的O是要大写的,不然语法报错 1 ... -
javascript下的时间函数详解
2009-08-21 13:18 1064Date (对象) Date 对象能够使你获得相对于国际标准 ... -
JS网页高度相关
2009-08-18 11:43 1647<SCRIPT LANGUAGE=" ... -
JS 中面向对象的5种写法
2009-08-12 12:16 1442http://www.iteye.com/topic/4344 ... -
用javasript判断一个图片的宽度,如果宽度小于一个数值,就以正常显示,大于就设置宽度width属性
2009-08-12 10:47 1286<script language=" ... -
js替换br 为换行 textarea
2009-07-30 15:41 4624我们有正则表达式来替换内容中的br让它在能textarea中也 ... -
js操作html增加删除tr/td
2009-07-17 13:33 5592总结:可以通过parentElement定位父级元素,有待验证 ... -
判断页面属于哪个iframe
2009-07-16 13:53 1336在相应iframe的页面中使用window.name 可以得到 ... -
最基础的JS添加样式实例
2009-07-15 15:32 1678<style> .test { borde ... -
Js动态添加样式
2009-07-15 15:31 4002<script type="text/ja ...
相关推荐
在本主题中,我们将深入探讨一个特别的案例——"经典有趣的整人代码",这是一种利用JavaScript编写的小程序,旨在提供娱乐性或者作为趣味性的编程实践。 首先,JavaScript的基本语法是基于ECMAScript规范的,它允许...
《Effective JavaScript:编写高质量JavaScript代码的68个有效方法》是David Herman撰写的一本JavaScript编程指南,该书基于作者在Ecma的JavaScript标准化委员会的工作经验,深入探讨了JavaScript的内部工作机制、...
资源名称:编写可靠的JAVAscript代码 测试驱动开发JAVAscript商业软件内容简介:《编写可靠的Javascript代码 测试驱动开发Javascript商业软件》分为5个部分:第Ⅰ部分“奠定坚实的基础”...
标题中的“用javascript编写swing程序源码”表明这是一个关于使用JavaScript来实现Java Swing程序的示例。Java Swing是一个用于创建图形用户界面(GUI)的Java库,而JavaScript通常用于前端Web开发。这里的创新之处...
项目:使用 JavaScript 编写的经典 台球游戏(附源代码) 经典的javascript 台球游戏是一款基于球杆或台球的游戏。整个编程都使用 HTML、CSS 和 JavaScript。这款游戏完全使用 javascript 编写,并使用了一些精灵...
项目:使用 JavaScript 编写的 Code Cracker 游戏及其源代码 javascript 中的密码破解游戏是一个用于生成秘密随机数的简单程序。整个编程都是用 HTML、CSS 和 JavaScript 编写的。该项目将帮助用户创建一个不同的四...
在JavaScript编程领域,编写优美、高效且易于维护的代码是一项重要的技能。这不仅关乎个人的编程风格,也直接影响到团队协作和项目的长期可持续性。在《关于如何编写优美的JavaScript代码之我见》这篇博文中,作者...
使用 JavaScript 编写的书店源代码 项目:使用 JavaScript 编写的书店源代码 图书商店是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。用户可以添加图书详细信息的数量,您可以看到存储在列表...
用JavaScript编写的一款比较经典的日历代码
使用 JavaScript 编写的科学计算器(附源代码) 项目:使用 JavaScript 编写的科学计算器(附源代码) 科学计算器是 HTML5、CSS 和 JavaScript 中的一个简单项目。该项目用于解决数字的数学计算。您可以在此项目...
第Ⅲ部分“测试和编写高级JavaScript特性”描述了如何使用和测试 JavaScript语言更高级的特性。 第Ⅳ部分“测试中的特殊主题”提供了测试DOM操作的样例,还演示了用于增 强代码标准的静态分析工具的使用。第Ⅴ部分...
JavaScript编写科学计算器是一种常见的Web开发任务,用于创建交互式的用户界面,为用户提供各种数学运算功能。在这个项目中,我们将深入探讨如何使用JavaScript语言构建一个功能丰富的科学计算器,并将其内嵌在HTML...
本资源包含了一段使用JavaScript编写的动态爱心动画代码。该代码实现了在网页上展示生动、细腻的爱心动画效果,可通过简单的参数调整来改变动画的颜色、大小和速度等属性。 使用人群: 前端开发者:可以将这段...
**AngularJS 编写优美JavaScript代码指南** 在前端开发领域,AngularJS 是一款非常流行的JavaScript框架,它提供了丰富的功能和工具来构建复杂的应用程序。本文将聚焦于如何使用AngularJS编写更加优雅、易于维护的...
这是用 javascript 编写的一款简单的赌场风格游戏。您所要做的就是掷骰子,并尝试比对手更快达到 100 分。这是一款简单的骰子游戏,游戏规则非常简单。您将掷骰子并尝试获得尽可能多的积分。请记住,连续两次掷出 6 ...
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
3. **元编程**:JavaScript支持元编程,通过运行时修改自身代码来生成新的代码,例如使用eval()函数或Function构造函数。 4. **AST(抽象语法树)**:编译器和解释器处理代码时会生成AST,开发者可以利用AST库(如...
[Addison-Wesley Professional] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版) [Addison-Wesley Professional] Effective JavaScript 68 Specific Ways to Harness the Power of ...
本人用JavaScript编写的网页计算器,有简单的各项运算,经运行调试,证明还不错。适合初学者及相关人员学习借鉴。不足之处还请大家指出。
使用 JavaScript 编写的 Squareshooter 游戏及其源代码 项目:使用 JavaScript 编写的 Squareshooter 游戏(附源代码) 这款游戏是双人游戏。这是一款使用 JavaScript 编写的射击游戏,带有门户和强化道具。在...