Zepto源码跟读——整体架构

当我们使用Zepto时

例如：

$("#winder").show().show();

要像如上这样操作DOM，Zepto框架需要根本地解决2个问题：

1.如何构建Zepto对象

2.如何调用Zepto方法

在阅读分析前，一定要关注两个问题，返回值到底是什么，指针this指向什么

分析一：如何构建Zepto对象

Zepto对象和jQuery对象不同，它实际上是DOM节点的数组，我们要构建Zepto对象，就要构建一个DOM节点的数组，

$("#winder")的返回值实际就只有一句话[document.getElementById("winder")]。

 

分析二：如何调用方法

每一个实例化对象都有一个__proto__属性，它指向构造函数的原型，实例化对象可以通过这个指针访问原型里的方法，

利用这个，通过改变实例化对象的属性__proto__实现，如：

var a = [];
var b = {
  show: function(){
    alert("show"); 
  },
  hide: function(){
    alert("hide"); 
  }
}
a.__proto__ = b;
a.show()//hide

 

最后给出一个概括分析的简单Zepto框架实例，

新建一个JS文件，Zepto.rewrite.js,将以下代码复制其中

//将匿名函数，的返回值赋值给变量Zepto
var Zepto = (function(){
  var $,
  zepto = {}
  //定义类的构造方法并复制给变量$,返回值是zepto.init(selector, context)的返回值
  $ = function(selector, context){
    return zepto.init(selector, context)
  }
  //通过原生JS方法获取DOM对象，包装成zepto对象（其实就是数组对象）dom，返回的是zepto.Z(dom, selector)的返回值
  zepto.init = function(selector, context) {
    var dom
    nameOnly = selector.slice(1)
    dom = [document.getElementById(nameOnly)]
    return zepto.Z(dom, selector)
  }
  zepto.Z = function(dom, selector) {
    //重要的一步，将$.fn对象，赋值给dom.__proto__,dom拥有$.fn
    dom.__proto__ = $.fn
    dom.selector = selector || ''
    return dom
  }
  $.fn = {
    //具体方法show
    show: function(){
        alert("调用方法：show");
        //返回this,指向调用它的对象。
        return this;
    } 
  }
  //返回$指向的构造方法 $ = function(selector, context){..}
  return $
})()
//为全局调用，将Zepto复制给同名全局变量window.Zepto
window.Zepto = Zepto
//为用$调用Zepto
window.$ === undefined && (window.$ = Zepto)

HTML页面body：

<div id="winder">
</div>
<script>
$("#winder").show().show()
</script>