提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript方法代码 实现 可以 变得 优美
2023-06-13 09:14:10 时间
一、简化代码
采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。
1.1简化常用对象定义：使用varobj={};代替varobj=newObject();
使用vararr=[];代替vararr=newArray();
1.2精简if语句三元操作符可以有效精简只涉及赋值传值操作的if语句，比如
varscore=60,grade;
if(score<60){
grade=“不及格”;
}else{
grade=“及格”;
}
可以精简为：
varscore=60;
vargrade=score<60?“不及格”:“及格”;
三元操作符也支持嵌套，但是嵌套的层次太多会影响程序的可读性，这方面要多加斟酌。
1.3使用JSONJSON是一种轻量级的数据格式，轻量级首先体现在它的结构定义非常简单。
varobj={};
obj.p1=‘a";
obj.p2=‘b";
obj.p3=‘c";
可精简为：
varobj={
p1:‘a",
p2:‘b",
p3:‘c"
};
二、使用高效率的代码
网上流传的效率优化文章非常多，一些比较专业的Javascript书籍也谈到了不少，因此，这里就只列出一些很少谈到的。
2.1精简循环体循环的效率很大程度上是由循环体决定的，与之相比，用for还是while的差别就太小了。考虑如下的代码，其功能是为某一批元素添加事件：
复制代码代码如下:

functionaddEvent(elems,eventName,handler){
for(vari=0,len=elems.length;i<len;i++){
if(window.attachEvent){
elems[i].attachEvent(”on”+eventName,handler);
}elseif(window.addEventListener){
elems[i].addEventListener(eventName,handler,false);
}
}
}

循环每执行一次，都会判断window对象的attachEvent或addEventListener是否存在，其实这个仅判断一次也就够了;此外，“”on”+eventName”的字符串拼接也会重复执行。优化如下：
复制代码代码如下:

functionaddEvent(elems,eventName,handler){
vari=-1,len=elems.length;
if(window.attachEvent){
eventName=“on”+eventName;
while(++i<len){
elems[i].attachEvent(eventName,handler);
}
}elseif(window.addEventListener){
while(++i<len){
elems[i].addEventListener(eventName,handler,false);
}
}
}

2.2尽量使用原生的函数而不是自定义函数当你对Javascript的内置类型变量执行某项操作时，你应该先查查这项操作是否有原生的方法。
要生成一个数组的副本，你会怎么做呢?遍历数组元素然后逐个赋值到另一个数组，这似乎是唯一的方法。其实，原生的Array.prototype.slice就可以达到复制的目的。这个方法可以从某个数组返回选定的元素，且不影响原来的数组。如果参数留空，返回的就是全部元素。
Array.prototype.slice还可以对某些不是数组而又能通过数字索引访问的类型进行操作，比如复制代码代码如下:
arguments：
arguments：
functiontest(){
alert(Array.prototype.slice.call(arguments));
}
test(1,2,3);//output“1,2,3″

在Firefox下，它甚至可以对HtmlCollection进行操作。可惜在IE下不行。
另一个例子是数组排序，一般情况下，我们不需要另外写排序算法，用原生的Array.prototype.sort就够了。sort方法只有一个参数，该参数是一个函数，决定两个相比较的元素谁在前谁在后，默认是按照字符顺序排序，比如11会排在2之前。要按数字大小排序，可以这样写：
复制代码代码如下:
vararr=[11,2,0,12,33];
arr.sort(
function(a,b){
returna-b;
}
);

也可以按照对象的某个属性进行排序：
复制代码代码如下:
vararr=[
{id:11},
{id:0},
{id:22}
];
arr.sort(
function(a,b){
returna.id-b.id;
}
);

2.3数组去重复Array类型并没有提供去重复的方法，如果要把数组的重复元素干掉，那得自己想办法：
复制代码代码如下:
functionunique(arr){
varresult=[],isRepeated;
for(vari=0,len=arr.length;i<len;i++){
isRepeated=false;
for(varj=0,len=result.length;j<len;j++){
if(arr[i]==result[j]){
isRepeated=true;
break;
}
}
if(!isRepeated){
result.push(arr[i]);
}
}
returnresult;
}

总体思路是把数组元素逐个搬运到另一个数组，搬运的过程中检查这个元素是否有重复，如果有就直接丢掉。从嵌套循环就可以看出，这种方法效率极低。我们可以用一个hashtable的结构记录已有的元素，这样就可以避免内层循环。恰好，在Javascript中实现hashtable是极为简单的，改进如下：
复制代码代码如下:
functionunique(arr){
varresult=[],hash={};
for(vari=0,elem;(elem=arr[i])!=null;i++){
if(!hash[elem]){
result.push(elem);
hash[elem]=true;
}
}
returnresult;
}

三、使代码更易读、更好维护
无论是在开发中还是开发后，保持代码清晰易读可以更快更准确地修改代码。
3.1连接HTML字符串相信做前端开发的朋友都受过这个折磨：连接HTML的时候被可恶的单引号、双引号搞得头昏脑胀。比如：
element.innerHTML=‘"+text+‘";
这里介绍一个字符串格式化函数：
复制代码代码如下:
String.format=function(str){
varargs=arguments,re=newRegExp(”%(["+args.length+"])”,“g”);
returnString(str).replace(
re,
function($1,$2){
returnargs[$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、某个操作的提示等，例如：
复制代码代码如下:
varConfig={
ajaxUrl:“test.jsp”,
successTips:“请求完成”
};

如果Config的数量较多，可以根据配置类型多嵌套一层，比如：
复制代码代码如下:
varConfig={
url:{
src1:“test1.jsp”,
src2:“test2.jsp”,
.
.
},
tips:{
src1Suc:“请求1完成”,
src2Suc:“请求2完成”,
.
.
}
};
Config应放置于程序的最前面，方便查看和修改。

相关文章