发令枪一响，你是没时间看你的对手是怎么跑的。只有明天是我们的竞争对手。
您当前位置 :
>> zepto.js加入touch模块自定义打包构建
zepto.js加入touch模块自定义打包构建
zepto.js是个好东西，小巧灵活，遵循jQuery API，gzip之后只有10k左右，很多移动web开发者都用它。
不过，官网下载的默认构建包里居然不含移动设备专用的touch组件，这是脑袋被门挤了的节奏吗？要知道，在移动设备上使用click事件会有几百毫秒的延迟呢！
所以只有自己build了。以windows为例：
1、从github上down一份下来（），把目录直接丢到x盘。
2、安装nodejs环境以及npm包管理器（够折腾一段时间了xD..）。
3、运行，打开CMD命令行，用cd命令切换到x盘的zepto目录下。
4、编辑目录下的make文件，找到第42行，就是modules = (env['MODULES'] || 'zepto detect event ...').split(' ')这么一行。引号里以空格分隔的就是将要打包的模块名，加入touch，保存。（当然，可以根据自己需要增减模块，核心模块zepto别删掉了就行）
5、回到命令行，输入npm install回车安装。安装好，再输入npm run-script dist回车，开始打包构建。
6、如果没有报错的话，就ok了。到dist目录下可以看到生成的三个文件：原始文件zepto.js，压缩后的zepto.min.js，gzip后的zepto.min.gz。生产环境使用zepto.min.js就行了。
————————————————————
这段时间使用zepto的touch组件，遇到了传说中的tap"点透"问题和一些国产垃圾浏览器有时需要触摸两下才响应的问题，为此头疼不已。
虽有解决方案，但比较繁琐。遂感叹，难怪官方默认不含touch组件。
我为之前所说的话道歉。我才是脑袋被门挤了…
，我来了！
本文为jacky原创，转载请注明出处！
本文固定链接:
【上一篇】【下一篇】
您可能还会对这些文章感兴趣！
最新日志热评日志随机日志
日志总数：38 篇
评论总数：3220 篇
分类总数：7 个
标签数量：32 个
链接总数：1 个
建站日期：
运行天数：1047 天
最后更新：Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
I can't seem to get zepto to work with requirejs.
Here are my files
require.config({
zepto: 'libs/zepto/zepto.min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
cordova: 'libs/cordova/cordova-2.1.0',
history: 'libs/history/history',
historyZ: 'libs/history/history.adapter.zepto'
exports: '$'
backbone: {
deps: ['underscore', 'zepto']
// Load our app module and pass it to our definition function
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
'underscore',
'backbone',
'router' // Request router.js
], function($, _, Backbone, Router){
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
initialize: initialize
'underscore',
'backbone',
'views/dashboard'
], function($, _, Backbone, DashboardView){
var AppRouter = Backbone.Router.extend({
// Define some URL routes
: 'showDashboard',
var initialize = function(){
var app_router = new AppR
app_router.on('showDashboard', function(){
// We have no matching route, lets just log what the URL was
//console.log('No route:', actions);
var dashboardView = new DashboardView();
dashboardView.render();
Backbone.history.start();
initialize: initialize
You get the picture.. But when I run this all, I get this in Chromes console:
GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found)
require.js:1824
and a script error (I threw in parenthesis bc this wouldnt let me post.)
and in Firefox with firebug, it spits out a scripterror
Has anyone had success configuring zepto with require and can throw me some help?
36.1k16101161
Backbone normally has a "define(["underscore","jquery","exports"],.." in it, should just have to replace that. Then, I appended the following snippet at the end of zepto.js.
// If `$` is not yet defined, point it to `Zepto`
window.Zepto = Zepto
'$' in window || (window.$ = Zepto)
if ( typeof define === "function" && define.amd ) {
define( "zepto", [], function () { return Z } );
It seems to work. If you want to have jquery as a back up, (this is dirty) but I defined "zepto" as "jquery" in the zepto.js file, then in the requirejs.config I did this...
requirejs.config({
// Jquery should be zepto, probably a better way to do this...
jquery: RegExp(" AppleWebKit/").test(navigator.userAgent) ? '/js/vendor/zepto' : '/js/vendor/jquery.min',
underscore: '/js/vendor/underscore.min',
backbone: '/js/vendor/backbone.min'
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
// Stuff here...
But By doing that I didn't have to modify the backbone.js define file for jquery and I brought in browser support for IE...
Use requirejs's shim feature. See this .
Avoids having to edit a library's source every time this situation occurs.
Plus, you don't have to remember to make the edit every time you update the library to a newer version.
2,66052849
You can add a 'extend/zepto.js' file instead of modify Zepto.js:
* extend Zepto
], function() {
"use strict";
window.Zepto = Zepto
// If `$` or `jQuery` is not yet defined, point them to `Zepto`
'$' in window || (window.$ = Zepto)
'jQuery' in window || (window.jQuery = Zepto)
Then set jquery path to extend/zepto:
require.config({
'jquery': 'extend/zepto'
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Stack Exchange
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled最新消息：相关问题请加入QQ讨论群：
当前位置： &
& javascript移动端框架Zepto.js
Zepto是一个轻量级的支持移动WebKit浏览器javascript移动端框架，框架支持jQuery语法，该框架的压缩包zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了.
Zepto完全支持jQuery语法，支持其”$”符号，实例如下：
$(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元素。
如果已经给出了上下文（CSS选择器，DOM节点或者Zepto集合对象），则CSS选择器的范围就在给出的上下文中。如同调用了$(context).find(selector)
当参数为HTML字符串时，$用来创建DOM元素。
当参数为方法时，将其作为句柄添加到DOMContentLoaded事件中。页面加载完成后，立即执行。
$('div')
//=& all DIV elements on the page
// 创建元素
$(&&p&Hello&/p&&) //=& the new P element
// 创建元素和属性
$(&&p /&&, { text:&Hello&, id:&greeting&, css:{color:'darkblue'} })
//=& &p id=greeting style=&color:darkblue&&Hello&/p&
// 页面加载完成后执行函数
Zepto(function($){
alert('Ready to Zepto!')
Zepto相关资源
Zepto官网：
Zepto中文手册：
转载请注明： &
与本文相关文章了解轻量级的移动开发Javascript类库- Zepto.js -
- ITeye技术网站
博客分类：
了解轻量级的移动开发Javascript类库- Zepto.js
现代的javascript类库都非常巨大，看看jQuery就可以了，当你需要创建一个基于移动设备的应用，这些类库显得非常臃肿，记得前段时间我们介绍过的5个jQuery的备选轻量级移动客户端开发(Mobile development)类库？其中就有我们今天即将介绍的zepto.js。
移动设备中使用桌面类库和的几个问题
新酷技术支持下的互联网在最近发展的很快，几乎是跳跃的发展。我们从静态的页面发展到动态的web应用程序，然后到实时的动态高度responsive的web应用。其中最明显的就是移动客户端的而发展。
大家想想，很多用户都使用智能手机，甚至在家里我们也愿意是用平板电脑进行浏览和上网。这类的设备都非常适合进行页面浏览工作。
作为一个开发人员来说，我们需要考虑相关的因素，例如，带宽资源。很多时候不是所有的设备都拥有超棒的硬件条件或者网络状况。
我估计大家已经猜到了我介绍的以上内容。 很多超大的类库jQuery或者Prototype肯定在移动开发中扮演重要的角色，但是依然很多情况下你需要使用更加锐利的类库，相信很多的开发人员都同意我的观点。
所有代码使得一个类库可以兼容所有的浏览器
另外一个很大的问题在于一些很知名的类库都使用了大量代码来兼容不同的浏览器。事实上，jQuery就内建了很多代码用来处理不同浏览器的兼容性问题，这些问题往往对于开发人员是比较难于克服的。事实上，即使现在jQuery很实用了很多代码用来处理不同浏览器的兼容性问题。
但是如果我们需要开发的应用只需要支持特定的设备呢？你是不是觉得还有必要去处理如此多的兼容性问题？
如果你去掉这些代码，你可以：
去掉代码可以大大提高性能
是的你开发文件更小，帮助客服移动设别带宽问题
是不是觉得我们小题大作了？看看下面的jQuery代码吧：
isPlainObject: function( obj ) {
// Must be an Object.
// Because of IE, we also have to check the presence of the constructor property.
// Make sure that DOM nodes and window objects don't pass through, as well
if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
或者这些：
// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeT
// Provide a fallback method if it does not work
} catch( e ) {
// The intended fallback
代码可能并不是很复杂，但是你看到的确处理了很多的不同设备浏览器的问题。如果所有这些代码加起来，最后的性能问题我觉得你不得不考虑。
使用Zepto有什么区别？
我可以听到大家再说”说的够多的了！告诉我们这个类库“。接下来我们开始介绍它
Zepto是一个javascript的框架用来处理我们上面提到的问题。非常小的一个代码，总共只有8kb。
它删除了处理跨浏览器问题的代码，因此非常的苗条。当初开发的时候，就是用来处理webkit内核浏览器。当然mobile版本的webkit。现在它已经扩展支持桌面浏览器。当然，只支持现代浏器。 别指望它支持IE6这种古董界别的浏览器。
另外一个使得zepto非常轻量级的原因是避免了太多的特性。核心类库不包含过多的功能。甚至是AJAX和动画功能都是作为模块独立存在的。对于那些主要使用类库来处理DOM操作的人来说，这个类库非常棒。
还有一点，zepto的类库和jQuery类库是兼容的。如果你使用jQuery，其实你已经知道如何使用zepto了。
Zepto和jQuery是否可以互换？
是的！因为Zepto的核心API很大程度的模仿了jQuery类库。目的是为了减少学习难度。很多的方法，例如，处理DOM操作，都使用一样参数，甚至一样的顺序。我们看看下面例子：
$('#gbin1element').html("Hey! Are you ?");
看起来是不是非常熟悉？实际上和你使用jQuery来开发代码一模一样。而不仅仅是这一个方法。很多其它的功能API类似，例如，AJAX。
另一方面， API并不是100%的一样。Zepto放弃了一些在jQuery中破坏你的代码的方法。事实上，zepto是jQuery的一个子集，你可能会错过一些特别的内建功能，例如，Deferred。你不能指望在zepot和jQuery中方法执行一样。
对于我来说，最大的障碍在于很多方法都来自于jQuery，但是有不同的特性。有些时候最让人恼火的是你认为这么使用正确，但是其实并不正确。clone方法来拷贝事件handler就是一个很好的例子。如果不看代码的话，绝对不知道这个问题。
了解核心的API
废话不说了，这里我们开始介绍核心API。
修改一个容器的HTML内容
这是典型的DOM操作：读取并且修改HTML的内容。使用zepto，你可以调用html方法，传递新的HTML，如下：
var containerText = $('#gbin1element').html();
或者修改内容：
$('#gbin1element').html("do you ");
是不是很简答？
向一个容器添加或者前端添加元素
和jQuery类似，zepto也使用append和preappend方法。如下：
$('#gbin1element').append("This is the appended element.");
$('#gbin1element').prepend("This is the appended element.");
事件(Events)
Zepto提供了一堆非常容易使用的方法。很多都是基于on方法，是不是和jQuery很类似？
$('#gbin1element').on('click', function(e){
// 添加你需要执行的代码
如果你觉得需要使用bind，delegate或者live，千万不要，因为和jQuery一样，这些方法都已经deprecated了。
很多现代类库都提供使用简答的AJAX方法，zepto也不例外。
type: 'POST',
url: '/project',
data: { name: '' },
dataType: 'json',
success: function(data){
//成功时执行的方法
error: function(xhr, type){
alert('Hi, Not work?')
看起来复杂，其实非常明了。
创建一个AJAX对象并且传递参数
指定POST方法。缺省应该是GET
指定POST处理的URL
指定需要传递到服务器URL的参数，这里我们创建了这个值。
指定方法成功后或者失败执行的callback。
对于jQuery来说，它拥有分开的GET和POST及其load方法
那么动画如何处理呢？Zepto提供了animate方法用来处理动画：
$('#gbin1element').animate({
opacity: 0.50, top: '30px', color: '#656565'
我们只需要选择执行动画的元素，调用anmiate方法，指定动画属性，zepto会帮助我们处理其它。
如果你需要显示/隐藏元素，调用toggle方法。
到这里我相信大家都非常清楚了 - Zepto的DOM，动画和事件API都不同程度模仿了jQuery，我们都知道jQuery非常擅长处理这些。如果你使用过jQuery，那么使用zepto绝对很简单。
触摸事件及其其它超棒的特性
Zepto也提供了对于触摸设备的事件支持，如下：
longTap - 当你长按超过750ms会触发这个事件
这里是一个例子：
List item 1 DELETE
List item 2 DELETE
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
当你挥击一个项目，其它项目的删除按钮会隐藏，点击删除，这个项目会被删除。
以上就是所有的Zepto介绍，可能仁者见仁，智者见智，不同人对于这个类库理解也不一样。可能你依然愿意使用jQuery来处理web应用，但是还是希望你能够使用zepto来尝试一样，毕竟俩者的代码构造变化不大，希望大家觉得这篇文章有帮助，如果你有问题，请给我们留言，谢谢！
浏览: 120943 次
来自: 北京
我的解决办法是把D:\ACRS\Projects\TAIS 下 ...
总结得相当不错，支持下。
这个必须评论下，间接的救过俺的命啊
dagmom 写道掉线重连的问题属于比较好解决的，原本logi ...