jQuery源码浅谈系列---工具方法$.merge与$.unique

很多人在使用jquery的时候应该多会有array去重或者合并的需求吧，那么你一定对$.merge和$.unique不会陌生吧。

 

1.$.merge----------其实这个功能只是合并两个数组，返回的是array，包含第一个数组的元素后面跟着第二个数组元素

 

ps:这个不会去重复。

 

上源码：/*

原理其实还是比较简单
i是第一个数组的length
l是第二个数组的length
对第二个进行循环，在第一个数组length的基础上++往里面赋值
所以返回的数组是第一个数组然后是第2个数组
*/

function merge(first,second){
   var i = first.length,
         j = 0;
   if(typeof second.length === "number"){
        for(var l =second.length;j<l;j++){
            first[i++] = second[j];
     } 
  }else{
          while(second[j] !== undefined){
                   first[i++] = second[j++];
          }
 }
 first.length = i;   //严谨的jquery啊，一般人是不会想到这边控制一下的
 return first;
}

$.merge([0,1,2],[2,1,3]) ------------------------[0,1,2,2,1,3]

 

2.$.unique --------如果你是一个jquery接触比较长的或者一直研究的人你会发现，这个api是经历过版本变革的

 

在1.3rc2版本中源码是这个的

/*
注意这个版本是没有对数组元素为字符串和数字去重功能的
如果要改的话可以吧 jQuery.data(array[i])直接换成array[i]
*/
function unique(array){
    var ret =[],done ={};
    try{
         for(var i=0,length =array.length;i<length;i++){
                  var id= jQuery.data(array[i]);
                  if(!done[id]){
                        done[id] = true;
                        ret.push(array[i]);
                 }
            }
     }catch(e){
             ret =array;
     }
     return ret;
}

 

 

变革点在1.4.1,从这个版本开始你会发现这样一句话

 

jQuery.unique = Sizzle.uniqueSort;

 没有单独的unique的api了，你不知道Sizzle，好吧，多看看源码吧。不过我也会陆续放出自己的一些文档说明

好了先上源码：

/*
当然这边我没有放出sortOrder相关的api，有兴趣的自己看看
我注意想说的是思想
其实大家注意了splice了吧
算法是从index第一个开始和第0个去比，依次下去，相同就调用splice删除一个
*/
function uniqueSort(results){
       if(sortOrder){
           hasDuplicate = baseHasDuplicate;
           results.sort(sortOrder);
           if(hasDuplicate){
                for(var i=1;i<results.length;i++){
                       if(results[i] === results[i-1]){
                               results.splice(i--,1);
                     }
               }
           }
      }
     return results;
}

 

 

其实如果你一直在研究jQuery的源码 你会发现除了很多人一直再喊的性能上的提高，无论是代码的严谨性和兼容饱满性多在每一个版本中体现。学习JQuery，你需要的慢慢是从使用它，到2次封装它，再到领会它。

 

ps：下面我放出一个自己lib库的array的unique方法（设计思想还是tangram的，你不知道tangram，噢,你out了，呵呵）

/*
*unique-unique the array;if it has same items will delete one*
*@param {Array} source---the array*
*@param {Function} compareFn---the compareFn*
*@return {Array} result ----the uniqued array*
*/
ZYC.array.unique = function(source,compareFn){
      var _length =source.length,
	      result =source.slice(0), //clone source
		  i,_item;
	  // if compareFn is not function we will build one 	  
      if('functrion' != typeof compareFn){
	     compareFn = function(item1,item2){
		    return item1 === item2;
		 };
	  }
	  //we use double circulation to compare the items 
	  while (--_length >0){
         _item = result[_length];     // start from the last 
         i = _length;
         while(i --){
            if(compareFn(_item,result[i])){
			   result.splice(_length,1);
			   break;
			}
		 }		 
	  }
	  return result;
};

 十一的目前是进一步熟悉tangram grid。。自己也要写一个啊.

各位十一快乐

评论

2 楼 zhangyaochun 2011-09-30  

lizaochengwen 写道

请问：tangram有什么好呢？？？跟jquery有什么区别和优势？？？

每一个人看法不一样 对自己有提高就行。。我虽然一直研究jQuery到现在，但是我还是觉得jQuery的核心包依赖大，不可分离，而且比较jQuery的研究需要有点资本的人才理解。。而tangram是分离式的，简单，性能上也不差

1 楼 lizaochengwen 2011-09-30  

请问：tangram有什么好呢？？？跟jquery有什么区别和优势？？？