<p>zepto test 1</p>
<p>zepto test 2</p>
<p>zepto test 3</p>
<div id="div1">
  <p>zepto test in div</p>
</div>
<!-- <script type="text/javascript" src='./zepto.js'></script> -->
<script type="text/javascript" src='./jquery.js'></script>
<script type="text/javascript">
  var $p = $('p')
  $p.css('font-size', '40px')
  alert($p.html())
  var $div1 = $('#div1')
  $div1.css('color', 'blue')
  alert($div1.html())

  // jquery添加原型
  $.fn.getNodeName= function() {
    alert(this[0].nodeName)
  }
  </script>

1. zepto原型鏈

(function(window){

  //空對象
  var zepto = {}

  // 這就是構(gòu)造函數(shù)
  function Z(dom, selector) {
    var i,len = dom ? dom.length : 0
    for(i = 0;i < len; i++) {
      this[i] = dom[i]
    }
    this. length = len
    this.selector = selector || ''
  }
  
  zepto.Z = function(dom, selector) {
    // 注意贞瞒，出現(xiàn)了new關(guān)鍵字
    return new Z(dom, selector)
  }

  zepto.init = function (selector) {
    // 源碼中疚脐，這里的處理情況比較復(fù)雜。但因?yàn)楸敬沃皇轻槍υ停虼诉@里就弱化了
    var slice = Array.prototype.slice
    var dom = slice.call(document.querySelectorAll(selector))
    return zepto.Z(dom, selector)
  }

  //即使用zepto時候的$
  var $ = function(selector){
    return zepto.init(selector)
  }

  window.$ = $

  $.fn = {
    constructor: zepto.Z,
    css: function (key, value) {
      return 'css'
    },
    html: function (value) {
      return 'html'
    }
  }

  zepto.Z.prototype = Z.prototype = $.fn
  
})(window)

2. jquery原型鏈

(function(window){

  var jQuery = function (selector) {
    //注意new關(guān)鍵字糟秘，第一步就找到了構(gòu)造函數(shù)
    return new jQuery.fn.init(selector);
  }

  //初始化jQuery.fn
  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    //其他函數(shù)...
    css: function (key, value) {
      return "模擬css"
    },
    html: function (value) {
      return "模擬html"
    }
  }

  // 定義構(gòu)造函數(shù)
  var init = jQuery.fn.init = function (selector) {
    var slice = Array.prototype.slice
    var dom = slice.call(document.querySelectorAll(selector))
    var i, len=dom ? dom.length : 0
    for(i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selector = selector || ''
  }
  
  //定義原型
  init.prototype = jQuery.fn;

  window.$ = jQuery

})(window)

3. 為何要把原型方法放在 $.fn

1. 只有 $ 會暴露在 window 全局變量
2. 將插件擴(kuò)展統(tǒng)一到 $.fn.xxx 這一個接口黔攒，方便使用