KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。
具备模块化、高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等特性。
在以下方面具有一定优势：
引入方式有两种：
引入完整的 KISSY 会直接加载全部的 KISSY 核心模块
包括 dom，event，node，base，ajax 等
如果你下载了源码，直接引入 kissy-min.js
<script src="kissy-min.js"></script>如果你没下载源码，可以引用淘宝 cdn 上的地址
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>KISSY 使用了类似 jQuery 的链式操作
只需定义
var $ = KISSY.all就可以进行如下操作
//Line 126: 获取图片列表元素
var imgList = $(‘.img-list‘).all(‘li‘);//Line 132: 所有图片元素移除‘active‘类名
this.imgList.removeClass(‘active‘);
//Line 133: 给第next个图片元素添加‘active‘类名
this.imgList.item(next).addClass(‘active‘);链式操作
//Line 151
var cloneItem = selectedItem.one(‘img‘)
.clone() //复制选中的元素
.appendTo(‘.content‘) //添加到容器最后
.css({
‘width‘: ‘100px‘,
‘height‘: ‘100px‘}) //设置样式
.animate({
‘top‘: 100
}, 0.2, ‘easeOut‘) //添加一个动画
.animate({
‘top‘: 200
‘left‘: 200
}, 1, ‘bounceOut‘, function(){
...
}) //另一个动画KISSY 中的事件绑定非常简单
通过一个 on 操作就能完成事件绑定
//Line 178
$(‘button‘).on(‘click‘, function(ev){
//do something
})KISSY 中对 Ajax 操作进行了一些封装，比如要发起一个 GET 请求
//Line 170
IO.get(‘./server.php‘, {‘index‘: index}, function(data){
$(‘.detail‘).html(‘<img src="‘ + data.url + ‘" />‘).fadeIn(0.5);
}, ‘json‘)上述参数分别代表请求地址，发送数据，回调函数，返回数据格式
介绍 seed 引入之前，先了解一下 KISSY 整体架构图
1、最底层的 seed 是类似目前流行的 AMD 模块化机制实现。
2、第二层是处理 dom 兼容性的核心模块，每个模块由更小的模块打包合并而来。
3、第三层为组件架构层。
4、第四层为独立可用的 KISSY 组件。
5、最外层为 KISSY gallery，KISSY 社区开发的一些通用模块。
通过 seed 的方式可以实现模块的按需加载
引入 seed 也有两种方式
<script src="seed-min.js"></script>或者
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script>首先需要新建一个模块
KISSY.add(function(S, N, E, A, IO){
var $ = S.all;
var opLotto = {
init: function(){
...
},
...
}
return opLotto;
}, {requires: [‘node‘, ‘event‘, ‘anim‘, ‘ajax‘]});模块其实就是一个对象，模块名可以忽略，我们会返回这个对象以便在使用模块时方便调用，最后是依赖配置
我们把这个模块保存为 opLotto.js，放在同目录的 module 文件夹下
在加载模块前，我们需要在主页面中对 KISSY 进行一下包配置
KISSY.config({
packages: [
{
name: "module",
tag: "20130618",
path: "./",
charset: "gbk"
}
]
});在这段代码中我们指定了包的路径，包名，时间戳和编码
然后我们就可以这样来使用模块了
KISSY.use(‘module/opLotto, node, event‘, function(S, OP, N, E){
S.ready(function(S){
var $ = S.all;
OP.init();
...
});
})KISSY 内置了很多有用的组件
比如 button，calendar，datalazyload，overlay，switchable
这些组件的用法非常简单，比如要用到 button 组件，只需要：
KISSY.use("button", function(S, Button) {
var btn = new Button({
content: "我是按钮1",
render: "#button_container",
tooltip: "hover时显示"
});
btn.render();
})gallery 是社区贡献的组件集合，汇集了各种各样的功能
比如 kcharts，imgcrop，waterfallx，slide，uploader
gallery 鼓励分享，任何人都可以为 gallery 提交自己的组件
在 KISSY 1.3.0 中内置了 gallery package，使用 gallery 组件非常方便
KISSY.use(‘gallery/offline/1.0/index‘, function (S, Offline) {
var offline = new Offline();
...
})KISSY Module Compiler 使用说明
是一个模块依赖自动抽取合并工具，结合 KISSY Loader，在模块代码部署阶段，可以将多个模块根据其依赖合并为一个文件，减少 HTTP 链接数
或者通过在 KISSY.config 中设置开启自动 combo 模式减少链接数
淘宝自己的前端框架KISSY(类似jquery) - 简易指南,布布扣,bubuko.com
淘宝自己的前端框架KISSY(类似jquery) - 简易指南
原文地址：http://www.cnblogs.com/YingYue/p/3838159.html
Disqus seems to be taking longer than usual. Reload?