真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)

1.當(dāng)我們用$符號直接調(diào)用的方法。在jQuery內(nèi)部是如何封裝的呢?有沒有好奇心?

饒平ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18980820575(備注:SSL證書合作)期待與您的合作!

// jQuery.extend 的方法 是綁定在 $ 上面的。
jQuery.extend( {

 //expando 用于決定當(dāng)前頁面的唯一性。 /\D/ 非數(shù)字。其實(shí)就是去掉小數(shù)點(diǎn)。
 expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),

 // Assume jQuery is ready without the ready module
 isReady: true,

 // 報錯的情況
 error: function( msg ) {
  throw new Error( msg );
 },

 // 空函數(shù)
 noop: function() {},

 // 判斷是不是一個函數(shù)
 isFunction: function( obj ) {
  return jQuery.type( obj ) === "function";
 },

 //判斷當(dāng)前對象是不是window對象。
 isWindow: function( obj ) {
  return obj != null && obj === obj.window;
 },

 //判斷obj是不是一個數(shù)字 當(dāng)為一個數(shù)字字符串的時候頁可以的哦 比如 "3.2"
 isNumeric: function( obj ) {

  var type = jQuery.type( obj );
  return ( type === "number" || type === "string" ) &&

   // 這個話的意思就是要限制 "3afc 這個類型的 字符串"
   !isNaN( obj - parseFloat( obj ) );
 },

 //判斷obj 是不是一個對象
 isPlainObject: function( obj ) {
  var proto, Ctor;

  // obj 存在且 toString.call(obj) !== "[object object]"; 就肯定不是一個對象了。
  if ( !obj || toString.call( obj ) !== "[object Object]" ) {
   return false;
  }

  //getProto獲取原型鏈上的對象。 getProto = Object.getPrototypeOf(); 獲取原型鏈上的屬性
  proto = getProto( obj );

  // getProto(Object.create(null)) -> proto == null 這種情況也是對象 obj = Object.create(null);
  if ( !proto ) {
   return true;
  }

  // obj 原型上的屬性。 proto 上面有 constructor hasOwn = hasOwnPrototypeOf('name') 判斷某個對象自身是否有 這個屬性
  // Ctor: 當(dāng) proto 自身有constructor的時候, 取得constructor 這個屬性的value 值。 其實(shí)就是 obj的構(gòu)造函數(shù)。 type -> function
  Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
  //Ctor 類型為“function” 且 為構(gòu)造函數(shù)類型吧。 這個時候 obj 也是對象。 我的理解 這個時候,obj = new O(); 其實(shí)就是某個構(gòu)造函數(shù)的實(shí)列
  return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
 },
 //判斷obj是不是一個空對象
 isEmptyObject: function( obj ) {
  //var o = {}
  var name;

  for ( name in obj ) {
   return false;
  }
  return true;
 },
 //獲取js的數(shù)據(jù)類型。 其實(shí)方法就是 Object.prototype.toString.call(xx); xx 就是要檢測的某個變量。 得到的結(jié)果是 "[object object]" "[object array]" ...
 type: function( obj ) {

  //除去null 和undefined 的情況。 返回本身。 也就是 null 或者 undefined. 因?yàn)?undefined == null -> true。
  if ( obj == null ) {
   return obj + "";
  }
  // 這個跟typeof xx(某個變量 ) -> undefined object,number,string,function,boolean(typeof 一個變量只能得到6中數(shù)據(jù)類型)
  /**
   * 1. obj 是一個對象 或者 obj 是一個 function 那么 直接class2type[toString.call(obj)] 這個話其實(shí)是在class2type 中根據(jù)key值找到對應(yīng)的value。
   * class2type = {
   *  [object object]: "object",
   *  [object array]:"array" ...
   *
   * }
   * 這樣類似的值。
   * class2type[toString.call(obj)] || "object" 連起來讀就是,在class2type 中找不到類型的值,就直接返回 object
   *
   * 2.或者返回 typeof obj。的數(shù)據(jù)類型。 -> number, string,boolean 基本數(shù)據(jù)了類型吧。 (js 中有5中基本數(shù)據(jù)類型。 null ,undefined,number,string,boolean)
   */
  return typeof obj === "object" || typeof obj === "function" ?
   class2type[ toString.call( obj ) ] || "object" :
   typeof obj;
 },

 // 翻譯為:全局的Eval函數(shù)。 說句實(shí)話。沒有看懂這個是拿來干嘛的。 DOMval();
 /**
  *
  * @param code
  * function DOMEval( code, doc ) {
  doc = doc || document;

  var script = doc.createElement( "script" );

  script.text = code;
  doc.head.appendChild( script ).parentNode.removeChild( script );
 }
  創(chuàng)建一個 script標(biāo)簽, 或remove 這個標(biāo)簽。 目前沒有搞懂拿來干嘛用。
  */
 globalEval: function( code ) {
  DOMEval( code );
 },

 // 這個是用來轉(zhuǎn)為 駝峰的用函數(shù)吧。 ms- 前綴轉(zhuǎn)為駝峰的吧。
 camelCase: function( string ) {
  return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
 },

 // each 方法。 $.each(obj,function(){}); 用于循環(huán)數(shù)組和對象的方法。
 each: function( obj, callback ) {
  var length, i = 0;

  if ( isArrayLike( obj ) ) { // 當(dāng)obj 是一個數(shù)組的時候執(zhí)行這個方法
   length = obj.length;
   for ( ; i < length; i++ ) {

    /*當(dāng)$.each(obj,function(i,item){
      if( i = 2){
       return false。
      }
     })
     當(dāng)$.each(obj,function(){}) 中的匿名函數(shù)中純在 return false; 的時候跳出循環(huán)。
    */
    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
     break;
    }
   }
  } else { // for in 循環(huán)對象。 callback.call(obj[i],i,obj,[i]) === false 跟數(shù)組循環(huán)是一道理
   for ( i in obj ) {
    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
     break;
    }
   }
  }

  return obj;
 },

 // 去掉 text 兩邊的空白字符 $("input").val().trim() 一個道理吧。 text + "" 其實(shí)是為了把 text 轉(zhuǎn)成一個字符串。 類型這種情況 123.replace(rtrim,"") 是會報錯的。
 // 如果 123 + "" 其實(shí)變成了 "123"
 trim: function( text ) {
  return text == null ?
   "" :
   ( text + "" ).replace( rtrim, "" );
 },

 // $.makeArray 其實(shí)是將類數(shù)組轉(zhuǎn)換成數(shù)組 對象。
 /**
  *
  *
  * @param arr
  * @param results
  * @returns {*|Array}
  * 比如: var b = document.getElementsByTagName("div"); b.reverse() 。 用b 來調(diào)reserver() 方法會直接報錯的。因?yàn)檫@個時候b是類數(shù)組對象。
  * var a = $.makeArray(document.getElementsByTagName("div")); a.reverser()。 這樣就不會報錯了。
  *
  */
 makeArray: function( arr, results ) {
  var ret = results || [];

  if ( arr != null ) {
   if ( isArrayLike( Object( arr ) ) ) {
    jQuery.merge( ret,
     typeof arr === "string" ?
     [ arr ] : arr
    );
   } else {
    push.call( ret, arr );
   }
  }

  return ret;
 },

 /**
  *
  * @param elem 要檢測的值
  * @param arr 待處理的數(shù)組
  * @param i 從待處理的數(shù)組的第幾位開始查詢. 默認(rèn)是0
  * @returns {number} 返回 -1 。表示arr 中沒有該value值, 或者該值的下表
  * $.inArray()。
  *
  */
 inArray: function( elem, arr, i ) {

  //如果arr 為 null 直接返回 -1 。
  /**
   * 對indxOf.call(arr,elem,i);方法的解釋
   * var s = new String();
   * eg: var indexOf = s.indexOf; 用indexOf 變量來存字符串中的 indexOf的方法。
   * indexOf.call(arr,elem,i) ; 其實(shí)就是把字符串的indexOf 繼承給數(shù)組,并且傳遞 elem 和 i 參數(shù)。
   * 更簡單一點(diǎn)其實(shí)可以理解為: arr.indexOf(elem,i);
   */
  return arr == null ? -1 : indexOf.call( arr, elem, i );
 },

 // 合并數(shù)組
 /**
  *
  * @param first 第一個數(shù)組
  * @param second 第二個數(shù)組
  * @returns {*}
  */
 merge: function( first, second ) {
  var len = +second.length, //第二個數(shù)組的長度
   j = 0, //j 從0 開始
   i = first.length; //第一個數(shù)組的長度

  for ( ; j < len; j++ ) {
   first[ i++ ] = second[ j ];
  }
  // 其實(shí)用push 應(yīng)該可以吧。

  first.length = i;

  return first;
 },
 /**
  *
  * @param elems 帶過濾的函數(shù)
  * @param callback 過濾的添加函數(shù)
  * @param invert 來決定 $.grep(arr,callback) 返回來的數(shù)組,是滿足條件的還是不滿足條件的。 true 是滿足條件的。 false 是不滿足條件的。
  * @returns {Array}
  *
  * 返回一個數(shù)組。
  */
 grep: function( elems, callback, invert ) {
  var callbackInverse,
   matches = [],
   i = 0,
   length = elems.length,
   callbackExpect = !invert;

  // Go through the array, only saving the items
  // that pass the validator function
  for ( ; i < length; i++ ) {
   callbackInverse = !callback( elems[ i ], i );
   if ( callbackInverse !== callbackExpect ) {
    matches.push( elems[ i ] );
   }
  }

  return matches;
 },

 /**
  *
  * @param elems 帶處理的數(shù)組
  * @param callback 回調(diào)函數(shù)
  * @param arg 這參數(shù)用在callback回調(diào)函數(shù)的。
  * callback(elems[i],i,arg)
  * @returns {*}
  *
  * $.map(arr,function(item,i,arg){},arg)
  * 將一個數(shù)組,通過callback 轉(zhuǎn)換成另一個數(shù)組。
  * eg: var b = [2,3,4];
  * var a = $.map(b,function(item,i,arg){
  *   return item + arg;
  * },1)
  * console.log(a) [3,4,5]
  */
 map: function( elems, callback, arg ) {
  var length, value,
   i = 0,
   ret = [];

  // Go through the array, translating each of the items to their new values
  if ( isArrayLike( elems ) ) {
   length = elems.length;
   for ( ; i < length; i++ ) {
    value = callback( elems[ i ], i, arg );

    if ( value != null ) {
     ret.push( value );
    }
   }

  // Go through every key on the object,
  } else {
   for ( i in elems ) {
    value = callback( elems[ i ], i, arg );

    if ( value != null ) {
     ret.push( value );
    }
   }
  }

  // Flatten any nested arrays
  return concat.apply( [], ret );
 },

 // 對對象的一個全局標(biāo)志量吧。 沒搞懂具體用處
 guid: 1,

 // Bind a function to a context, optionally partially applying any
 // arguments.
 /**
  *
  * @param fn
  * @param context
  * @returns {*}
  *
  * es6也提供了 new Proxy() 。對象。
  */
 proxy: function( fn, context ) {
  var tmp, args, proxy;
  //當(dāng)content是字符串的時候 
  if ( typeof context === "string" ) {
   tmp = fn[ context ];
   context = fn;
   fn = tmp;
  }

  // Quick check to determine if target is callable, in the spec
  // this throws a TypeError, but we will just return undefined.
  if ( !jQuery.isFunction( fn ) ) {
   return undefined;
  }

  // Simulated bind
  args = slice.call( arguments, 2 );
  proxy = function() {
   return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
  };

  // Set the guid of unique handler to the same of original handler, so it can be removed
  proxy.guid = fn.guid = fn.guid || jQuery.guid++;

  return proxy;
 },
 //$.now 當(dāng)前時間搓
 now: Date.now,

 // jQuery.support is not used in Core but other projects attach their
 // properties to it so it needs to exist.
 /**
  * 檢測瀏覽器是否支持某個屬性
  * $.support.style
  */
 support: support
} );

以上這篇jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。


新聞標(biāo)題:jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)
標(biāo)題URL:http://weahome.cn/article/ijsodj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部