首页 > 其他 > 详细

zepto源码解读(一)

时间:2017-02-17 23:48:31      阅读:475      评论:0      收藏:0      [点我收藏+]

zepto源码解读(一)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,针对移动端开发, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。

那么zepto这个库是怎么做的呢?一直都非常好奇,所以在上个礼拜开始就在开始慢慢的读zepto源码,也算是有一些体会,所以想开始记录自己这些不大不小的体会,也是一种成长的积累吧。那么废话不多说,直接开始写:

Zepto核心模块架构代码

下列代码展示了Zepto的核心模块架构代码,忽略了所有实现的细节。

var Zepto = (function() {
    // 私有变量($和zepto不是私有变量,它们会被暴露出去)
    var undefined, emptyArray = [], filter = emptyArray.filter, slice = emptyArray.slice,
        $, zepto = {};

    // 私有函数
    function likeArray() {}
    // Z类
    function Z() {}
   $ = function(seclecor,context){
  return zepto.init(selector,context)
} // 构建Z对象的主要函数 zepto.matches = function() {}; zepto.fragment = function() {}; zepto.Z = function() { return new Z(dom, selector) }; zepto.isZ = function() { return object instanceof zepto.Z }; zepto.init = function() {}; zepto.qsa = function() {};    // Z对象的共享方法 $.fn = { constructor: zepto.Z, length: 0, forEach: emptyArray.forEach, reduce: emptyArray.reduce, push: emptyArray.push, sort: emptyArray.sort, splice: emptyArray.splice, indexOf: emptyArray.indexOf, concat: function() {} } // 静态方法 $.extend = function() {}; // plugin compatibility $.uuid = 0 $.support = {} $.expr = {} $.noop = function() {} // 修改zepto.Z和Z的原型都指向$.fn zepto.Z.prototype = Z.prototype = $.fn // 把内部的一些API函数通过$.zepto命名空间暴露出去 zepto.uniq = uniq zepto.deserializeValue = deserializeValue $.zepto = zepto return $ })() window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto)

我们首先一步一步来分析,我们平时调用$("selector")的时候中的$是什么?就是这段代码最底部的window.$,但是看代码我们知道调用$实际上是调用Zepto这个自调用函数,这个函数会返回一个$,那么这里的这个$是什么呢?很显然是代码中的一个函数,$函数又返回了一个zepto.init(),那么我们跳到zepto.init()看,这个zepto.init()会处理传入的参数,并且再次return出一个zepto.Z(),zepto.Z()会return 一个新的构造函数即 return new Z(),并且通过 zepto.Z.prototype = Z.prototype = $.fn 来使Z对象拥有$.fn中的方法。

 

zepto源码解读(一)

原文:http://www.cnblogs.com/coderzzp/p/6411775.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!