kissy初体验（一）

简介：

如果你是个前端爱好者，并且热衷于看别人的源代码，您肯定会知道kissy。它是鼎鼎大名的淘宝的前端类库, 几乎在淘宝的每个页面上都能看到它的身影!它遵循的原则是小巧灵活、简洁实用、愉悦编码、快乐开发。如果你懂点jquery 或者Yui3，那更能快速入门了。

官网：http://docs.kissyui.com/

废话不多说，我们来做个例子体验下：

第一，下载kissy压缩包，现在版本已经到了1.3.0

https://github.com/kissyteam/kissy/archive/1.3.0.zip

第二，引入js文件

解压缩后，我们可以看到有很多文件。

两种方式引入：

1、引入build的kissy.js或者压缩的kissy-min.js

<script src="kissy-1.3.0/kissy-1.3.0/build/kissy-min.js" type="text/javascript"></script>

2、引入seed.js或者压缩的seed-min.js。这个只包含核心，并且引入了loader可以按需加载，大小也比较小。这个很多库都有，比如extjs，easyui等。

<script src="kissy-1.3.0/kissy-1.3.0/build/seed-min.js" type="text/javascript"></script>    //按需加载

第三，编写代码

<script type="text/javascript">

KISSY.ready(function(S){

var Welcome = "Welcome to Web技术分享！";
alert(Welcome);
});

 

(function (S) {
var Welcome = "Welcome to Web技术分享！";
alert(Welcome);
})(KISSY);

KISSY.use('dom', function (S) {
var Welcome = "Welcome to Web技术分享！";
S.DOM.html('body', Welcome);
});

(function (S) {
var Welcome = "Welcome to Web技术分享l！";
S.use('dom', function () {
S.DOM.html('body', Welcome);
});
})(KISSY);

(function (S) {
var Welcome = "Welcome to Web技术分享l！";
S.use('dom', function (S,DOM) {
DOM.html('body', Welcome);
});
})(KISSY);

</script>

前面两段代码，其实跟jquery的一样，这里的KISSY就相当于$符号。这里采用了闭包，创建个匿名函数，然后，给匿名函数传参，在闭包内就可以使用S来代替Kissy了。这样可以有效地避免跟其他类库的冲突，并且看起来简洁有效。

后面三段代码，主要看use方法，它是loader里面的，就是按需加载。比如这边我加载了dom模块 ，可以对dom进行操作。你也可以直接引入core，

如：Kissy.use('core',function(){

});

core包含了dom操作、事件处理、动画、ajax等等。我们可以按需加载了。

如下是官方的一个例子 ：

KISSY.use('dom,event,anim',function(S,DOM,Event,Anim){
      var btn = DOM.get('#demo-btn');//获取按钮 相当于jquery的$("#demo-btn")
      Event.on(btn, 'click', function() { //单击事件，相当于jquery的$("#demo-btn").bind("click",function(){});等
      DOM.attr(btn, 'disabled', true); //设置属性，相当于jquery的$("#demo-btn").attr('disabled',true);or $("#demo-btn").prop('disabled',true);
      new Anim('#demo-img', 'left: 400px; opacity: 0', 2, 'easeOut', 
          function() { 
                new Anim('#demo-txt', 'left: 0; opacity: 1; fontSize: 28px', 2, 'bounceOut').run(); 
          }).run(); 
      });//动画效果。
});

效果