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中的。这样的代码组织结构更清晰