zepto与jquery原型链解析

<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 = {}

  // 这就是构造函数
  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) {
    // 注意，出现了new关键字
    return new Z(dom, selector)
  }

  zepto.init = function (selector) {
    // 源码中，这里的处理情况比较复杂。但因为本次只是针对原型，因此这里就弱化了
    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关键字，第一步就找到了构造函数
    return new jQuery.fn.init(selector);
  }

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

  // 定义构造函数
  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. 将插件扩展统一到 $.fn.xxx 这一个接口，方便使用