`
阅读更多
Zepto

Zepto,是一个比较有争议的框架,最近一直在做移动端页面开发,一直在用这个框架,今天对于用了这么久的框架来聊聊这个Zepto如何。

Zepto是什么:

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果会用jquery,那么也会用zepto,从这里了解到,Zepto是一边比较新的框架,它比jquery小很多,只有20多KB,实现了,jquery只能说一部分的功能。

Zepto - jquery 对比:

Zepto号称迷你版jQuery,并且成为移动端dom操作库的首选
事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非!
艾伦分析了jQuery,我就暂时没有那个本事分析jQuery,这里就恬不知耻说说自己对zepto的源码理解。
核心代码1000行不到,快速占领了移动端的市场。
也如艾伦所言,jQuery狭义的讲其实就是dom操作库
zepto将这点发扬光大,并且抛弃了浏览器兼容的包袱,甚至CSS3的前缀都不给加,这些因素造就了zepto小的事实。

Zepto - jquery 性能上:

一直特别纠结zepto性能这个问题,有的人说zepto体积小,性能好,然后又看国外的一个帖子,说除了体积小,性能比jquery差很多。各个人的说法不一,不清楚到底选择哪个好。经过在pc浏览器和手机浏览器上测试,zepto的效率确实很低,除了体积小,没有任何优势,jquery的性能差不多是zepto的2.5倍。一定要消除这个观念,不是体积很小,效率就很高。

Zepto的一些核心的组件是哪些呢:

zepto现在也采用了模块拆分,这样读起来其实代码十分清晰,门槛也低了很多,整个zepto核心模块保持在900行以内
看他很好的发扬了dom库特点便是因为这900行基本在干dom操作的活
核心模块有以下部分组成

① 闭包变量、工具类方法定义

这个部分主要为后面服务,比如说什么isFunction/isPlainObject/children
其中有一个比较特别的变量是
zepto = {};


② zepto与jQuery的$

zepto第二阶段干的事情便是定义了一个类
$ = function(selector, context){
  return zepto.init(selector, context)
}


③ zepto与jQuery的$.fn

我们知道jQuery的$.fn指向的是jQuery.prototype的原型对象,而zepto的fn就是一个简单对象
$.fn = {};

这里有段非常关键的代码是:

domArr.__proto__ = $.fn;


还有一些就不一一写出来了。

既然Zepto这样那为为什么还要用它呢:

他适用于移动设备已经桌面浏览器除了ie系列的
他兼容jquery的API,所以学起来或用起来并不吃力。他比jquery的优势在于
1.他够小,只有21k左右,功能俱全(这里的功能齐全只是说再实现一些比较实用的效果和接口上等等)。
2.增加了移动设备的触摸等事件,不需要再次引入其他手机框架如jquery mobile。
3.虽然不兼容ie但是提供了一个兼容方法


总结:Zepto确实是是一个很轻量级的移动端js框架,去除了jquery那么繁重的和用不到的功能模块,在基于jquery的基础上跟进出来,能大部分的时间移动端所需要的效果和功能,学习和入手快,不方便的地方,在于没有jquery或者jquery mobile强大已经css3动画效果,游览器的兼容,等等,一个框架的新起总有他的好处和问题所以还是需要看个人的需要来定。
分享到:
评论

相关推荐

    zepto库中touch.js

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。touch库实现'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap',...

    zepto.js的中文手册,中文api说明,zepto中文注释

    ### Zepto.js中文手册知识点详解 #### 一、概述 Zepto.js是一个轻量级的JavaScript库,旨在为移动Web开发提供与jQuery类似的API。它体积小、性能高且易于使用,非常适合移动设备上的Web应用开发。Zepto.js支持大...

    zepto:node了一个

    标题“zepto:node了一个”暗示我们即将探讨的是一个与Node.js环境相关的项目,其中使用了Zepto库。Zepto是一个轻量级的JavaScript库,它为浏览器环境提供了类似于jQuery的功能,但体积更小,更适合移动端的Web应用...

    zepto手机移动端弹出提示框图标动画特效

    本资源“zepto手机移动端弹出提示框图标动画特效”正是一款专注于这一领域的优秀解决方案。Zepto是一个轻量级的JavaScript库,专为移动端浏览器设计,它提供了与jQuery相似的API,但在移动端具有更快的性能。 首先...

    基于zepto实现的适合移动网页的大转盘抽奖效果.zip

    本项目通过Zepto.js库实现了一种适用于移动网页的大转盘抽奖效果,旨在为用户提供流畅、直观且富有吸引力的交互体验。Zepto.js是一个轻量级的JavaScript库,类似于jQuery,特别适合移动端的性能优化。 1. Zepto.js...

    Zepto集成touch版本

    标题提到的"Zepto集成touch版本"指的是 Zepto 的一个扩展,专门针对触摸事件和手势处理进行了优化,使其更适合在触屏设备如智能手机和平板电脑上使用。这个集成版本包含了更多的功能,比官方提供的基础7个组件更加...

    zepto.js中文离线手册网页版

    zepto.js是一款轻量级的JavaScript库,专为移动设备的浏览器设计,特别是针对iOS和Android等触屏设备。它提供了与jQuery相似的功能,但体积更小,加载速度更快,适合移动环境。Zepto.js的核心目标是实现一个适用于...

    mobiscroll.zepto.zip

    《 Mobiscroll 与 Zepto 的日期选择器集成详解》 在移动开发中,提供一个易用、高效的日期选择器是至关重要的。Mobiscroll 是一款知名的触摸优化的滚动库,特别适合在移动设备上创建日历、时钟和滑动选择器。而 ...

    zepto包含touch模块

    zepto.js是一个轻量级的JavaScript库,专为移动设备的Web开发设计,尤其是针对触摸屏设备。它提供了类似于jQuery的API,使开发者能够轻松地处理DOM操作、事件处理、动画效果以及Ajax交互。在标题提到的"zepto包含...

    Zepto.js移动端左右滑动导航菜单.zip

    标题中的“Zepto.js移动端左右滑动导航菜单”是指一个基于Zepto.js库开发的,专为移动设备设计的交互式导航菜单。该菜单具备左右滑动的功能,允许用户通过在屏幕上向左或向右滑动来切换不同的导航选项。在iOS和...

    移动端zepto工具包

    Zepto是一个轻量级的JavaScript库,专门为移动设备设计,特别是在iOS和Android平台上。它旨在为移动Web开发提供类似于jQuery的API,使开发者能够轻松地处理DOM操作、事件处理、动画效果以及Ajax交互。在移动端,...

    javascript框架- zepto.js

    zepto.js是一款专门为移动Web开发设计的轻量级JavaScript库,它的目标是成为jQuery在移动端的替代品。鉴于jQuery在桌面浏览器上的强大功能,zepto.js在保持相似API的同时,专注于移动设备的需求,以较小的体积提供...

    jquery validation 支持zepto

    让jquery validation plugin 支持zepto

    zepto 中文api文档 【离线文件】

    zepto.js 是一个轻量级的JavaScript库,主要针对移动设备和现代浏览器,它提供了类似于jQuery的核心功能,包括选择器、DOM操作、事件处理、动画效果以及Ajax等。这个压缩包包含了一份Zepto中文API的离线文档,方便...

    移动框架zepto.js

    3. **社区支持**:Zepto.js有活跃的社区和丰富的插件库,可以扩展其功能,如zepto.form插件用于处理表单提交,zepto.swipe用于滑动事件等。 4. **调试与优化**:在开发过程中,使用开发者工具检查性能瓶颈,适时...

    zepto下的page切换控件

    zepto-page-transitions是一个基于Zepto.js库的页面切换控件,它旨在为移动Web应用提供类似jQuery Mobile的页面滑动效果。Zepto.js是一个轻量级的JavaScript库,主要针对现代浏览器,尤其是移动设备,提供了与jQuery...

    zepto文档api及其js文件

    zepto.js是一个轻量级的JavaScript库,专为移动设备的浏览器设计,特别是针对iOS和Android平台。它在设计上模仿了jQuery的API,提供了一系列用于处理DOM操作、事件、动画以及Ajax请求的方法,但体积更小,更适合...

    zepto-cookie-master

    在IT行业中,JavaScript库Zepto是为移动端浏览器设计的一个轻量级替代库,与jQuery有很高的API兼容性。本文将深入探讨"zepto-cookie-master"这个项目,它是一个专门用于处理Cookie操作的Zepto插件。 Cookie是Web...

    jquery validation 支持zepto第二版

    标题"jquery validation 支持zepto第二版"指的是将jQuery Validation插件与Zepto.js兼容,以便在使用Zepto的项目中实现表单验证功能。这通常涉及到对原有jQuery Validation代码的适配和修改,以使其能够在Zepto环境...

    zepto.js v1.2.0 (for development)

    Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal...

Global site tag (gtag.js) - Google Analytics