首页 > 代码库 > 淘宝自己的前端框架KISSY(类似jquery) - 简易指南

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

2024-07-11 16:43:51   222人阅读

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="http://www.mamicode.com/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 151var 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 170IO.get(‘./server.php‘, {‘index‘: index}, function(data){    $(‘.detail‘).html(‘<img src="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/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

邮箱：kissyteam@gmail.com

项目主页：github - kissy

 
<style></style>
 
Disqus seems to be taking longer than usual. Reload?






























        

            
                
                  
                
                

                    联系

                    我们