KISSY入门篇

文章目录
  1. 1. WHAT IS KISSY ?
  2. 2. 引入KISSY
  3. 3. hello world
  4. 4. 源码分享
  5. 5. 书签

WHAT IS KISSY ?

KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等,它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY 为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。

引入KISSY

1、引入线上kissy。

1
<script src="http://g.alicdn.com/kissy/k/1.4.7/seed.js"></script>

2、引入本地kissy。

1
<script src="./lib/kissy-1.3.2/build/seed.js"></script>

hello world

1、启动:Hello World!

1
2
3
KISSY.ready(function(S){
alert('Hello World!');
});

2、DOM操作:获取一个className叫continue的button,并将它的内容改为”Hello Kissy”。

1
2
3
KISSY.use('node',function(S,Node){
Node.one('button.continue').html('Hello Kissy!');
});

3、事件处理:点击一个id为click-me的button,显示#banner-msg的内容。

1
2
3
4
5
KISSY.use('node',function(S,Node){
Node.one('#click-me').on('click',function(e){
Node.one('#banner-msg').show();
});
});

4、Ajax:请求本地数据/data/ajax-data.json,带入参数zipcode,将结果显示在#weather-con中。

1
2
3
4
5
6
7
8
9
10
11
KISSY.use('io,node',function(S,io,Node){
io({
url:'./data/ajax-data.json',
data:{
zipcode:10010
},
success:function(data){
Node.one('#weather-con').html('<em>' + data.weather + '</em> 摄氏度');
}
});
});

源码分享

https://github.com/voidking/kissy-start.git

书签

KISSY - A Powerful JavaScript Framework
http://docs.kissyui.com/

KISSY项目地址
https://github.com/kissyteam/kissy

KISSY 指导手册
http://docs.kissyui.com/1.4/docs/html/guideline/get-started.html

jQuery - KISSY Rosetta Stone
http://cyj.me/jquery-kissy-rosetta/

KISSY 模块定义规范(KMD)
http://docs.kissyui.com/1.4/docs/html/guideline/kmd.html