Javascript 代码也可以变得优美的实现方法


Posted in Javascript onJune 22, 2009

一、简化代码
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
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; 
}

三、使代码更易读、更好维护
无论是在开发中还是开发后,保持代码清晰易读可以更快更准确地修改代码。
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应放置于程序的最前面,方便查看和修改。
Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
微信小程序如何实现在线客服功能
Oct 16 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
PNG背景在不同浏览器下的应用
Jun 22 #Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 #Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 #Javascript
javascript 异常处理使用总结
Jun 21 #Javascript
js 匿名调用实现代码
Jun 19 #Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 #Javascript
JS 分号引起的一段调试问题
Jun 18 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
深入了解Django中间件及其方法
2019/07/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
技术总监岗位职责
2013/12/05 职场文书
调查研究项目计划书
2014/04/29 职场文书
男性健康日的活动方案
2014/08/18 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
python缺失值的解决方法总结
2021/06/09 Python