JS原型实践 —— zepto

zepto 是什么

可以先做一个简单的Demo，看看日常中使用的zepto是什么样的

  <p>zepto test 1</p>
  <p>zepto test 2</p>
  <p>zepto test 3</p>
  <div id="div1">zepto demo</div>
  <script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
  <script type="text/javascript">
    var $p = $("p")
    $p.css("color", "red")
    $p.html("it's p tag")

    var $div1 = $("#div1")
    $div1.css("background-color", "blue")
    $div1.html("div1")
  </script>

如果使用过jquery的朋友应该觉得熟悉，因为用法十分类似

zepto 的原型如何实现

我们看下zepto对象是在哪里创建的

  // 空对象
  var zepto = {}

  // 这就是构造函数
  function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) this[i] = dom[i] // 复制所有dom的属性
    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)
  }

找到zepto的原型

$.fn = {
    constructor: zepto.Z,

    css: function (key, value) {

    },
    html: function (value) {

    }
}

zepto.Z.prototype = Z.prototype = $.fn

构造函数Z的原型的方法，是在$.fn定义完了之后，又赋值给Z.prototype的

另外，constructor赋值了zepto.Z而不是Z，这是我不太理解的地方，不过完全不影响使用

zepto 看源码

一开始，是一个 umd 规范的封装

接下来

var Zepto = (function () {
    var $ = function () {

    }

    // 返回核心函数
    return $
})

// 暴露全局方法
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

// 一些扩展，https://github.com/madrobby/zepto#zepto-modules 这些模块都是通过这种方式扩展的
;(function($) {

})(Zepto)

;(function($) {

})(Zepto)

;(function($) {

})(Zepto)