云收单怎么注册:项目开发指南 — KISSY Docs valpha documentation

1. 项目简介?

这是一个hello-world项目，仅由一个页面组成，页面中有一个居中的按钮，每次点击，就会弹出一个alert框，如下图所示：

这个演示如此简单，以至于我们可以只在一个html页面里干完所有的事情。

我们并不是想告诉大家如何用复杂的方式去做简单的事情，而是试图剥离代码的复杂性，让你把注意力集中在项目的开发过程上。

请下载本示例的 源代码 ，打开 hello-world-demo > hello-world.html 查看效果。

2. 目录组织?

首先按照下图所示，创建该项目的目录结构

这些目录的用途如下：

• lib - 用于存放外部类库。
• hello-world - 用于存放该项目的组件。
• hello-world-dpl - 用于存放该项目的设计模式库(dpl)代码。
• hello-world-demo - 用于存放该项目的demo文件。
• readme.html - 用于记录项目的基本信息，如项目介绍，关键页面链接等。也可使用txt文件。

3. 引入外部库依赖?

这里向lib文件夹添加了 kissy.js 和kissy-dpl reset.css 两个文件。

在正式的项目中，引入完整的类库件会更好。

4. 编写项目组件?

该项目中，我们需要一个组件来弹出alert框，并记录弹出次数。

我们把这个组件功能就叫做dialog。

在hello-world文件夹中新建了一个dialog.js文件，代码如下：

KISSY.add("hello-world/dialog",function(S){    //构造器    function Dialog(){        this.amount = 0;    }    //方法    S.augment(Dialog,{        say:function(){            this.amount++;            alert('hello world said ' + this.amount + ' times !');        }    });    return Dialog;});

这个组件十分简单，仅有一个say方法。

显然，在正式的项目中，你的代码会更复杂，并且需要更好的文件组织，这是你可以参见kissy的 组件开发指南 。

5. 编写项目dpl?

在正式编码之前，我们常常需要抽象出一个项目页面中共同的视觉元素，如盒子、进度条等。

该项目假设设计师希望所有的button都是150px宽，40px高。故而在hello-world-dpl文件夹中新建了一个button.css文件。

内容如下：

/****************************************************************** * @fileOverview “如何使用KISSY开发一个项目”范例代码 *               本文件设置了按钮的统一样式 * @author chenyu@taobao.com ******************************************************************/.button{width:150px;height:40px;font:28px bold "微软雅黑";}

上述文件虽然只有一行css语句，却足以说明dpl的用途。

养成良好的注释习惯会让你和他人都收益不少（为了让教程更简洁，以下范例代码都将省略注释）。

同样，在正式的项目中，你的dpl代码需要编写的更规范，可参见kissy-dpl的代码。

6. 编写项目demo?

在有了组件和dpl之后，我们就可以进入正式的demo开发工作。

6.1 编写html?

在hello-world-demo文件夹中加入hello-world.html文件，代码如下：

    Click Me

6.2 插入页面级css?

在hello-world-demo > css文件夹中加入hello-world.css文件，代码如下：

.button{position:fixed;top:50%;left:50%;margin:-20px 0 0 -75px;}

6.3 插入页面级js?

在hello-world-demo > js文件夹中加入hello-world.js文件，代码如下：

//包配置KISSY.config({    packages:[        {            name:"hello-world",            path:"../"        }    ]});//模块调用KISSY.use("hello-world/dialog",function(S, Dialog){    var dialog = new Dialog();    S.Event.on('#J_Button','click',function(e){        dialog.say();    }); })

注意：这个js文件分两大块内容，第一部分是包配置文件，第二部分是调用脚本。

如果项目中多个页面都需要相同的配置，或者全局定义，可单独抽离出一个config.js文件。

关于包配置更多的内容请参见kissy的 loader 模块。

6.3 图片?

hello-world-demo > img 文件夹用于存放项目中用到的各种图片(虽然这个项目没有使用任何图片)。

7. 编写readme?

为你的项目创建一个readme文件是个不错的习惯，它既可以让你的工作变得更有条理，也能让别人快速了解你的项目。

该项目的readme最终效果如下图所示：

8. 其他?

至此，我们的代码开发工作已经告一段路。

但我们还可以使用ant等工具来帮助我们进行代码合并、压缩等工作。

更多开发辅助工具参见kissy的前端常用工具。