kissy 开发中的代码组织&傻傻的打包工具

公告

1 debug 模式和线上环境
2 多个模块
3 傻傻的合并工具

1 debug 模式和线上环境

debug状态下，使用的是为压缩，未合并的代码，能非常方便的定位错误;线上代码呢combo和压缩过的。若能在两种模式间快速切换将提高工作效率。kissy在设计的时候就考虑到了这种切换，通过在url里加入ks-debug参数，表示debug状态，这时候use莫个模块的时候使用的是为压缩的代码，若url中没有ks-debug，则加载的是-min.js结尾的文件

比如目录结构是这样的：

├── mods
│   ├── main.js
│   ├── main-min.js
│   ├── mod-a.js
│   └── mod-b.js
└── test.html

test.html中的内容为：

<!doctype html>
<html>
  <head>
    <meta charset="gbk">
    <link rel="stylesheet" charset="utf-8" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset.css">
    <title>kissy module test</title>
  </head>
  <body>
    
    <script charset="utf-8" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
    <script type="text/javascript">
      //包信息配置
      KISSY.config({
      packages:[
        {name:'mods',path:'./',charset:'utf-8'}
      ]
      });
      
      KISSY.use('mods/main',function(S,Main){
        Main();
      });
    </script>
  </body>
</html>

main.js中的内容为

KISSY.add(function(){
  function Main(){
    console.log('Main');
  };
  return Main;
});

若你访问的是127.0.0.1/test.html?ks-debug，有debug参数 KISSSY.use('mods/main',function(){}) 就会去加载mods/main.js 若你访问的是127.0.0.1/test.html，比如生产环境 KISSSY.use('mods/main',function(){}) 就会去加载mods/main-min.js

2 多个模块

main.js还依赖别的模块mod-a.js

KISSY.add(function(){
  function Main(){
    console.log('Main');
  };
  return Main;
},{requires:['./mod-a']});

在debug模式下，加载完main.js后,还会去加载mod-a.js。注意上面的语法{require:['./mod-a']}js模块名可以省略后缀若非ks-debug模式，加载完main-min.js后,还会去加载mod-a-min.js 可以看出debug模式下加载了未压缩的文件，利于调试，但是u若是在生产环境中会增加http请求

解决方法是什么呢？可以合并文件。

mod-a.js中的内容为

KISSY.add(function(){
  return function(){
    alert('mod-a');
  }
});

若将mod-a.js和main.js合并后成main-min.js，看起来是这样的

KISSY.add("mods/mod-a",function(){
  return function(){
    alert('mod-a');
  }
});

;KISSY.add("mods/main",function(){
  function Main(){
    console.log('Main');
  };
  return Main;
},{requires:['./mod-a']});

由于一个页面中只能定义一个KISSY.add(function(){}),这样的模块，合并后多个模块在一个文件中，需要有个名字区分,一般以路径名做模块名这样做的好处就是，url加了ks-debug，访问就会异步分别载入main.js mod-a.js。若没有加就载入合并后的main-min.js,只有一个链接。实际使用时还应该压缩。

但是上面的合并过程需要一个工具来完成

3 傻傻的合并工具

需要安装nodejs的环境 silly-builder @github 傻傻的合并非常适合用来做页面级别的打包，一个页面只有一个主入口main.js，最终的文件都合并到这个文件

Author: tom

Date: 2012-09-02 22:37:10 CST

HTML generated by org-mode 6.33x in emacs 23

posted on 2012-09-02 22:37 wewe.Tom 阅读(528) 评论(0) 编辑收藏举报

刷新页面返回顶部

Table of Contents

1 debug 模式和线上环境

2 多个模块

3 傻傻的合并工具