JS新特性和流行框架 - 跟着李南江学编程

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

文档声明：
Zepto.js (1.1.6)文档请移步http://www.html.cn/doc/zeptojs-1.1.6_api/；
Zepto.js (1.1.2)文档请移步http://www.html.cn/doc/zeptojs-1.1.2_api/；

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

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

浏览器支持
初级 (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 模块
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 提供 $.Deferredpromises 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)

核心方法
$()

$(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节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素，使用

或

形式。

当一个函数附加在 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!')
})

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com