中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-08-25 22:20:19 來源:腳本之家 閱讀:154 作者:aGod 欄目:web開發

1.當我們用$符號直接調用的方法。在jQuery內部是如何封裝的呢?有沒有好奇心?

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

 //expando 用于決定當前頁面的唯一性。 /\D/ 非數字。其實就是去掉小數點。
 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 );
 },

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

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

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

 //判斷obj是不是一個數字 當為一個數字字符串的時候頁可以的哦 比如 "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: 當 proto 自身有constructor的時候, 取得constructor 這個屬性的value 值。 其實就是 obj的構造函數。 type -> function
  Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
  //Ctor 類型為“function” 且 為構造函數類型吧。 這個時候 obj 也是對象。 我的理解 這個時候,obj = new O(); 其實就是某個構造函數的實列
  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的數據類型。 其實方法就是 Object.prototype.toString.call(xx); xx 就是要檢測的某個變量。 得到的結果是 "[object object]" "[object array]" ...
 type: function( obj ) {

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

 // 翻譯為:全局的Eval函數。 說句實話。沒有看懂這個是拿來干嘛的。 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 );
 }
  創建一個 script標簽, 或remove 這個標簽。 目前沒有搞懂拿來干嘛用。
  */
 globalEval: function( code ) {
  DOMEval( code );
 },

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

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

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

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

  return obj;
 },

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

 // $.makeArray 其實是將類數組轉換成數組 對象。
 /**
  *
  *
  * @param arr
  * @param results
  * @returns {*|Array}
  * 比如: var b = document.getElementsByTagName("div"); b.reverse() 。 用b 來調reserver() 方法會直接報錯的。因為這個時候b是類數組對象。
  * 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 待處理的數組
  * @param i 從待處理的數組的第幾位開始查詢. 默認是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) ; 其實就是把字符串的indexOf 繼承給數組,并且傳遞 elem 和 i 參數。
   * 更簡單一點其實可以理解為: arr.indexOf(elem,i);
   */
  return arr == null ? -1 : indexOf.call( arr, elem, i );
 },

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

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

  first.length = i;

  return first;
 },
 /**
  *
  * @param elems 帶過濾的函數
  * @param callback 過濾的添加函數
  * @param invert 來決定 $.grep(arr,callback) 返回來的數組,是滿足條件的還是不滿足條件的。 true 是滿足條件的。 false 是不滿足條件的。
  * @returns {Array}
  *
  * 返回一個數組。
  */
 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 帶處理的數組
  * @param callback 回調函數
  * @param arg 這參數用在callback回調函數的。
  * callback(elems[i],i,arg)
  * @returns {*}
  *
  * $.map(arr,function(item,i,arg){},arg)
  * 將一個數組,通過callback 轉換成另一個數組。
  * 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 );
 },

 // 對對象的一個全局標志量吧。 沒搞懂具體用處
 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;
  //當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 當前時間搓
 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上面的方法(實例講解)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

克什克腾旗| 兰西县| 乐东| 深泽县| 色达县| 陇南市| 五常市| 徐水县| 什邡市| 威宁| 昭平县| 南平市| 于田县| 开封市| 隆昌县| 石棉县| 元朗区| 车致| 尤溪县| 武汉市| 建水县| 乌鲁木齐县| 江达县| 临颍县| 砚山县| 抚宁县| 和静县| 丽江市| 乐平市| 信阳市| 江西省| 荣昌县| 东山县| 山丹县| 濮阳县| 进贤县| 洪湖市| 屏东县| 昌都县| 东乌珠穆沁旗| 息烽县|