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

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.likecs.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 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 })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgpgx.html