11-Mobile development tutorial-zepto.js Getting Started Tutorial

Zepto.js is a lightweight, modern browser-based JavaScript library that has a similar API to jquery. If you can use jquery, you'll also use Zepto.

1. Why Zepto.js?

1. API like jquery, familiar with jquery can be seamlessly migrated to Zepto.js
2. Zepto has designed a minimal core universal library for high-version modern browsers, with a small code size that is especially suitable for mobile development.
3. Zepto increased touch and gesture-related events for mobile
4. Zepto modularity is flexible and can be customized with modular modules

2. Zepto.js Download

Code Download: Zeptojs Chinese station, GitHub

2.1 Customizing the Zepto.js file module

Zepto default is five modules, respectively, Zepto, event, Ajax, form, ie, these five modules are called core modules.

Module	default	Description
Zepto	?	The core module contains many methods.
Event	?	on() off() handling Events through &
Ajax	?	XMLHttpRequest and JSONP Practical features
Form	?	Serializing & Submitting Web Forms
Ie	?	Increase desktop-enabled Internet Explorer + + and Windows Phone 8.
Detect		Provide $.os and $.browser message
Fx		The animate() method
Fx_methods		In the form of animations,, show hide toggle , and fade*() methods.
Assets		Experimental support cleans up iOS memory after removing the image element from the DOM.
Data		A comprehensive data() approach that can store arbitrary objects in memory.
Deferred		Provides the $.Deferred promises API. Relies on the "callbacks" module. When this module is included, a $.ajax() callback that supports promise interface chaining.
Callbacks		Provided for the "deferred" module $.Callbacks .
Selector		Experimental support for JQuery CSS expression practical functions, such as $(‘div:first‘) and el.is(‘:visible‘) .
Touch		Trigger tap– and swipe– related events on the touch device. This applies to all touch (IOS, Android) and pointer events (Windows Phone).
Gesture		Triggers the pinch gesture event on the touch device.
Stack		Provides andSelf & end() chain call methods
Ios3		The String.prototype.trim and Array.prototype.reduce methods (if they do not exist) are compatible with IOS 3.x.

If you need other non-core modules, you need to download GitHub's source code to compile it yourself.

Custom compilation steps:

1. The first step: Download Zeptojs source code: source Code
2. The second step: Unzip the source code, and open the command line into the source root directory

# 打开命令行工具，进入解压的zepto目录$ cd zepto-master# 安装npm包依赖$ npm install

3. Step three: Modify the dependent module of make compilation file

modules = (env[‘MODULES‘] || ‘zepto event ajax form ie‘).split(‘ ‘)## 修改：增加 touch gesture fx fx_methods等模块 ## modules = (env[‘MODULES‘] || ‘zepto event ajax form ie touch gesture fx fx_methods‘).split(‘ ‘)

4. Fourth step: Compiling the final Zeptojs

$ npm run-script dist

3. Zepto Precautions

1. Note that some modules must be packaged into ZEPTOJS files to be used, such as: fx_methods module methods: hide() show() animation methods.
2. Zepto only sets the global variable $ to point to itself. There is no Zepto.noconflict method.
3. jquery CSS extensions are not supported, however, the optional "selector" module provides support for several of the most commonly used pseudo-selectors
4. Zepto.js: Unable to get hidden element width height;
5. Zepto selector expression: [Name=value] value must be enclosed in double quotation marks "or single quotes"
6. Mobile endpoint penetration needs to block the default behavior to circumvent.

In fact, there are many methods of missing, so we are writing code in the time to pay more attention to the difference between Zepto and jquery, in this will not be more than repeat.

4. Zepto Application Demo

Usage is basically the same as jquery, just get started, don't hesitate.

<Ul><Li>list Item 1</Li><Liclass="Yaotaiyang" >list Item 2</Li><Li>list Item 3</li></ Ul><p>a paragraph</p><script type= "Text/javascript" >$ (function () {$ (" P "). On (  ' click ', function (e) {$ (</SCRIPT>          

5. Summary

Zepto.js really very small, and very flattering use of everyone familiar with the advantages of jquery, indeed very cute a JS library, the design of the module mean and practical, in the mobile side of the touch screen event encapsulation is very good, mobile web development is recommended.

11-Mobile development tutorial-zepto.js Getting Started Tutorial