Contenu connexe Similaire à Dive into kissy (20) Dive into kissy4. WhyKISSY?
• YUI 的bug解决不及时,开发周期长
• jQuery 在 OO 上的缺陷
• Mootools 存在全局污染隐患
• ExtJs 体积庞大,高PV页面的性能缺陷
• …
9. • 模块化设计
• 沙箱
• 颗粒化
• 动态加载
15. 可引用的内置模块
模块名称 备注
core lang/dom/event…核心模块
sizzle 选择器引擎
datalazyload 延迟加载
flash flash
switchable Tab切换/轮播/旋转木马…
suggest 自动提示
overlay 面板
imagezoom 图片放大镜控件
calendar 日历控件
16. //添加外部模块
KISSY.add({
name: ‘calendar’,
path: ‘calendar-pkg-min.js’,
requires: [‘core’]
});
//程序启动
KISSY.use(‘calendar’, function(S) {
new S.Calendar(‘#id’);
});
19. 前端页面组成
Module
Module Module
Module Module
PageLogic
Apps
KISSY
23. 核心的组成
功能名称 备注
ua 浏览器嗅探
dom/event Dom/Event
node 对Dom/Event的高级封装
ajax Ajax
cookie Cookie
json Json
anim 动画
attribute 属性操作
base Kissy基类
25. 更多浏览器外壳的嗅探
S.UA.外壳 注释
S.UA.se360 360“安全”浏览器
S.UA.maxthon 傲游
S.UA.tt 腾讯浏览器
S.UA.theworld 世界之窗
S.UA.sougou 搜狗浏览器
31. 获取 Node/NodeList 的节点
KISSY.use(‘core’, function(S) {
/* 获取一个节点 */
var node = S.one(‘.className’);
/* 获取多个节点 */
var nodelist = S.all(‘.className’);
//获取 DOMElement
alert(node[0].nodeType);
alert(nodelist[0].nodeType);
});
33. 绑定事件
KISSY.use(‘core’, function(S) {
var nodelist = S.all(‘.className’);
nodelist.on(‘click’,function (e){
//e: 事件对象
//e.target: 事件发生所在的node
//this: nodelist 对象
e.preventDefault(); //阻止事件
});
});
34. Node/NodeList 常用方法
hasClass addClass removeClass
toggleClass attr text val css width
height offset parent remove
next prev children contains
append appendTo on detach
http://kissyteam.github.com/kissy/docs/node/index.html