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(); 
      });//动画效果。
});

效果

你可能感兴趣的:(kissy)