jQuery源碼學習一： 創建一個jquery實例

前言：

jquery是每個前端都會的基礎技能，眾所周知，jquery返回的是jquery實例方法，但是我們似乎是直接使用$就可以獲取到jquery的方法啦，可以在瀏覽器中判斷一下 window.$ 和window.jQuery,jQuery 之間的關係，就會發現他們之間是全等的；

不使用new方法調用

我們一般調用實例大部分是通過new方法，但是jquery卻不是，而是直接調用，這是為什麼呢
1. 創建實例方法：

  (function(root){
    var jQuery = function(){
      console.log('創建實例啦')
    }
    root.jQuery = jQuery //這樣賦值就可以調用啦
  })(window)

2.返回時操作

但是現在頁面上調用jQuery仍然不能使用$調用，於是簡單修改代碼

  (function(root){
    var jQuery = function(){
      return new jQuery()
    }
    root.$ = root.jQuery = jQuery 
  })(this) 

這樣我們就可以不在外部調用new方法，因為jQuery在返回的時候就已經調用了new

原型共用

在之前的操作下，我們已經將new jQuery返回了出去，但是這樣是有問題的。我們在jquery原型中定義一個init方法，並將init返回出去
1. 定義一個init

  var jQuery = function(){
    return new jQuery.prototype.init();
  }
  jQuery.prototype = {
    init: function(){
    }
  }

但是這樣我們雖然解決了報錯問題，但是我們現在無法獲取到jQuery中的原型方法，也就無法調用到jQuery的方法。
2. 原型共用
jQuery中有很重要的一行代碼：

  jQuery.prototype.init.prototype = jQuery.prototype

這就是原型共用，簡單從代碼來看，就是將jquery的原型賦值給jquery.prototype.init方法原型；
這樣我們調用jquery時，雖然獲取的是init方法，但是依然可以調用jquery中的原型方法。
3. 例子
我們在jquery上簡單擴展方法，並列印jquery驗證

  jQuery.prototype = {
    init: function(){
    },
    css: function(){},
  }

結果：