这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
kissy核心模块列表(1.40)
2013年11月12日 JavaScript ⁄ 共 6417字 等你评论

KISSY 架构

KISSY 采用模块化设计,除了 Seed 集成的功能之外,所有模块均需要手动按需载入。KISSY 核心模块结构如下图,Seed 是最重要模块的集合,包含最基础的面向对象和语言基础。

kissy架构

从模块作用和外观上划分:

  • Seed:KISSY 种子文件,包含基础的面向对象支持、模块加载器、Lang 增强、UA,所有 KISSY 应用必须载入种子文件。种子不包含 DOM、Node 等常用功能,需要开发者按需引入。
  • Components:颗粒化的功能单元,是比较常用的模块,二八原则中的那20%,这些是官方提供的可靠的模块。
  • Widgets:组件,分为官方提供和非官方提供。非官方组件由第三方开发,存储于 Gallery 内,官方组件和 Components 组件一样,直接KISSY.use('modName')来载入。

从模块功能上划分:

  • Seed:种子所包含的最小集合
  • Core:核心模块
  • Infrastructure:代码基础设施
  • Components:其他模块单元

从 KISSY 1.4.0 开始,将不再提供kissy.js,只提供seed.js,目的是强制用户按需加载,避免无用组件的载入,尽可能的减少请求的体积。因此,开发者需要熟练掌握核心组件的使用,尤其是图中加粗的部分。

Seed 中的模块无须手动引入。


开发者是否需要关心子模块?

不需要!除非你非常非常了解 KISSY 所有模块间的依赖关系,否则不推荐直接调用子模块。

原因:从开发的角度,模块被拆的粒度更小,比如 dom 和 event,其实是由这些子模块构成

kissy子模块

根据硬件环境的不同,KISSY 会选择性加载所需模块,比如dom/ie模块,显然不是为了 Mobile 准备的,再比如event/shake模块,显然在 Mobile 设备中也不会载入,再比如 IE<9 下会补充加载event/hashchange。即,dom 和 event 模块是和环境强相关,作为开发者,不必去关心这些模块什么情况下怎么载入,只需了解 KISSY 已经为你处理好了硬件探测,一定会加载正确的最小模块集合。

KISSY 这种处理兼容性的方式为 shim。在涉及到处理浏览器在实现标准 API 上的差异性时,这种方法又被称为 polyfills。是一种流行的特性检测的方法。


KISSY 所有模块列表

标黄的行表示一级模块,其他为被依赖模块。

 

