JQuery源码解读 JQ的一些扩展工具方法（ 妙味讲堂

JQuery源码解读



JQ的一些扩展工具方法（ 妙味讲堂 - 视频笔记 - 第四部分）


1、parseJSON()

JSON.parse()   // 解析字符串类型的JSON


2、eval()  //解析任何格式JSON，性能差




3、parseXML() // 字符串转DOM对象

// 源码实现
parseXML: function(data) {
  var xml, tmp;
  if (!data || typeof data !== "string") {
    return null;//只能解析字符串类型
  }
  try {
    tmp = new DOMParser(); //IE9+
    xml = tmp.parseFromString(data, "text/xml");
  }
  catch (e) {
    xml = null;
  }
  if (!xml || xml.getElementsBysTagName("parsererror").length) {
    jQuery.error("Invalid XML:" + data);
  }
  return xml;
}




4、globalEval()


function test() {
  var newVar = true
}

test();
console.log(newVar)  // 报错





function test1() {
  globalEval("var newVar = true");
}

console.log(newVar) //true



// 解析全局变量
globalEval: function(code) {
  var script, ; indirect = eval;
  code = jQuery.trim(code)

  if (code) {
    if (code.indexOf("use strict ") == 1) {
      script = document.createElement("script");
      script.text = code;
      document.head.appendChild(script).parentNode.removeChild(script);
    }
    else {
      indirecct(code);
    }
  }
}


6、camelCase() //转驼峰


7、nodeName();// 是否制定节点名


8、each()//遍历

var arr = [1, 2, 34, 34, 343,];

$.each(arr.function(i, value){
  console.log(value)
})



// 源码实现
each: function(obj, callback, args) {
  var value,
    i = 0,
    length = obj.length,
    isArray = isArraylike(obj);
  if (args) {
    if (isArray) {
      for (; i < length; i++) {
        value = callback.apply(obj[i], args);
        if (value === false) {
          breack;
        }
      }
    }
    else {
      if (isArray) {
        for (; i < length; i++) {
          value = callback.call(obj[i], i, obj[i]);
          if (value === false) {
            break;
          }
        }
      }
      else {
        for (i in obj) {
          value = callback.call(obj[i], i, obj[i]);
          if (value === false) {
            break;
          }
        }
      }
    }
  }
}



10、trim()//去掉前后空格

// 源码实现
trim: function(text) {
  return text === null ? "" : core_trim.call(text)
}




11、makeArray();//类数组，字符串，JSON转数组



makeArray: function(arr, results) {
  var ret = results || [];
  if (arr != null) {
    if (isArraylike(Object(arr))) {
      //merge 拼接数组
      jQuery.merge(ret, typeof arr === "string" ? [arr] : arr)
    }
    else {
      // 单个直接push
      core_push.call(ret, arr);
    }
  }
  return ret;
}

 
// 判断类数组
12、
function isArraylike(obj) {
  var length = obj.length;
  type = jQuery.type(obj);
  if (jQuery.isWindow(obj)) {
    reutrn false;
  }
  if (obj.nodeType === 1 && length) {
    return false;
  }
  return type === "array" || type !== "function" && (
    length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj
  )
}

13、
// 拼接数组
merge:function(first,second){
   var f = first.length;
   var i = second.length;
   var j = 0;
   if(typeof l ==="number"){   //有length属性,判断是不是数组或类数组，JSON没长度
      for(;j<length;j++){
        first[i++] = second[j]
      }
   }
   else{
    //  second[j++] 下标是0,1,2,3的JSON
     while(second[j]!=undefined){ 
         first[i++] =  second[j++];
     }
   }
   first.length = i;
   return first;
}


// 存在key
inArray(key);//数组
indexOf(key);//字符串



14、
grep();// 过滤新数组

// 实例
var arr = [1,2,3,4];
$.grep(arr,function(n,i){
    return n>2;//大于2 的值作为新数组返回
},
 ture // 反向取值，小于2的值作为新数组返回
)


