Zepto.js详解【好大一篇文章】

最新推荐文章于 2022-02-25 22:24:30 发布

四哥-云上

最新推荐文章于 2022-02-25 22:24:30 发布

阅读量1.4k

点赞数

分类专栏： Zepto.js详解文章标签：移动优先移动 api 库

本文链接：https://blog.csdn.net/yongbin668/article/details/51886601

版权

参考：Zepto.js API 中文版(1.1.6)

Core

Detect

Detect module

Event

Ajax

Form

Effects

$.fx
animate

Touch

Touch events

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

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

Zepto 是一款开源软件，它可以被开发者和商业发布。 MIT license.

Download Zepto

默认构建包含以下模块：
Core, Ajax, Event, Form, IE.

Zepto v1.0 默认捆绑了Effects, iOS3, 和 Detect 模块。
请参阅下面的可选模块(optional modules)。

zepto.js v1.1.6 (for development) – 54.6k uncompressed, lots of comments
zepto.min.js v1.1.6 (for production) – 9.1k when gzipped

Or grab the latest version on GitHub.

src="http://ghbtns.com/github-btn.html?user=madrobby&repo=zepto&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"> src="http://ghbtns.com/github-btn.html?user=madrobby&repo=zepto&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20">

用一个script标签引入Zepto到你的页面的底部：

...
<script src=zepto.min.js></script>
</body>
</html>

如果$变量尚未定义，Zepto只设置全局变量$指向它本身。没有Zepto.noConflict方法。

如果你需要支持旧的浏览器，如Internet Explorer 9或以下，你可以退回到jQuery的1.x。

浏览器支持

