從jQuery 入口方式寫jQuery工具類庫

lkycan發表於2017-12-14
jQuery

###1.jQuery 入口方式 在常用的jquery入口方式中估計大部分人都是直接用的是

$(function(){
  //code
})
複製程式碼

下面詳細說一下jquery的幾種入口方式： ####1.1 $ 符號+ready() 的方式 很多人可能會看到一下這種方式入口,是通過ready() 函式呼叫，至於原理會在下面講解。

$(document).ready(function(){
		//code
});
複製程式碼

####1.2 $ 符號 +簡寫 的方式 這種應該最多人用的，因為寫起來也是最方便的

$(function(){
  //code
})
複製程式碼

####1.3 jQuery +ready() 的方式 這是jquery完整的寫法，也是最初的形態。

	jQuery(document).ready(function(){
			console.log('jQuery ready 入口方式');
	})
複製程式碼

####1.4 jQuery + 簡寫入口 這種方式也是跟第二種方式類似

  jQuery(function(){
	  console.log('I am jquery ');
  })
複製程式碼

2. 模擬 jQuery 的入口函式

####2.1 認清楚 $ 符號 其實 $ 是 jQuery 的一個代替品，也就是可以解析為什麼上面四種入口方法類似的原因。 嘗試：

var $ = 'I am $';
console.log($);
複製程式碼

從控制檯列印出來的是

I am $
複製程式碼

再次測試，引入jQuery 後列印 $ 物件和 jQuery 物件

<script src="jquery-1.11.1.min.js"></script>
<script>
  console.log($);
  console.log(jQuery);
  console.log($===jQuery)
</script>
複製程式碼

列印結果如下：

Paste_Image.png

結論：從上面可以得知 $ 和 jQuery 是同一個物件，也可以得知它是一個方法（或者物件），通過傳遞（a,b）兩個引數，返回了一個新的物件，當然，在這裡面也會根據你是否已經建立過該物件。

再次測試，看建立兩個jQuery 物件情況會怎麼樣， $ 和 jQuery.

  var t1 = $;
  var t2 = jQuery;
  console.log(t1===t2);
複製程式碼

Paste_Image.png

思考另外一種情況：

var t1 =new $;
var t2 = new jQuery;
console.log(t1===t2);
複製程式碼

這樣子的情況請問相等嘛？ 答案是 false

解析：

通過new 是開闢了一個新的空間，去儲存這個物件。具體看一下

console.log(t1);
console.log(t2);
複製程式碼

Paste_Image.png

再看，如果是通過 $ 或 jQuery 直接列印出來的物件可以看得出是 一個方法裡面通過傳引數，而通過 new $ 或 new jQuery 的話直接是返回的物件，下面是兩個的對比。

Paste_Image.png

繼續探究：

Paste_Image.png

返回的屬性有個 proto 物件 列印一下：

var t2 = new jQuery;
console.log(t2);
console.log(t2.__proto__);
複製程式碼

Paste_Image.png

繼續推測：

//下面這句會不會是 列印jQuery 的版本號呢？
console.log(t2.__proto__.jquery);
複製程式碼

Paste_Image.png

下面這句通過

jQuery.fn = jQuery.prototype ={
  //這裡暴露一些屬性介面資訊
    jquery: version,// 這裡把上面的版本號version 通過jquery這個介面獲得
}

複製程式碼

詳情圖：

Paste_Image.png

貌似跑題了。回到最初的問題 ####2.1 寫一個kQuery 庫 回顧js 的呼叫方式

var  kQuery=  function (a){
  //code
}
kQuery(a);
複製程式碼

測試下你的 code 塊是否被執行了。 再次模擬jquery，它是返回一個 物件。 那我們的kQuery 應該也有個物件返回,

var  kQuery=  function (a){
 
    //返回物件
    return obj;
}
複製程式碼

上面程式碼明顯是錯誤的，因為 它不知道 obj 是個什麼東東，所以應該先定義 obj 為一個物件。

var  kQuery=  function (a){
     var obj ={}
    //返回物件
    return obj;
}
複製程式碼

再次看 第一大點，jquery的如後函式是不是都是通過ready() 來執行的，那是不是這個物件應該擁有ready 的這個方法。

var  kQuery=  function (a){
     var obj ={
        ready:function(){
              console.log('This is ready function');
        }
      }
    //返回物件
    return obj;
}
複製程式碼

相關文章