KISSY基础篇乄KISSY之HelloWorld

KISSY之HelloWorld

今日任务：使用kissy实现简单的hello World！

一、新建Kissy测试项目

         打开STS，File->StaticWeb Project，命名其Project Name即可，本教程命名为kissy，其他默认设置即可，点击Finish。在WebContent里创建css，js和img三个文件夹。之后新建的file中，将.html文件放在WebContent文件夹目录下，将.css文件放在css文件夹目录下，将.js文件放在js文件夹目录下，将图片文件放在img文件夹目录下。

二、引入kissy资源包

将Kissy的资源包拷贝到项目下，并在页面引用。若不适用Gallery组件，在项目应用中只需要将”build”文件夹拷贝到项目相应目录，引用其”seed-min.js”即可。、

三、编写Kissy简单实例—Hello World!

新建”day-2.html”作为测试页面，新建”day-2.js”作为Kissy文件，并在测试页面引入day-2.js文件。

实例一：

在day-2.js文件里加入如下代码：

KISSY.ready(function(S){

    alert('Hello World !');

});

右击“day-2.html”->OpenWith ->Web Browser，则显示：

这是KISSY外部代码的基本调用方式，为了保证代码执行时，依赖的DOM结构已经准备好，推荐尽可能的将代码写在通过ready注册的函数里。Ready注册的多个事件是放在一个list里面的，执行的时候，按照先进先出的原则执行。

实例二：

在day-2.html测试页面body里写入如下代码：

<div id="test1"></div>

在day-2.js文件里加入如下代码：

KISSY.use('dom',function(S,DOM){

    S.DOM.html("#test1","Hello World !");

});

页面显示：

这里使用了DOM 的html()方法。

实例三：

在dat-2.html测试页面body里写入如下代码：

<buttonid="click-me">显示内容</button>

<div id="test2" style="display: none;">Hello World ！</div>

在day-2.js文件里加入如下代码：

KISSY.use('node',function(S,Node){

    Node.one('#click-me').on('click',function(e){

        Node.one('#test2').show();

    });

});

点击“显示内容”前后，页面显示如下：

这里使用了Node模块的方法。