// 源码实现
grep:function(elems,callback,inv){
     var retVal,
     ret = [],
     i =0,
     length = elems.length,
     inv = !! inv;
     for(;i<length;i++){
       retVal = !!callback(elemes[i],i);
         if(inv === retVal){
             ret.push(elems[i])
         }
       }
     }
     return ret;
}

// 映射
map:function(elems,callback,arg){
    var value,
    i =0,
    length = elems.length,
    isArray = isArraylike(elemes),
    ret = [],

    if(isArray){
      for(;i<length;i++){
          value = callback(elems[i],i,arg);
          if(value!=null){
              ret[ret.length] = value;
          }
      }
    }
    else{
       for(i in elemes){
           value = callback(elems[i],i,args);
           if(value!=null){
               ret[ret.length] = value;
           }
       }
    }
    //  flatten any nested arrays 展平任何嵌套数组
    return core_concat.apply([],ret);
    
}



guid 1;// 全局唯一对象标识符



proxy();// 修改this指向


function show(n){
  console.log(n)
  console.log(this);
}

show(1);//this 指向window

$.proxy(show,document,1)();// this指向document
$.proxy(show,document)(1);// this指向document
// 两种传参



$.proxy(obj,"show")  ==  $.proxy(obj.show,obj);


// 源码实现

proxy:function(fn,context){
    var tmp,args,proxy;
     if(typeof context ==="stirng"){
       tmp = fn[contenxt];
       context = fn;
       fn = tmp;
     }
     if(!jQuery.isFunction(fn)){
         return undefined;
     }

    //  传参 从第三个开始合并参数
     args = core_slice.call(arguments,2);
     proxy = function(){
      //  core_slice.call(arguments)转数组
       return fn.apply(context||this,args.concat(core_slice.call(arguments)))
     }
    // guid 唯一标识
     proxy.guid = fn.guid||jQuery.guid++;
     return proxy;

}



access();//多功能值操作



$().css().attr();// get.set 操作


$("div").css("color");//获取

$("div").css("color","red");


// 对象
$("div").css({
  background: "red",
  color: "white"
})

// 源码实现

access:function(elems,fn,key,value,chainable,emptyGet,raw){
  var i=0,
  length = elems.length,
  bulk = key== null;
  // set many value
  if(jQuery.type(key)==="object"){
    chainable = true;
    for(i in key){
      jQuery.access(elems,fn,i,key[i],true,emptyGet,raw)
    }
  }
  else if(value!==undefined){
      chainable = true;
      if(!jQuery.isFunction(value)){ //不是函数
        raw = true;
      }
      if(bulk){   //  有bulk值 字符串
           if(raw){ 
                fn.call(elems,value);
                fn = null;
           }
           else{  // value 是函数的情况
             bulk = fn;
             fn = function(elem,key,value){
               return bulk.call(jQuery(elem),value);
             }
           }
      }
      if(fn){// 
        for(;i<length;i++){
            fn(elems[i],key,raw?value:value.call(elems[i],i,fn(elems[i],key)))
        }
      }
  }


  // set one value

}



// 获取当前时间，时间戳 new Date().getTime();
now(); // Date.now







$("div").width();//能获取display=none的元素，将display转为visibility: hidden;position: absolute;

$("div").get(0).offfsetWidth();//不能获取display=none的元素



// 节点属性替换，获取属性
swap:function(elem,options,callback,args){
  var ret,name,
  old = {};
  
  // 把新的属性值给到节点元素
  for(name in options){
      old[name] = elem.style[name];
      elem.style[name] = optons[name];
  }

  ret = callback.apply(elem,arg||[]);  //获取属性值

  
// 把旧的属性重新给节点元素设置回去
  for(name in options){
     elem.style[name] = old[name];
  }

  return ret;
}




jQuery.ready.promise = function(){} // 检测DOM测一步操作（内部使用）

function isArraylike(){}  //类数组的判断（内部使用）