javascript 节点排序 2

 更新时间:2011年01月31日 19:02:09   作者:  
对支持sourceIndex的HTML文档的节点重排,使用JK提供的思路,速度至少比单纯使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})这种方式快两倍
复制代码 代码如下:

//灵感来自
//http://www.cnblogs.com/jkisjk/archive/2011/01/28/array_quickly_sortby.html
var hasDuplicate = false;
var sortBy = function(nodes){
var result = [], array = [], n = nodes.length, i = n, node;
while(node = nodes[--n]){
(array[n] = new Number(~~node.sourceIndex))._ = node;
}
array.sort(function(a,b){
if(a === b) hasDuplicate = true;
return a - b ;
});
while( i )
result[--i] = array[i]._;
return result;
}

但标准浏览器不支持这属性,在IE中,XML文档也没有此属性,这时就需要跟据节点的parentNode与nextSibling,但如果单单是两两比较,速度是提升不了的。因此我们就转而比较最近公共祖先的孩子们的顺序了。这时,算法的威力就体现出来了。这是第一版,根据某一朋友提供的LCA搞出来的东西,当然大体思路还是归功于JK大神。但实际效果不如意,比jQuery的那个sortOrder慢,估计问题出在求LCA上。
复制代码 代码如下:

//根据这里JK提供的思路
//http://www.cnblogs.com/rubylouvre/archive/2011/01/28/1947286.html#2020900
var tick = 0, hasDuplicate = false;
var Rage = {
//form http://www.cnblogs.com/GrayZhang/archive/2010/12/29/find-closest-common-parent.html
getLCA:function(nodes){
var hash = {}, i = 0,
attr = "data-find"+(++tick),
length = nodes.length,
node,
parent,
counter = 0,
uuid;
while(node = nodes[i++]){
parent = node;
while(parent){
if(parent.nodeType === 1){
break;
}
uuid = parent.getAttribute(attr);
if(!uuid){
uuid = "_" + (++counter);
parent.setAttribute(attr,uuid);
hash[uuid] = {node:parent,count:1};
}else{
hash[uuid].count ++;
}
parent = parent.parentNode;
}
}
for(var i in hash){
if(hash[i].count === length){
return hash[i].node;
}
}
},
getList : function(nodes,parent){//获取当前元素到最近公共祖先间的所有祖先,包括自己
var list = [];
while(node){
if(node === parent){
break;
}
list.unshift(node);
node = node.parentNode;
}
return list;
},
getLists : function(){
var lists = [], getList = Rage.getList, i=0, node, list;
while(node = nodes[i++]){
list = getList(node,parent);
if(list.length){
lists[ lists.length ] = list;
}
}
return lists;
},
sortList : function(a,b){
var n = Math.min(a.length,b.length),ap,bp;
for(var i=0; i < n; i++){
ap = a[i],bp = b[i]
if(ap !== bp){
while(ap = ap.nextSibling){
if(ap === bp){
return -1
}
}
return 1
}
}
return a.length-b.length;
},
uniqueSort : function(nodes){
var length = nodes.length;
var LCA = Rage.getLCA(nodes);
var lists = Rage.getLists(nodes,LCA);
lists.sort(Rage.sortList);
var list, i = 0, result = [];
while(list = lists[i++]){
result[result.length] list.pop();
}
if(result.length !== length){
result.unshift(LAC);
if(result.length != length){
hasDuplicate = true;
}
}
return result;
}
}

下面是第二版,经过改进,终于比jQuery的那个快上三倍(测试对象为拥有260多个节点的文档)
复制代码 代码如下:

