用Zepto代替Jquery提升移动Web用户体验

àì夳堔傛蜴生んèń 2022-07-15 14:09 232阅读 0赞

jQuery现在已经是Web开发者比较依赖的一个库.甚至在很多公司内部也把jQuery当成了一个基本库来使用.

对于移动端压缩后100k左右的jQuery显得有些重量级了,于是就出现了一个轻量级兼容库Zepto.js.

Zepto是为了支持移动端的浏览器而开发的一个和jQuery API极度相似的一个库, 如果你会用jquery，那么你也会用zepto,这样就大大降低团队协作的成本,不用改变开发习惯也能迅速的进行移动端开发.

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

具体到我们的项目，由于各种原因，开始时并没有使用Zepto而是使用了Jquery。这次性能优化打算换成Zepto，毕竟size查了10倍啊。但是简单的把js引入替换成zeptp显然是不行的。由于用了lazyload等插件，依赖了jQuery的$.Defered, 还用了css3的一些selector，因此还有需要引入Zepto的一些扩展模块，Zepto默认提供的压缩文件只包含几个默认模块，可以通过命令自定义打包其它模块，也可以通过[http://github.e-sites.nl/zeptobuilder/][http_github.e-sites.nl_zeptobuilder]进行在线自定义打包和压缩。

兼容Zepto的lazyload插件可以用这个[https://github.com/jieyou/lazyload][https_github.com_jieyou_lazyload]

## Zepto modules ##

Zepto modules are individual files in the “src/” directory.

<table> 
 <thead> 
  <tr> 
   <th>module</th> 
   <th>default</th> 
   <th>description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><a rel="nofollow">zepto</a></th> 
   <td>✔</td> 
   <td>Core module; contains most methods</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">event</a></th> 
   <td>✔</td> 
   <td>Event handling via <code>on()</code> &amp; <code>off()</code></td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">ajax</a></th> 
   <td>✔</td> 
   <td>XMLHttpRequest and JSONP functionality</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">form</a></th> 
   <td>✔</td> 
   <td>Serialize &amp; submit web forms</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">ie</a></th> 
   <td>✔</td> 
   <td>Support for Internet Explorer 10+ on the desktop and Windows Phone 8</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">detect</a></th> 
   <td></td> 
   <td>Provides <code>$.os&lt;/code&gt; and &lt;code&gt;$.browser</code> information</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">fx</a></th> 
   <td></td> 
   <td>The <code>animate()</code> method</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">fx_methods</a></th> 
   <td></td> 
   <td> Animated <code>show</code>, <code>hide</code>, <code>toggle</code>, and <code>fade*()</code> methods. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">assets</a></th> 
   <td></td> 
   <td> Experimental support for cleaning up iOS memory after removing image elements from the DOM. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">data</a></th> 
   <td></td> 
   <td> A full-blown <code>data()</code> method, capable of storing arbitrary objects in memory. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">deferred</a></th> 
   <td></td> 
   <td> Provides <code>$.Deferred</code> promises API. Depends on the “callbacks” module. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">callbacks</a></th> 
   <td></td> 
   <td> Provides <code>$.Callbacks</code> for use in “deferred” module. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">selector</a></th> 
   <td></td> 
   <td> Experimental <a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/" rel="nofollow">jQuery CSS extensions</a> support for functionality such as <code>$('div:first')</code> and <code>el.is(':visible')</code>. </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">touch</a></th> 
   <td></td> 
   <td> Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone). </td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">gesture</a></th> 
   <td></td> 
   <td>Fires pinch gesture events on touch devices</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">stack</a></th> 
   <td></td> 
   <td>Provides <code>andSelf</code> &amp; <code>end()</code> chaining methods</td> 
  </tr> 
  <tr> 
   <th><a rel="nofollow">ios3</a></th> 
   <td></td> 
   <td> String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x. </td> 
  </tr> 
 </tbody> 
</table>

[http_github.e-sites.nl_zeptobuilder]: http://github.e-sites.nl/zeptobuilder/
[https_github.com_jieyou_lazyload]: https://github.com/jieyou/lazyload