淘宝自己的前端框架KISSY(类似jquery) - 简易指南
KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。
具备模块化、高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等特性。
在以下方面具有一定优势：
- A、拥有大量的中文文档；
- B、在国内具备一定的社区规模；
- C、开发便捷；
- D、综合借鉴国际先进的框架类库设计；
- E、应用场景广泛。
下载引入
引入方式有两种：
- 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 整体架构图
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 模式减少链接数
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
Disqus seems to be taking longer than usual. Reload?