Dive into kissy
-
date post
12-Sep-2014 -
Category
Technology
-
view
3.093 -
download
11
description
Transcript of Dive into kissy
![Page 1: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/1.jpg)
DIVE INTO KISSY!KISSY�简介
![Page 3: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/3.jpg)
• An Enjoyable JavaScript Library
• 小巧灵活,简洁实用
• 使用起来让人感觉愉悦。
![Page 4: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/4.jpg)
• YUI 的bug解决不及时,开发周期长
• jQuery 在 OO 上的缺陷
• Mootools 存在全局污染隐患
• ExtJs 体积庞大,高PV页面的性能缺陷
• …
Why�KISSY?
![Page 7: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/7.jpg)
![Page 8: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/8.jpg)
![Page 9: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/9.jpg)
• 模块化设计
• 沙箱
• 颗粒化
• 动态加载
![Page 10: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/10.jpg)
Seed
![Page 11: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/11.jpg)
种子的引入
• 目前最新版本 1.1.6
• http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js
![Page 12: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/12.jpg)
KISSY.ready(function(S) {
});
从沙箱启动
Kissy 沙箱
![Page 13: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/13.jpg)
KISSY.use(‘core’, function(S) {/* sandbox */
});
引入内置模块
![Page 14: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/14.jpg)
KISSY.use(‘core,sizzle’, function(S) {
/* core 在种子里 *//* sizzle 在 sizzle.js中,动态加载 */
});
引入多模块
![Page 15: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/15.jpg)
可引用的内置模块模块名称 备注
core lang/dom/event…�核心模块sizzle 选择器引擎
datalazyload 延迟加载flash flash
switchable Tab切换/轮播/旋转木马…suggest 自动提示overlay 面板
imagezoom 图片放大镜控件calendar 日历控件
![Page 16: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/16.jpg)
//添加外部模块
KISSY.add({name: ‘calendar’,path: ‘calendar-pkg-min.js’,requires: [‘core’]
});
//程序启动
KISSY.use(‘calendar’, function(S) {new S.Calendar(‘#id’);
});
![Page 17: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/17.jpg)
让代码解耦
KISSY.add(‘my-mod’, function(S) {
/* 子逻辑 */}).ready(function(S){
/* 主逻辑 */});
![Page 18: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/18.jpg)
互不干扰?!
KISSY.use(‘core’, function(S) {
/* 张三的代码 */});…KISSY.ready(function(S){
/* 李四的代码 */});
![Page 19: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/19.jpg)
KISSY
PageLogic
Apps
Module
ModuleModule
Module Module
前端页面组成
![Page 20: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/20.jpg)
//创建一个KISSY实例’TShop’KISSY.app(‘TShop’);
//给这个实例添加模块
TShop.add(‘mod’, function (TS){ });
//从沙箱启动
TShop.use(‘mod’, function (TS){ });
创建“应用”
![Page 21: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/21.jpg)
Core
![Page 22: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/22.jpg)
Seed
Core
kissy-min.js
![Page 23: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/23.jpg)
核心的组成功能名称 备注
ua 浏览器嗅探dom/event Dom/Event
node 对Dom/Event的高级封装ajax Ajax
cookie Cookiejson Jsonanim 动画
attribute 属性操作base Kissy基类
![Page 24: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/24.jpg)
KISSY.ready(function (S){
//S.UA存储当前浏览器相关属性
S.log(S.UA);});
浏览器嗅探
![Page 25: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/25.jpg)
S.UA.外壳 注释S.UA.se360 360“安全”浏览器
S.UA.maxthon 傲游S.UA.tt 腾讯浏览器
S.UA.theworld 世界之窗S.UA.sougou 搜狗浏览器
更多浏览器外壳的嗅探
![Page 26: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/26.jpg)
KISSY.use(‘core’, function(S) {
/* 获取一个节点 */var node = S.one(‘.className’);
/* 获取多个节点 */var nodelist = S.all(‘.className’);
});
Node�节点操作
![Page 27: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/27.jpg)
Dom�节点操作
KISSY.use(‘core’, function(S) {
var elem = S.get(‘#id’); //裸节点
S.DOM.css(elem,’color’,’red’);S.DOM.text(elem,’hello,kissy!’);
});
![Page 28: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/28.jpg)
#idtag.cls#id tag#id .clstag.cls#id tag.cls
KISSY默认仅支持这些选择器
![Page 29: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/29.jpg)
更多选择器需载入sizzle
KISSY.use(‘core,sizzle’, function(S) {
/* 启动程序 */});
![Page 30: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/30.jpg)
KISSY.use(‘core’, function(S) {
/* 链式调用 */S.one('#test').parent()
.next()
.html('<p>new paragraph</p>')
.appendTo('#test2')
.on('click', function(ev) { alert(this.text());
});});
Node�常用操作
![Page 31: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/31.jpg)
KISSY.use(‘core’, function(S) {
/* 获取一个节点 */var node = S.one(‘.className’);
/* 获取多个节点 */var nodelist = S.all(‘.className’);
//获取 DOMElementalert(node[0].nodeType); alert(nodelist[0].nodeType);
});
获取 Node/NodeList 的节点
![Page 32: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/32.jpg)
KISSY.use(‘core’, function(S) {var nodelist = S.all(‘.className’);
//获取 NodeList 节点个数
alert(nodelist.length);
//遍历 NodeListnodelist.each(function(node,i){
//node:当前遍历到的节点
//i:索引
});});
遍历 NodeList
![Page 33: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/33.jpg)
绑定事件
KISSY.use(‘core’, function(S) {var nodelist = S.all(‘.className’);nodelist.on(‘click’,function (e){
//e: 事件对象
//e.target: 事件发生所在的node//this: nodelist 对象
e.preventDefault(); //阻止事件
});});
![Page 34: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/34.jpg)
hasClass addClass removeClasstoggleClass attr text val css width height offset parent removenext prev children contains append appendTo on detach
Node/NodeList 常用方法
http://kissyteam.github.com/kissy/docs/node/index.html
![Page 35: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/35.jpg)
Cookie
KISSY.use(‘core’, function(S) {
//读cookieS.Cookie.get(‘key’);
//写cookieS.Cookie.set(‘key’,’value’);
});
![Page 36: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/36.jpg)
Ajax
KISSY.use(‘core’, function(S) {S.IO.get(‘url’,function(data){
//get callback exec here});S.IO.post(‘url’,function(data){
//post callback exec here});
});
![Page 37: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/37.jpg)
JSON
KISSY.use(‘core’, function(S) {
//从object转换为字符串
var str = S.JSON.stringify({a:1
});
//从字符串转换为objectvar obj = S.JSON.parse('{"a":1}');
});
![Page 38: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/38.jpg)
Utilities
![Page 39: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/39.jpg)
![Page 40: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/40.jpg)
默认仅支持最常用的 #id tag.class
想使用更多 CSS 选择器时,需要额外加载Sizzle 模块
Sizzle 模块可换用其它 CSS 选择器
Selector
![Page 41: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/41.jpg)
Widgets
![Page 42: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/42.jpg)
![Page 43: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/43.jpg)
开发方式与社区
![Page 44: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/44.jpg)
http://kissyteam.github.com/kissy/docs/index.html
Docs
![Page 46: Dive into kissy](https://reader034.fdocuments.net/reader034/viewer/2022050801/5413070e8d7f72314e8b47a8/html5/thumbnails/46.jpg)