jquery 和 zepto 对原型的简单使用

---

zepto 如何使用原型

var zepto = {} // 空对象
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)
}
// 这就是构造函数
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) {
  return new Z(dom, selector)
}
// ---------------------
$.fn = {
  constructor: zepto.Z,
  css: function(key, value) {
    /* ... */
  },
  html: function(value) {
    /* ... */
  }
}
zepto.Z.prototype = Z.prototype = $.fn

代码实操：

;(function(window, undefined) {
  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) {
    return new Z(dom, selector)
  }

  zepto.init = function(selector) {
    var slice = Array.ptototype.slice
    var dom = slice.call(document.querySelectorAll(selector))
    return zepto.Z(dom, selector)
  }

  var $ = function(selector) {
    return zepto.init(selector)
  }

  window.$ = window.zepto = $

  $.fn = {
    css: function(key, value) {
      /* ... */
    },
    html: function(value) {
      /* ... */
    }
  }

  Z.prototype = $.fn
})(window, undefined)

jQuery 如何使用原型

var jQuery = function(selector) {
  // 注意new关键字，第一步就找到了构造函数
  return new Jquery.fn.init(selector)
}

// 定义构造函数
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 || ''
})

// 初始化jQuery.fn
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  css: function(key, value) {
    /* ... */
  },
  html: function(value) {
    /* ... */
  }
}
// 定义原型
init.prototype = jQuery.fn

代码实操：

;(function(window, undefined) {
  var jQuery = function(selector) {
    return new jQuery.fn.init(selector)
  }

  jQuery.fn = {
    css: function(key, value) {
      /* ... */
    },
    html: function(value) {
      /* ... */
    }
  }

  var init = (jQuery.fn.init = function(selector) {
    var slice = Array.prototype.slice
    var dom = 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.$ = window.jQuery = jQuery
})(window, undefined)