zepto

前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。 但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的“坑”，与 jQuery 的差距还是很明显的，所以写篇文章记录下，希望对后来者有帮助 注意，本文撰写时 Zepto 版本为 1.0 正式版 从哪里下载 Zepto 这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？ There are more modules; a list of all modules is available in the README. 在这个 README 里面你会惊奇地发现，Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！ 所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块

zepto Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery github地址: https://github.com/madrobby/zepto 官方地址: http://zeptojs.com/ 中文版地址: http://www.css88.com/doc/zeptojs_api/ 注意点: Zepto的设计目的是提供 jQuery 类似的API，但并不是100%覆盖 jQuery jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的； 官网下载的zepto,就已经包含了官网所述的默认模块了 github上下载的zepto模块需要自己导入 // <!–引入核心模块；包含许多jQuery中常见方法–> <script src="js/zepto.js"></script> //<!–引入zepto事件模块, 包含了常见的事件方法on/off/click ...–> <script src="js/event.js"></script> // <!–引入zepto动画模块,–> <script src="js/fx.js"></script> // <!–引入zepto动画模块的常用方法,–> <script src="js/fx_methods.js"></script> zepto点击事件

前言 为什么通过touch可以触发click事件？ touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括 mousedown 、 mouseup 、 mousemove 和 click 事件。一次点击行为，事件的触发过程为： mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能 。touch事件包含 touchstart 、 touchmove 、 touchend ，注意手机上并没有 tap 事件。手指触发触摸事件的过程为： touchstart -> touchmove -> touchend 。 手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。有人在PC和手机上对事件做了对比实验，以说明手机对touch事件响应速度快于mouse事件。 可以看到在手机上，当我们手触碰屏幕时，要过300ms左右才会触发 mousedown 事件，所以 click 事件在手机上看起来就像慢半拍一样。 tap是怎么来的 我们在上面看到，手机上响应 click 事件会有300ms的延迟，那么这300ms到底是干嘛了？浏览器在 touchend 后会等待约300ms，原因是判断用户是否有双击（double tap）行为。如果没有 tap 行为，则触发 click

I'm trying to bind an event handler to a click function using zepto.js. Normally in JQuery I can just say return false and the actual click will never go through. Does Zepto not support this? And if so, how to get around this? To duplicate the behaviour of returning false in a jQuery event handler you need to call event.preventDefault() and event.stopPropagation() . 来源： https://stackoverflow.com/questions/6207956/zepto-js-doesnt-return-false

Let's say I have a element, and inside it want to put an indefinite number of items (based on the user's choices). Is there a way to create an ICanHaz template that allows for some sort of while loop. For instance: <ul> for(i = 0; i < numOfLi; i++) <li> {{ stuff }} </li> </ul> bostonou icanhaz (moustache) does include a way to loop. In javascript: var listOfStuff = {stuff: [ {key: "1", desc: "First"}, {key: "2", desc: "Second"} ]}; $("#mySelectBox").append(ich.myTemplate(listOfStuff)); In your view: <script id="myTemplate" type="text/html"> {{#stuff}} <option value="{{key}}">{{desc}}</option>

Agile 是一个基于HTML5+CSS3+JS的移动应用开发框架，在体验上尽量接近Native Like，并且同时支持单页模式和多页模式。 Agile 让HTML5在移动应用开发中充分发挥优势。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 简单、可扩展 Agile 支持Zepto和jQuery双引擎及相应的扩展；同时Agile均支持单页模式和多页模式的移动应用，可以与ExMobi、PhoneGap等流行的跨平台开发框架一起使用。 一个框架、多种设备 你的移动应用能在 Agile 的帮助下通过同一份代码快速、有效适配手机、平板等设备，这一切都是 CSS 媒体查询（Media Query）的功劳。 组件齐全 Agile 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、JavaScript 插件方面的所有详细文档。 入门 Agile框架本身是基于标准HTML5开发的，但是由于移动应用中需要使用大量的本地能力而HTML5无法胜任，所以通常需要依赖一个容器运行，并能调用容器里的本地能力。 ExMobi是由烽火星空推出的移动应用平台，除了封装了丰富的原生组件和本地能力，对HTML5也有很好的支持，所以在ExMobi中使用 Agile可以获得更好的体验。除此之外，Agile也可以运行于其他的容器比如PhoneGap等。

本文首发于我的个人博客 ： http://cherryblog.site/ 前言 js 中的类型检测也是很重要的一部分，所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检测。其实这也是在读 Zepto 源码中学习到的，所以阅读源码对我们的提升还是很有帮助的。本文基于参考了前辈们的文章之后个人理解此文写的有不当的地方，请各位大佬指正。 其实常规方法主要有四种 typeof instanceof Object.prototype.toString construcor 其实这四种方式归根结底就是两种思路： 根据数据类型判断（1，2） 根据构造函数判断（3，4） 前置基础 再看 Zepto 之前看了 慕课网一个老师的视频 ，一共一个小时左右，开了快进估计也就 45 分钟左右。只是讲了 Zepto 的架构和设计，没有详细的将每一个方法，初看之前可以看一下，对 Zepto 有一个大概的印象。 原型与原型链 其实这部分真的是老生常谈的问题，但是每一次听其他人都有新的收获。 真的是不想写这部分，但是自我感觉整体思路比较清晰 ，所以推荐大家阅读一下。 Zepto 整个的设计思想其实是基于 js 的原型链。关于原型链，这个老师讲的比较清晰，需要记住三句话： 每一个函数，都有一个 prototype 属性。 所有通过函数 new 出来的对象，这个对象都有一个 _

I'm wondering if it is possible to view 1. How many event listeners 2. What type of event listener On a single web page. Reason being is becuase im using off(); method. I'm using this framework , which is basically jQuery but not. Yeah, I'm using off but the even't isn't removing and and I have a feeling there is more than one eventListener on the element. If it is not possible with javascript, it is possible in the browser? Chrome has some built in tools. If you open up the element inspector, focus on an element, scroll to the bottom of the right hand column (where the CSS/Metrics/etc are),