本文提供了一段JavaScript代码,用于实现文件名的自然排序,支持数字大小比较及特殊字符处理。代码包含v1和v2两个版本,其中v2简化了逻辑。此外,文章还列举了使用jQuery时遇到的几个常见问题,包括:hidden选择器、serialize方法、插件兼容性以及UI组件绑定等注意事项。
JavaScript文件名自然排序实现
代码刚刚完成,欢迎测试。
完整的测试代码如下:
<!doctype HTML> <html> <head> <meta charset="gb2312" /> <title>高级目录,文件名排序</title> <meta name="description" content="Javascript高级目录,文件名排序实现"/><!--[if]8/26/2010--> <meta name="Keywords" content="Javascript高级目录,文件名排序实现,win7排序,sort"/> <style> #page{} </style> </head> <body> <div id="page" > <h4>高级目录,文件名排序</h4> <div>主要实现了目录中的数字按大小排序</div> 排序结果:<br> </div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
主要排序功能的源代码(v1版本)如下:
代码如下:
var fileSort=function(arr){
arr.sort();
var res=[],temp=[],i=0,j=0,k,reg,sc=true,cur=arr[0];
while(cur.charCodeAt(0)<48){//数字之前的标点等开头的
res[i]=cur;
if(i===arr.length-1)return res;
cur=arr[++i];
}
while(cur.charCodeAt(0)<58){//以数字开头的
temp[j++]=cur;
if(i===arr.length-1)break;
cur=arr[++i];
}
temp.sort(function(a,b){//排序以数字开头的
return parseInt(a,10)-parseInt(b,10);
});
res=res.concat(temp);
temp=[];j=0;
for(;i<arr.length;i++){
cur=arr[i];
if((k=cur.search(/\d+/))===-1 || i===arr.length-1){//最后一个文件时直接添加
res[i]=cur;
}else {
reg=new RegExp("^"+cur.substr(0,k)+"\\d+");
while(cur.search(reg)!==-1){
temp[j++]=cur;
if(i===arr.length-1)break;
cur=arr[++i];
}
if(temp.length>0){
temp.sort(function(a,b){
return parseInt(a.substr(k),10)-parseInt(b.substr(k),10);
});
res=res.concat(temp);
temp=[];j=0;
i-=1;//减1,再执行查找使while结束的str
}
}
}
return res;
} 后来思考发现,上述版本中前面的两个while循环完全是多余的。去除这两个循环后,代码直接支持了特殊字符后包含数字的排序场景。
v2版本(注意RegExp尚未进行escape处理):
代码如下:
var fileSort=function(arr){
arr.sort();
var res=[],temp=[],i=0,j=0,k,reg,cur;
for(;i<arr.length;i++){
cur=arr[i];
if((k=cur.search(/\d+/))===-1 || i===arr.length-1){//最后一个文件时直接添加
res[i]=cur;
}else {
reg=new RegExp("^"+cur.substr(0,k)+"\\d+");
while(cur.search(reg)!==-1){
temp[j++]=cur;
if(i===arr.length-1)break;
cur=arr[++i];
}
if(temp.length>0){
temp.sort(function(a,b){
return parseInt(a.substr(k),10)-parseInt(b.substr(k),10);
});
res=res.concat(temp);
temp=[];j=0;
i-=1;//减1,再执行查找使while结束的str
}
}
}
return res;
} jQuery使用常见问题与注意事项
另外,近期在使用jQuery时发现以下几点:
1 :hidden 这个选择器会选中所有不可见元素。如果是通过clone()生成的元素,在尚未添加到DOM之前,均被视为不可见。
2 使用.serialize()方法时,必须为form内的表单元素指定name属性,否则该方法将返回空字符串。
3 jstree插件不能与早期版本的validate插件同时使用,因为早期版本的validate重写了jQuery的delegate方法,更新validate版本即可解决。
4 ui中的DatePicker插件不能与拥有.hasDatepicker类的文本框绑定,需要先移除该类名才能正常绑定。
5 closest,live(delegate)方法非常实用。