模块名 模块说明 依赖
i18n 多语言插件,内置于Loader中,通过S.config("lang")查看当前库的语言,默认为zh-cn
core 最常用的核心模块的别名,在1.3.x及以下版本中为组成kissy.js的模块,是这些模块的别名:dom,event,io,anim,base,node,json,ua,cookie
ajax
rich-base base 的别名,1.4.x 推荐直接使用 base
anim DOM 的动画模块,高级浏览器优先使用CSS3动画 dom
anim/base
anim/timer
anim/transition
anim/base 动画 API 的实现,包含动画工具函数,自定义事件和动画队列 dom
./base/utils
promise
./base/queue
anim/timer 动画的时间程序,包括缓动、特效、快捷调用、颜色等 dom
./base
./timer/easing
./timer/manager
./timer/fx
./timer/short-hand
./timer/color
./timer/transform
anim/transition CSS Transition 动画 dom
event/dom
./base
base KISSY 的 attribute 模块, 模拟实现了属性描述符, 提供属性的获取和设置操作, 即属性的 getter 和 setter 动作. event/custom
button button 组件 node
component/control
color 颜色格式组件 base
combobox 复合输入框组件 node
component/control
menu
base
io
component/container 容器渲染组件,DOM 容器常见行为及其生命周期 component/control
component/manager
component/control 控制器组件 node
base
promise
component/manager
xtemplate/runtime
component/extension/align DOM 元素的对齐插件 node
component/extension/delegate-children DOM 元素的子节点代理 node
component/manager
component/plugin/drag 拖拽插件 base
dd
component/plugin/resize 缩放插件 resizable
date/format 日期格式 date/gregorian
i18n!date
date/gregorian 日期的公历格式 i18n!date
date/picker 日期选择组件 node
date/gregorian
i18n!date/picker
component/control
date/format
date/popup-picker 弹出式日期选择组件 date/picker
component/extension/align
component/extension/shim
dd 拖拽组件 node
base
dd/plugin/constrain 拖拽插件:容器拖拽 base
node
dd/plugin/proxy 拖拽插件:容器代理 node
base
dd
dd/plugin/scroll 拖拽插件:拖拽滚动 dd
base
node
dom/basic dom/base 的同名模块
dom DOM 节点操作,是dom/basic的别名
dom/class-list 类名选列表择器的实现 dom/base
dom/ie 降级到ie中时的一些降级处理方案 dom/base
dom/selector CSS 3 选择器引擎,在 ie6-8 等低级浏览器中自动选择加载 dom/basic
editor 富文本编辑器组件 node
html-parser
component/control
event
event Event 组件 event/dom
event/custom
event/custom 自定义事件,用来被类扩充,被扩充的类具有自定义事件的机制 event/base
event/dom 基于自定义事件的DOM扩充,实现了DOM操作中的事件,是这些模块的别名:event/dom/base,event/dom/shake,event/dom/focusin
event/dom/base 基础事件的实现,包括鼠标、键盘、手势、重力感应等实现 ./base/dom-event
./base/object
./base/key-codes
./base/gesture
./base/special-events
./base/mouseenter
./base/valuechange
event/dom/focusin DOM 元素获得焦点时的事件 event/dom/base
event/dom/hashchange ie中的hashchange事件的实现,高级浏览器中不会被加载 event/dom/base
dom
event/dom/ie IE中的事件的降级处理 event/dom/base
dom
event/dom/shake 手持终端里的摇一摇事件 event/dom/base
event/dom/touch 基础的触屏事件的封装,包括tap、swipe、singleTap、doubleTap等 event/dom/base
dom
filter-menu 过滤菜单组件 menu
node
component/extension/content-render
io ajax的别名,实现了Ajax dom
event/custom
promise
event
kison KISSY 对象格式,内部使用 base
menu 菜单组件 node
component/container
component/extension/delegate-children
component/control
component/extension/content-render
component/extension/align
component/extension/shim
menubutton 菜单按钮组件 node
button
component/extension/content-render
menu
mvc mvc组件 base
node
io
json
node KISSY 对 Node 进行了统一的接口封装,大部分方法继承自 Dom node/base
node/attach
node/override
node/anim
overlay 浮层行为的封装 component/container
component/extension/shim
component/extension/align
node
component/extension/content-render
resizable DOM 缩放组件 node
base
dd
resizable/plugin/proxy DOM 缩放插件:节点代理 base
node
scroll-view scroll-view 组件,实现了自定义滚动条,是scroll-view/base的别名
scroll-view/base 同scroll-view,被映射到scroll-view node
anim
component/container
component/extension/content-render
scroll-view/drag scroll-view中的拖拽滚动功能 scroll-view/base
node
anim
scroll-view/plugin/pull-to-refresh scroll-view插件:下拉刷新功能 base
scroll-view/plugin/scrollbar scroll-view插件:滚动条的自定义 base
node
component/control
separator 对象分割组件,内部使用 component/control
split-button split-button 组件 component/container
button
menubutton
stylesheet 样式表模块,用来实现通过js读写样式 dom
swf flash 模块 dom
json
base
tabs 选项卡组件 component/container
toolbar
button
toolbar 工具条组件 component/container
component/extension/delegate-children
node
tree 树形菜单组件 node
component/container
component/extension/content-render
component/extension/delegate-children
xtemplate KISSY 模板语言 xtemplate/runtime
xtemplate/compiler
xtemplate/compiler KISSY 模板语言的浏览器端的编译器实现 xtemplate/runtime
xtemplate/nodejs 在NodeJS端编译xtemplate模板 xtemplate
empty NodeJS 环境中使用的模块,清空内容
ua 浏览器特性检测,通过KISSY.UA来访问
uri URL 路径操作工具箱
path 路径拼合、相对路径等功能的实现
json 读写JSON格式
dom/base KISSY 对 DOM 操作的统一封装 ./base/api
./base/attr
./base/class
./base/create
./base/data
./base/insertion
./base/offset
./base/style
./base/selector
./base/traversal
event/base 基础事件模块 ./base/utils
./base/object
./base/observer
./base/observable
promise Promise 的 JS 实现,内置于Seed.js中,是最核心的模块之一
node/base node节点的api的统一封装 dom
event/dom
node/attach node节点挂载新特性的方法 dom
event/dom
./base
node/override 从dom模块中继承方法 dom
./base
./attach
node/anim node节点动画的实现 dom
anim
./base
dom/base/api DOM 操作 API 列表
dom/base/attr DOM 节点的属性操作 ./api
dom/base/class DOM 节点的类名的操作 ./api
dom/base/create 创建 DOM 节点 ./api
dom/base/data DOM 节点挂在数据对象 ./api
dom/base/insertion DOM 插入操作 ./api
dom/base/offset DOM 节点位置相关的操作 ./api
dom/base/style DOM 节点样式操作 ./api
dom/base/selector DOM 选择器的实现 ./api
dom/base/traversal DOM 节点的查找和遍历 ./api
event/dom/base/utils DOM 操作常见方法所依赖的工具函数 dom
event/dom/base/special DOM 节点的特殊方法的实现
event/dom/base/observer 同event/dom/base/special ./special
event/base
event/dom/base/object 事件门面对象的封装 event/base
event/dom/base/observable DOM 事件的观察者模式 dom
./special
./utils
./observer
./object
event/base
event/dom/base/dom-event DOM 事件的具体实现 event/base
./utils
dom
./special
./observable
./object
event/dom/base/key-codes DOM 事件实现:键盘事件
event/dom/base/gesture DOM 事件实现:手势事件
event/dom/base/special-events DOM 事件实现:特殊事件 ./dom-event
./special
event/dom/base/mouseenter DOM 事件实现:mouseenter事件 dom
./special
event/dom/base/valuechange DOM 事件实现:valuechange事件 ./dom-event
dom
./special
event/base/utils 基础事件模块所依赖的工具方法
event/base/object 事件门面对象
event/base/observer 不依赖于DOM的事件观察者模式:被观察者
event/base/observable 不依赖与DOM的事件观察者模式:观察者
anim/base/queue 动画队列 dom
anim/base/utils 动画基础实现 dom
./queue
anim/timer/easing 动画的缓动效果的JS实现
anim/timer/manager 动画时间程序管理
anim/timer/fx 动画特效种类的实现 dom
anim/timer/short-hand 调用动画的快捷方式
anim/timer/color 动画过程总的颜色过渡和变化的实现 dom
./fx
./short-hand
anim/timer/transform 动画transform的实现 dom
./fx

友荐云推荐
×