- 浏览: 239172 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
jy00509336:
wgrmmtmr 写道let g:miniBufExplMap ...
用Gvim建立IDE编程环境 (Windows篇) -
wgrmmtmr:
let g:miniBufExplMapWindowsNavV ...
用Gvim建立IDE编程环境 (Windows篇) -
jy00509336:
avi9111 写道还是同样问题,你这个代码ctrl+c和ct ...
JTextField只允许输入数字和字母 -
avi9111:
还是同样问题,
你这个代码
ctrl+c和ctrl+v粘贴 ...
JTextField只允许输入数字和字母 -
jy00509336:
ILoveDOUZHOU 写道windows下为什么使用vim ...
用Gvim建立IDE编程环境 (Windows篇)
转载自: http://www.ued163.com/?p=422
一、简化代码
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
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 = ‘<a href=”‘ + url + ‘” onclick=”alert(\” + msg + ‘\’);”>’ + text + ‘</a>’;
这里介绍一个字符串格式化函数:
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替换掉。这样一来清晰多了吧。
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应放置于程序的最前面,方便查看和修改。
一、简化代码
采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。
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 = ‘<a href=”‘ + url + ‘” onclick=”alert(\” + msg + ‘\’);”>’ + text + ‘</a>’;
这里介绍一个字符串格式化函数:
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替换掉。这样一来清晰多了吧。
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应放置于程序的最前面,方便查看和修改。
发表评论
-
禁用JavaWeb应用中URL上包含的jsessionid
2014-03-21 13:02 1543Java Web 应用似乎总有这样的情况,有事没事总是要在 ... -
java操作保存图片到oracle数据库及获取图片到页面显示
2014-03-21 13:00 1347《--------保存图片到数 ... -
jsp页面通过java调用oracle blob字段显示图片
2014-03-21 12:58 1047转载自:http://blog.csdn.net/javad ... -
正则表达式中在多个匹配的内容中间加字符
2014-03-04 21:35 852selectedText = selectedText.rep ... -
ServletFileUpload parseRequest异常处理
2013-07-16 17:31 1667今天在linux服务器上发布程序后,上传图片处理异常,详情如 ... -
log4j时区设置
2013-03-21 17:23 32232013年3月19日更新程序后,服务器上的码表一直加载不上, ... -
JDBC连接报ORA-12505,sid无法找到
2013-02-06 11:10 3588转载自:http://www.calcprofit.com/ ... -
Javascript网页打印大全
2012-10-11 09:21 1265转载自:http://www.cnblogs.com/gaku ... -
Servlet编程之用Servlet显示图片
2012-09-04 21:38 1203转载自:http://developer.51cto.com/ ... -
tomcat JNDI 连接池
2012-08-02 10:59 959一.在tomcat_home/common/lib下放入 ... -
JTextArea->JTextPane 解决文字对齐方式的问题
2012-04-09 15:08 4141转载自:http://www.blogjava.net/cer ... -
jquery下json数组的操作用法实例
2011-08-13 10:51 3178转载自:http://blog.csdn.ne ... -
能盖住Select的Div
2011-07-15 23:16 922<html> <head> ... -
jQuery.extend 函数详解
2011-07-11 10:12 897转载自:http://www.cnblogs.com/Ra ... -
利用js获取服务器时间的两个简单方法
2011-07-08 14:57 1572有时用js来获取服务器时间。一般会用System.DateTi ... -
jQuery获取表单项目以及AJAX应用
2011-07-07 09:28 1101转载自:http://www.tsingfeng.com/?p ... -
velocity date.format
2011-06-27 19:39 4072Today's date is: $dateT ... -
Java中修改derby.log文件的路径
2011-04-29 15:26 2103项目中用到derby嵌入式数据库。可是其log文件derby. ... -
socket, nio socket 及nio socket框架MINA总结
2011-04-07 16:55 1166来源:http://blog.csdn.net/lcllc ... -
PreparedStatement 数据大小超出此类型的最大值
2011-03-04 11:17 1918转载自:http://heath-derek.iteye.co ...
相关推荐
ppk谈JavaScript JavaScript入门必读之书 本书全方位介绍了JavaScript,主要讨论了...本书适合具有一定网页开发经验的Web开发人员阅读。 本资料共包含以下附件: ppk谈JavaScript.pdf 和 ppk谈JavaScript源代码
本书全方位介绍了JavaScript,主要讨论了浏览器兼容性、可访问性、底层语法以及与HTML结构层的协同等问题。书中既包括理论性的讲解,又给出了相关的示例脚本以..., 本书适合具有一定网页开发经验的Web开发人员阅读。
内容简介回到顶部↑本书全方位介绍了javascript,主要讨论了浏览器兼容性、可访问性、底层语法以及与html结构层的协同等问题。书中既包括理论性的讲解,又给出了相关...本书适合具有一定网页开发经验的web开发人员阅读
本书全方位介绍了JavaScript,主要讨论了浏览器兼容性、可访问性、底层语法以及与HTML结构层的协同等问题。书中既包括理论性的讲解,又给出了相关的示例脚本以进行...本书适合具有一定网页开发经验的Web开发人员阅读。
从javascript语言本身谈项目实战 dulao5 2005-1-15 随着ajax的升温,javascript越来越得到人们的重视。...我想就我的经验谈一点浅见。 一。 开发人员需要认真学习javascript语言本身 由于javascri
本书全方位介绍了JavaScript,主要讨论了浏览器兼容性、可访问性、底层语法以及与HTML结构层的协同等问题。书中既包括理论性的讲解,又给出了相关的示例脚本以进行...本书适合具有一定网页开发经验的Web开发人员阅读。
JavaScript是我在C语言之后接触的第二...当然限于作者水平有限,也没有什么开发经验,所以难免有疏漏之处,还望批评指正。 JavaScript的对象 对象是什么 JavaScript代码当中随处可见new关键字,很容易让人产生误解,认
第2章 编程经验谈6则 经验01 培养编程的兴趣 经验02 编程学习经验谈 经验03 代码规范经验谈 经验04 数据库设计经验谈 经验05 项目实战经验谈 第2篇 陷阱或谬误篇 第3章 不可忽视的30个技术陷阱 陷阱01 版本不一致...
软件设计模式(Design pattern),又称设计模式,是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。 ...
也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面关键字 网站首页的自动语言切换 应用系统的多语言支持 (一) 应用系统的多语言支持 (二) 自动...
大部分是关于开发和Javascript的,但我也谈到了除codinug之外的其他主题。 我建议您订阅以保持最新! :diamond_suit: 我想通过我的帐户和频道创建在线形象。 期待与更多人接触并分享我的知识。 :diamond_suit: 我...
JavaScript PHP iOS Android HTML5 CSS3 Linux C++ Python C# Node.Js 一文让你彻底理解 Java HashMap 和 ConcurrentHashMap 2018-07-25 分类:JAVA开发、编程开发、首页精华0人评论 来源:...
在线简历 设计和开发我的在线简历(HTML5 && CSS3 && Javascript),使其既简单又时尚又具有影响力,简历谈到了我个人实施的一些项目以及我目前的工作经验。 请随时在提到的任何社交网站上进行连接。
在开发中,仔细观察出错信息,或者运行不正常的信息,是你要做的第一件事。 读清楚了,才能在以后的步骤中有的放矢,哭了半天,总要知道哭的是谁才成。 这里又分三种情况: A:错误信息读懂了,那么请进入2步...
下面开讲: 谈起ajax做过web开发的都很是熟悉,就是经由过程xmlhttp request与服务器端通信而避免页面按f5。也就是我们常说的”无刷新”,至于这里面的原理我就不懂,哪个懂的话,教一下我啊,谢谢! 凡要使用...