KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。

具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。

在以下方面具有一定优势:

  • A、拥有大量的中文文档;
  • B、在国内具备一定的社区规模;
  • C、开发便捷;
  • D、综合借鉴国际先进的框架类库设计;
  • E、应用场景广泛。

下载引入

KISSY 1.3.0

KISSY seed 1.3.0

引入方式有两种:

  • 1、核心全部加载引入完整的 KISSY
  • 2、按需加载模块引入 seed

引入完整的 KISSY

引入完整的 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
})

Ajax

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 整体架构图

淘宝自己的前端框架KISSY(类似jquery) - 简易指南-LMLPHP

1、最底层的 seed 是类似目前流行的 AMD 模块化机制实现。

2、第二层是处理 dom 兼容性的核心模块,每个模块由更小的模块打包合并而来。

3、第三层为组件架构层。

4、第四层为独立可用的 KISSY 组件。

5、最外层为 KISSY gallery,KISSY 社区开发的一些通用模块。

引入 seed

通过 seed 的方式可以实现模块的按需加载

引入 seed 也有两种方式

<script src="seed-min.js"></script>

或者

<script src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script>

loader

首先需要新建一个模块

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();
...
});
})

component

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

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 模式减少链接数

关于

讨论旺旺群:29676575

google group:kissy-ui

邮箱:[email protected]

项目主页:github - kissy

 
 

Disqus seems to be taking longer than usual. Reload?

05-06 16:17