KISSY On The Way (1) - Module Pattern

KISSY模块

KISSY中提供了完备的模块化支持。接下来我们先从介绍如何编写一个简单的模块开始。在做所有的事情之前，你需要引用KISSY的seed文件（种子文件），它包含KISSY的核心功能。这个文件在淘宝CDN上，你可以直接使用。

<script src="http://g.tbcdn.cn/kissy/k/1.4.3/seed.js"></script>

编写简单的模块

你可以通过KISSY.add新增一个模块，并将它放在一个文件中。这里假设我们要添加一个登陆框UI组件的模块，这个模块的路径为ui/login-form.js。

// login-form.js
(function(S) {
    S.add(function(S, Node) {
        function LoginForm() {};
        // ... More code
        return LoginForm; 
    }, {
        requires: ['node']
    });
})(KISSY);

这里创建了一个匿名的模块。一般情况下，我们创建的模块都是匿名的。模块的名字一般就是该模块文件的相对路径去掉.js的扩展名。例如在这个例子中，我们的模块名称就是ui/login-form。

第一个参数就是我们的模块逻辑，在这里我们返回LoginForm类。这个类封装了我们模块的一些逻辑，比如渲染界面、事件处理等。

第二个参数定义一些跟这个模块有关的参数，这里我们通过requires配置选项来指定这个模块的依赖模块（dependencies），KISSY会为我们自动加载这些依赖模块。这里的node模块是KISSY内置的一个模块，主要用于DOM操作。文档

模块放哪里？

一般情况下，当你引用模块a/b/c的时候，KISSY会在http://g.tbcdn.cn/kissy/k/1.4.3/a/b/c.js找这个模块。其中，http://g.tbcdn.cn/kissy/k/1.4.3是一个基地址。你可以通过KISSY.config修改基地址。文档

KISSY.config({
    base: "http://localhost/scripts/" 
});

这样，如果加载模块ui/login-form，那么KISSY将会在http://localhost/scripts/ui/login-form.js找到这个模块。

使用模块

通过KISSY.use可以创建一个封闭的沙盒，你可以包含一些依赖的模块。比如，我要创建一个登录的页面，那么在这个页面上我们就需要引入ui/login-form这个模块。

(function(S) {
    S.use('login-form', function(S, LoginForm) {
        (new LoginForm()).render(...);
        // ... More code
    });
})(KISSY);

第一个参数指定所有的依赖模块的名字，并由半角逗号隔开。第二个参数是我们的匿名函数（沙盒），第一个参数传入的是KISSY对象自身，接下来是所有的依赖模块返回的对象。

如果你还记得，我们刚才编写的login-form模块返回了一个类LoginForm。因此，在这里，我们只需实例化这个类，并通过这个实例对象往页面上添加我们的登陆框（这里假设用了render方法来添加登陆框）。

Combo!

一般而言，一个页面上可能需要十多个模块。这十多个模块中，有的是你要的模块，有的是你要的模块的依赖模块，有的是依赖模块的依赖模块……

那么，如果让浏览器加载这么多的模块，必然会产生很多的HTTP请求。如果HTTP请求太多，将会严重拖慢页面的加载进度。

一般情况下，我们一般采取本地编译的方法。通过本地编译，将所有模块合并成一个文件，并根据文件的路径赋予每个模块名称。如果这样做，HTTP请求的数量就会大大减少。但是这个方法存在一个问题，就是会让人心情不好。

KISSY支持向服务器传送一串参数，代表请求的所有模块名，并由服务器来动态合并这些文件，并放到CDN（内容分发网络）上。要做到这一点，只需要在加载seed.js的时候，在script标签上加上data-config="{combine:true}"属性，KISSY就会自动切换成让服务器合并文件的方式了。

<script src="http://g.tbcdn.cn/kissy/k/1.4.3/seed.js" data-config="{combine:true}"></script>

这时候，如果你观察网络传输面板（Chrome中通过开发者工具可以打开），会看到你的页面只发出了一个到g.tbcdn.cn的请求。请求的URL是类似http://g.tbcdn.cn/kissy/k/1.4.3/??node.js,dom/base.js,event/dom/base.js的形式，后面的参数即需要合并的模块文件。

Combo是需要服务器端（或者CDN）支持的，实现一个支持Combo的简单服务器应用并不难，这里我们不再多阐述。如果你使用过Koa，那么你可以用它来做静态资源服务器。配合我所编写的一个中间件koa-combo，以及koa的cache中间件，就可以搭建一个支持combo的静态资源服务器。

包

有的时候，所有的模块并不在一个域名下面。回想一下，在常见的程序设计语言（如Java中），我们经常需要创建“命名空间”，或者说“包”。比如，在Java中，类A在包com.zihui.pkg1下，类B在包com.zihui.pkg2下，那么在引用类A的时候，我们需要使用它的包名+类名来访问它，即com.zihui.pkg1，引用类B时，我们使用com.zihui.pkg2来访问它。

KISSY中提供了类似的机制，也叫做包机制。假设我们有一个模块ui/login-form，基地址为http://g.tbcdn.cn/common。另一个模块ui/dynamic-nav，基地址为http://ju.tbcdn.cn/common。那么我们为这两个基地址定义两个包。

KISSY.config({
    packages:{
        "g": { base: 'http://g.tbcdn.cn/common/' },
        "ju": { base: 'http://ju.tbcdn.cn/common/' }
    }
});

那么我们就可以通过g/ui/login-form访问原来的ui/login-form模块，通过ju/ui/dynamic-nav访问原来的ui/dynamic-nav。

KISSY.config({
   packages: [
      {
          name: "pages",
          path: "http://g.tbcdn.cn/ju/jsp/1.0.27",
          charset: "utf-8",
          debug : true
      },
      {
          name: "mods",
          path: "http://g.tbcdn.cn/ju/jsp/1.0.27",
          charset: "utf-8",
          debug : true
      }
  ]
});

KISSY.ready(function (S) {
    S.use('pages/activity/index', function (S, Init) {
        new Init();
    });
});