var hasDuplicate = false;
var Rage = {
getList : function(node){
var list = [];
while(node){
if(node.nodeType === 9){
break;
}
list.unshift(node);
node = node.parentNode;
}
return list;
},
getLists : function(nodes){
var lists = [], getList = Rage.getList, i=0, node;
while(node = nodes[i++]){
lists[ lists.length ] = getList(node);
}
return lists;
},
sliceList : function(lists,num){
var result = [], i = 0, list;
while(list = lists[i++]){
list = list.slice(num);
if(list.length){
result[ result.length ] = list;
}
}
return result;
},
sortList : function(a,b){
var n = Math.min(a.length,b.length),ap,bp;
for(var i=0; i < n; i++){
ap = a[i],bp = b[i]
if(ap !== bp){
while(ap = ap.nextSibling){
if(ap === bp){
return -1
}
}
return 1
}
}
return a.length-b.length;
},
uniqueSort : function(nodes){
var length = nodes.length;
var lists = Rage.getLists(nodes);
lists.sort(function(a,b){
return a.length - b.length;
});
var depth = lists[0].length, length = lists.length, parent, cut, ii = 0;
for(var i =0; i < depth; i++){
parent = lists[0][i];
cut = true;
for(var j = 1;j < length; j++){
if(parent !== lists[j][i]){
cut = false;
break;
}
}
if(cut){
ii++
}else{
break;
}
}
var LCA = lists[0][ii-1];
lists = Rage.sliceList(lists,ii);
lists.sort(Rage.sortList);
var list, i = 0, result = [];
while(list = lists[i++]){
result[result.length] = list.pop();
}
if(result.length !== length){
result.unshift(LCA);
if(result.length != length){
hasDuplicate = true;
}
}
return result;
}
}

相关文章

  • js给onclick事件赋值,动态传参数实例解说

    js给onclick事件赋值,动态传参数实例解说

    js动态给对象onclick事件赋值,动态传参数举两个例子一对一错,感兴趣的朋友可以对比下,希望可以从中发现不一样之处
    2013-03-03
  • js鼠标坐标获取常用的三个方法

    js鼠标坐标获取常用的三个方法

    这篇文章主要给大家介绍了js鼠标坐标获取常用的三个方法,在 JavaScript中当事件发生时获取鼠标的位置是件很重要的事件,需要的朋友可以参考下
    2023-09-09
  • 一文教你彻底学会JavaScript手写防抖节流

    一文教你彻底学会JavaScript手写防抖节流

    其实防抖和节流不仅仅在面试中会让大家手写,在实际项目中也可以起到性能优化的作用,所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流,需要的可以参考一下
    2022-11-11
  • 手把手带你入门微信小程序新框架Kbone的使用

    手把手带你入门微信小程序新框架Kbone的使用

    这篇文章主要介绍了手把手带你入门微信小程序新框架Kbone的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 微信小程序实现tab页面切换效果

    微信小程序实现tab页面切换效果

    这篇文章主要为大家详细介绍了微信小程序实现tab页面切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 微信小程序实现滚动消息通知

    微信小程序实现滚动消息通知

    这篇文章主要为大家详细介绍了微信小程序实现滚动消息通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • ES6中Proxy代理用法实例浅析

    ES6中Proxy代理用法实例浅析

    这篇文章主要介绍了ES6中Proxy代理用法,结合实例形式简单分析了Proxy代理的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • three.js中正交与透视投影相机的实战应用指南

    three.js中正交与透视投影相机的实战应用指南

    在three.js中摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中,下面这篇文章主要给大家介绍了关于three.js中正交与透视投影相机应用的相关资料,需要的朋友可以参考下
    2022-08-08
  • IE下Ajax缓存问题的快速解决方法(get方式)

    IE下Ajax缓存问题的快速解决方法(get方式)

    IE下Ajax缓存问题的快速解决方法(get方式)。网上搜了很多解决方案,一大把,下面是我认为比较全面的解决方案。主要分为客户端解决和服务端解决
    2014-01-01
  • javascript里绝对用的上的字符分割函数总结

    javascript里绝对用的上的字符分割函数总结

    本节主要介绍了javascript里比较实用的字符分割函数的使用,需要的朋友可以参考下
    2014-07-07

最新评论