初级 (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的js库。

在浏览器上(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根据你的需要来生成(当服务端开启gzipped后，最精简的代码)代码。

关于如何建立Zepto的the README，包含运行测试和补丁。

Zepto 模块

module	default	description
zepto	✔	核心模块；包含许多方法
event	✔	通过`on()`& `off()`处理事件
ajax	✔	XMLHttpRequest 和 JSONP 实用功能
form	✔	序列化 & 提交web表单
ie	✔	增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect		提供 `$.os`和 `$.browser`消息
fx		The `animate()`方法
fx_methods		以动画形式的 `show`, `hide`, `toggle`, 和 `fade*()`方法.
assets		实验性支持从DOM中移除image元素后清理iOS的内存。
data		一个全面的 `data()`方法, 能够在内存中存储任意对象。
deferred		提供 `$.Deferred`promises API. 依赖"callbacks" 模块. 当包含这个模块时候, `$.ajax()` 支持promise接口链式的回调。
callbacks		为"deferred"模块提供 `$.Callbacks`。
selector		实验性的支持 jQuery CSS 表达式实用功能，比如 `$('div:first')`和`el.is(':visible')`。
touch		在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
gesture		在触摸设备上触发 pinch 手势事件。
stack		提供 `andSelf`& `end()`链式调用方法
ios3		String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.

创建插件

可以通过添加方法作为 $.fn 的属性来写插件：

;(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)

为了更好开始开发插件，先看下source of Zepto's core module，并确认读过coding style guidelines

核心方法

$()

$(selector, [context])   ⇒ collection
$(<Zepto collection>)   ⇒ same collection
$(<DOM nodes>)   ⇒ collection
$(htmlString)   ⇒ collection
$(htmlString, attributes)   ⇒ collection v1.0+
Zepto(function($){ ... })

通过执行css选择器，包装dom节点，或者通过一个html字符串创建多个元素来创建一个Zepto集合对象。

Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的DOM节点，除了$( Zepto)对象上的直接方法外(如$.extend)，文档对象中的所有方法都是集合方法。

如果选择器中存在content参数(css选择器，dom，或者Zepto集合对象)，那么只在所给的节点背景下进行css选择器；这个功能和使用$(context).find(selector)是一样的。

当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素，使用<div> 或 <div/>形式。

当一个函数附加在 DOMContentLoaded 事件的处理流程中。如果页面已经加载完毕，这个方法将会立即被执行。

$('div')  //=> 所有页面中得div元素
$('#foo') //=> ID 为 "foo" 的元素

// 创建元素:
$("<p>Hello</p>") //=> 新的p元素
// 创建带有属性的元素:
$("<p />", {
       text:"Hello", id:"greeting", css:{
      color:'darkblue'} })
//=> <p id=greeting style="color:darkblue">Hello</p>

// 当页面ready的时候，执行回调:
Zepto(function($){
      
  alert('Ready to Zepto!')
})

不支持jQuery CSS 扩展，然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器，而且可以被丢弃，与现有的代码或插件的兼容执行。

如果$变量尚未定义，Zepto只设置了全局变量$指向它本身。允许您同时使用的Zepto和有用的遗留代码，例如，prototype.js。只要首先加载Prototype，Zepto将不会覆盖Prototype的 $ 函数。Zepto将始终设置全局变量Zepto指向它本身。

$.camelCase v1.0+

$.camelCase(string)   ⇒ string

将一组字符串变成“骆驼”命名法的新字符串，如果该字符已经是“骆驼”命名法，则不变化。

$.camelCase('hello-there') //=> "helloThere"
$.camelCase('helloThere')  //=> "helloThere"

$.contains v1.0+

$.contains(parent, node)   ⇒ boolean

检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回 false。

$.each

$.each(collection, function(index, item){ ... })   ⇒ collection

遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。

$.each(['a', 'b', 'c'], function(index, item){
      
  console.log('item %d is: %s', index, item)
})

var hash = {
       name: 'zepto.js', size: 'micro' }
$.each(hash, function(key, value){
      
  console.log('%s: %s', key, value)
})

$.extend

$.extend(target, [source, [source2, ...]])   ⇒ target
$.extend(true, target, [source, ...])   ⇒ target v1.0+

通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。

默认情况下为，复制为浅拷贝（浅复制）。如果第一个参数为true表示深度拷贝（深度复制）。

var target = {
       one: 'patridge' },
    source = {
       two: 'turtle doves' }

$.extend(target, source)
//=> { one: 'patridge',
//     two: 'turtle doves' }

$.fn

Zepto.fn是一个对象，它拥有Zepto对象上所有可用的方法，如 addClass()， attr()，和其它方法。在这个对象添加一个方法，所有的Zepto对象上都能用到该方法。

这里有一个实现 Zepto 的 empty() 方法的例子：

$.fn.empty = function(){
      
  return this.each(function(){
       this.innerHTML = '' })
}

$.grep v1.0+

$.grep(items, function(item){ ... })   ⇒ array

获取一个新数组，新数组只包含回调函数中返回 ture 的数组项。

$.grep([1,2,3],function(item){
      
    return item > 1
});//=>[2,3]

$.inArray v1.0+

$.inArray(element, array, [fromIndex])   ⇒ number

返回数组中指定元素的索引值（愚人码头注：以0为基数），如果没有找到该元素则返回-1。

愚人码头注：[fromIndex] 参数可选，表示从哪个索引值开始向后查找。

$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],1);//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],2);//=>-1

$.isArray

$.isArray(object)   ⇒ boolean

如果object是array，则返回ture。

$.isFunction

$.isFunction(object)   ⇒ boolean

如果object是function，则返回ture。

$.isPlainObject v1.0+

$.isPlainObject(object)   ⇒ boolean

测试对象是否是“纯粹”的对象，这个对象是通过对象常量（"{}"）或者 new Object 创建的，如果是，则返回true。

$.isPlainObject({})         // => true
$.isPlainObject(

最低0.47元/天解锁文章

四哥-云上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto.js详解【好大一篇文章】

Zepto.js API 中文版(1.1.6)下载浏览器支持模块Change LogAcknowledgementsCore$()$.camelCase$.contains$.each$.extend$.fn$.grep$.inArray$.isArray$.isFunction$.isPlainObject$.isWindow$.map$.parseJSON$.trim$
复制链接

扫一扫

专栏目录