zepto 框架解构

why？为什么要有zepto

1 传统web js 框架，为了兼容低级、高级浏览器，代码量较大。而移动端浏览器功能差异较小，兼容问题不突出

2 传统web js 框架代码大，在移动端会造成终端流量加大、显示迟缓的情况

how？

1 删除不必要的兼容操作

2 删除不必要的UI控件等

what ？ zepto

zepto 是jquery 在移动端的简化版本。使用API同jquery 相同

zepto 的基本结构如下：

web 框架，一般都要解决一下问题：

1 一般操作的封装。如  dom 查询 、 class 扩展 等

2 事件管理

3 ajax 异步请求

4 os 、brower 的基本信息

遵循上面的问题，我们看看zepto 是怎么解决的

1  $ 中操作分为：核心操作 、异步请求操作、os browser 的基本信息

核心操作中包含常用的操作：$(selector)dom 查询

                                                    $.extend(targetObj,srcObj)  功能扩展

                                                    ......

异步请求操作：$.ajax

                            $.ajaxJSONP

                            ......

os brower 的基本信息： 判断移动端os 类型、browser 类型

2 Z

通过$(selector) 得到的doms ，都进过zepto 转换成Z 类的对象

Z 类提供了动态修改doms 和为doms 添加事件的操作

动态修改doms 的操作有：css 、html 、attr 等

添加事件： on、off、one、trigger 等

最后：

zepto 很小，只包含了框架的基本操作。so，zepto 提供了插件机制，这样客户可以根据需求，扩展zepto的功能

形式如下：

;(function($){
  $.extend($.fn, {
    foo: function(){
      // `this` refers to the current Zepto collection.
      // When possible, return the Zepto collection to allow chaining.
      return this.html('bar')
    }
  })
})(Zepto)

其实，在zepto 的内部，event 、ajax 等函数，也是通过这样的插件形式，加入到zepto中的。这样的代码组织结构更清晰