【kissy1.1.6入门】01:如何开始写kissy?

淘宝店铺的sdk模板已经准备js内测了,看来淘宝全新店铺的时代已经来临了。这意味着店铺模板已经不再是单纯的依靠美工了,因为有了js功能,能做到很多令人愉悦的交互与体验。既然是淘宝店铺开放js功能,当然淘宝官方的js库——kissy更是需要好好掌握一下的。

 

就目前看来,店铺支持的是kissy1.1.6这个版本,上网搜索了些资料,终于开始了我的kissy之旅啦。今天学会的是——如何开始写kissy?当然还是以受广大编程爱好者的“Hello, World!”为例子比较好。代码如下:

1 (function(S) {
2     alert('Hello, World!');
3 })(KISSY);

 

代码解释:

第1行:创建一个自执行函数,以KISSY为参数。(function(S) {....})(KISSY);  

第2行:弹出对话框,内容为“Hello, World!”。

代码第1行中的S是一个KISSY对象的引用,从第2行开始,需要调用KISSY时,只需使用变量S即可。

 

在淘宝店铺上,默认引用了有kissy1.1.6这个版,代码如下:

<script src="http://a.tbcdn.cn/??s/kissy/1.1.6/seed-min.js,p/shop/1.0/shop-min.js?t=2012072420120711.js"></script>

 

上行代码中引用到的see-min.js其实仅仅包含了kissy1.1.6中的基本核心,如果需要对事件、DOM进行一些操控,一般需要这样写你的开始代码:

(function(S) {
    S.use('core', function() {
        var dom = S.DOM,  event = S.Event;
        //to do something...
    });
})(KISSY);


S.use('core', function() {});  表示引用KISSY的core核心,该核心包含了 ua   dom   event  node  json  ajax  cookie   base模块(我是这么理解的,不知道对不对)。 只有引用了core核心之后,我们才可以使用这些功能的。

 

顺便表达一下我自己的理解:kissy1.1.6主要由3个核心组成,分别是:

Seed:KISSY的基础核心;

Core:由ua  dom  event  node   json  ajax  cookie  base这些模块组成;每个模块分别实现不同功能;

Cmponents:组件核心。特别需要介绍一下的是switchable组件,做店铺模板开发时,这个组件可有需要经常性的用到。

 

 

--------------2012.08.13分割线-----------------------

可是今天将JS代码写入模块的module.js中时,却发现  S.use() 这个功能用不上。导致无法引入更多的模块功能……

现在只能使用kissy的dom 与 event,下面是一个范例:

(function() {
    var dom = KISSY.DOM,  event = KISSY.Event;
    event.add('.test', 'click', function() {
        dom.text('.test', 'hello, you clicked me!');
    });
})();

稍微变换的地方是:(function() {})(); 自执行函数中不再引用KISSY。

为什么把代码写到一个自执行函数内呢?这个是为了防止多个模块内的变量名冲突,我想淘宝应该会考虑到这个冲突的问题,但我还是习惯这样写。

posted @ 2012-08-05 10:25  __苦力  阅读(714)  评论(0编辑  收藏  举报