Zepto 是一个轻量级的、针对现代高级浏览器的 JavaScript 工具库,它兼容 jQuery 的 API 。 如果你会用 jQuery,那么你就已经会用 Zepto 了。
Zepto 的设计目的是提供与 jQuery 兼容的 API,但并不是 100% 覆盖 jQuery API 。 Zepto 设计的目的是提供一个 5-10k 的通用库、下载并快速执行、有一套大家熟悉且稳定的 API, 所以你能把你可以把主要的精力放到应用开发上。
Zepto 是一款开源软件,它采用的是对开发者和商业都很友好的开源协议 -- MIT license。
下载 Zepto
- zepto.js v{{ page.version }} (开发版) – 57.3k uncompressed, lots of comments
- zepto.min.js v{{ page.version }} (稳定版) – 9.6k when gzipped
其他下载方式:
npm install zepto
; or- grab the latest version on GitHub.
默认构建包含以下模块: Core, Ajax, Event, Form, IE.
如果 $
变量尚未定义,Zepto 只设置全局变量 $
指向它本身。
没有 Zepto.noConflict
方法。
对浏览器支持:
主要浏览器 (100% 支持)
- Safari 6+ (Mac)
- Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
- Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
- iOS 5+ Safari
- Android 2.3+ Browser
- Internet Explorer 10+ (Windows, Windows Phone)
次要浏览器 (全部或部分支持)
- iOS 3+ Safari
- Chrome <30
- Firefox 4+
- Safari <6
- Android Browser 2.2
- Opera 10+
- webOS 1.4.5+ Browser
- BlackBerry Tablet OS 1.0.7+ Browser
- Amazon Silk 1.0+
- Other WebKit-based browsers/runtimes
需要注意的是 Zepto 的一些可选功能是专门针对移动端浏览器的; 因为它的最初目标在移动端提供一个精简的类似 jQuery 的工具库。
在浏览器上(Safari、Chrome 和 Firefox)上开发页面应用或者构建基于 HTML 的 web-view 本地应用, 例如 PhoneGap,使用 Zepto 是一个不错的选择。
总之,Zepto 希望在所有的现代浏览器中作为一种基础环境来使用。 Zepto 不支持旧版本的 Internet Explorer浏览器(<10)。
手动构建 Zepto
上面提供的 zepto.js
和 zepto.min.js
可以直接使用。
然而,为了更好的程序效果和自由性,可以通过 Zepto 源码构建 Zepto.js 和 zepto.min.js 的时候选择模块并作测试,
使用 UglifyJS 根据你的需要来生
成 zepto.min.js
(当服务端开启gzipped后,最精简的代码)文件。
请参考 the README 文件了解如何构建 Zepto, 还有如何测试以及提交补丁的说明。
Zepto 模块
模块名 | 默认内置 | 描述 |
---|---|---|
zepto | ✔ | Core module; contains most methods |
event | ✔ | Event handling via on() & off()
|
ajax | ✔ | XMLHttpRequest and JSONP functionality |
form | ✔ | Serialize & submit web forms |
ie | ✔ | Add support for Internet Explorer 10+ on desktop and Windows Phone 8. |
detect | Provides $.os and $.browser information |
|
fx | The animate() method |
|
fx_methods |
Animated show , hide , toggle ,
and fade*() methods.
|
|
assets | Experimental support for cleaning up iOS memory after removing image elements from the DOM. | |
data |
A full-blown data() method, capable of storing arbitrary
objects in memory.
|
|
deferred |
Provides $.Deferred promises API.
Depends on the "callbacks" module.
When included, $.ajax() supports a
promise interface for chaining callbacks.
|
|
callbacks |
Provides $.Callbacks for use in "deferred" module.
|
|
selector |
Experimental jQuery
CSS extensions support for functionality such as $('div:first') and
el.is(':visible') .
|
|
touch | Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone). | |
gesture | Fires pinch gesture events on touch devices | |
stack | Provides andSelf & end() chaining methods |
|
ios3 | String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x. |
创建插件
Plugins can be written by adding methods as properties of
$.fn
:
{% highlight js %}
;(function($){
$.extend($.fn, {
foo: function(){
// this
refers to the current Zepto collection.
// When possible, return the Zepto collection to allow chaining.
return this.html('bar')
}
})
})(Zepto)
{% endhighlight %}
To get started with plug-in development, take a look at the source of Zepto's core module, and be sure to read the coding style guidelines.