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