Zepto清单

淡淡的烟草味﹌ 2022-09-24 15:16 241阅读 0赞

### Zepto清单 ###

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(0,0,0); font-family:verdana,Arial,Helvetica,sans-serif; font-size:14px"> 
 <thead> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px">模块</th> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px">建议</th> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px">描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/zepto.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">zepto</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> ✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Core module; contains most methods 核心模块，包含初始化Zepto对象的实现，以及dom选择器、css属性操作、dom属性操作 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/event.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">event</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> ✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Event handling via&nbsp;<code>on()</code>&nbsp;&amp;&nbsp;<code>off()</code> Zepto事件处理库，包含整个dom事件的实现 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/ajax.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">ajax</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> ✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> XMLHttpRequest and JSONP functionality Zepto ajax模块的实现 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/form.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">form</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Serialize &amp; submit web forms form表单相关实现，可以删去，移动端来说意义不大 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/ie.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">ie</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> ✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Support for Internet Explorer 10+ on the desktop and Windows Phone 8 这个便是为上面那段实现还账的，几行代码将方法属性扩展至dom集合上（所以标准浏览器返回的是一个实例，ie返回的是一个加工后的数组） </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/detect.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">detect</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Provides&nbsp;<code>$.os</code>&nbsp;and&nbsp;<code>$.browser</code>&nbsp;information 设备判断，检测当前设备以及浏览器型号 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/fx.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">fx</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> The&nbsp;<code>animate()</code>&nbsp;method animate方法，这里叫fx模块有点让人摸不着头脑 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/fx_methods.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">fx_methods</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Animated&nbsp;<code>show</code>,&nbsp;<code>hide</code>,&nbsp;<code>toggle</code>, and&nbsp;<code>fade*()</code>&nbsp;methods. 一些jQuery有的方法，Zepto没有的，这里做修复，比如fadeIn fadeOut意义不大 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/assets.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">assets</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Experimental support for cleaning up iOS memory after removing image elements from the DOM. 没有实际使用过，具体用处不明 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/data.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">data</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> A full-blown&nbsp;<code>data()</code>&nbsp;method, capable of storing arbitrary objects in memory. 数据存储模块 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/deferred.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">deferred</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Provides&nbsp;<code>$.Deferred</code>&nbsp;promises API. Depends on the "callbacks" module. 神奇的deferred模块，语法糖，为解决回调嵌套而生 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/callbacks.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">callbacks</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Provides&nbsp;<code>$.Callbacks</code>&nbsp;for use in "deferred" module. 服务于deferred，实际未使用过 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/selector.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">selector</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;&nbsp;✔</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Experimental&nbsp;<a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">jQuery CSS extensions</a>&nbsp;support for functionality such as<code>$('div:first')</code>&nbsp;and&nbsp;<code>el.is(':visible')</code>. 扩展选择器，一些语法糖 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/touch.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">touch</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;X</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone). 提供简单手势库，这个大坑，谁用谁知道！！！几个有问题的地方： ① 事件直接绑定至document，性能浪费 ② touchend时候使用settimeOut导致event参数无效，所以preventDefault无效，点透等情况也会发生 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/gesture.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">gesture</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Fires pinch gesture events on touch devices 对原生手势操作的封装 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/stack.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">stack</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> Provides&nbsp;<code>andSelf</code>&nbsp;&amp;&nbsp;<code>end()</code>&nbsp;chaining methods 语法糖，链式操作 </td> 
 </tr> 
 <tr> 
 <th style="border:1px solid silver; border-collapse:collapse; padding:3px"><a href="https://github.com/madrobby/zepto/blob/master/src/ios3.js#files" style="color:rgb(26,139,200); text-decoration:none" rel="nofollow">ios3</a></th> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px; text-align:center"> &nbsp;</td> 
 <td style="color:rgb(69,69,69); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; border:1px solid silver; border-collapse:collapse; padding:3px"> String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x. 没有用过 </td> 
 </tr> 
 </tbody> 
</table>

真实项目时，完全可以按照需要选取模块即可