QuickPage - （整个应用的快速打包概念）

yacheng commented 11 years ago

隐若整理的QuickPage（高位包配置）的方案比较倾向于SafePage和QuickPage之间的一个过度版本。兼顾了安全性但无法满足某些已有业务需求，举几个栗子：

页面非常多的时候模具结构就会很乱，如果加上页面版本的概念，维护就是一个很大的问题
utils的脚本公用问题，我这边主要是以组建为维度来划分需求，公用组件不是都会被外部使用，utils里更应该放能外用的组件，不建议放本应用的共用组件（只放公用层级最广的组件）
release的管理，不太适合划分某页面的不同版本，如要划分，建议用SafePage
config的管理，由于是自动化生成，在日期目录下可以很好的实现版本控制，隐若的方式将时间目录包含到use的模块目录里，感觉会有一定的约束
高位包配置，全应用快速打包使用场景

QuickPage适用于下列场景：

需求的中心不是页面而是模块
页面数量较多
整个应用一次打包，每次打包到一个日期目录下
配置文件的自动生成
公用包utils的可单独打包

下面是说明

yacheng commented 11 years ago

简介

这套目录侧重点是整个应用部署的快捷，业务重点不在页面而是模块，页面是由多个模块组成所以整个应用打包可以避免很多麻烦。这套目录没有过多考虑升级的安全性，安全性的保证主要是通过daily和预发环境的测试来保证。


app // 应用根目录
    ├ abc.json
    ├ map.json
    ├ inits  // 所有的页面入口文件
        ├ page1.js // 多页面在这里
        ├ page2.js
        ├ page3.js
        ...
    ├ mods // 所有的模块文件，这里面是随便组织的
        ├ mods1.js
        ├ mods2.js
        ...
    ├ util // 可外用的共用组建  
        ├ mods3.js
        ├ mods4.js
        ...  
    ├ release
        ├ 20130109
            ├ config.js
            ├ app
                ├ inits

目录说明

inits目录：页面的入口js和入口css，一次打包的入口
mods目录：这个目录不在约束范围内，目录名字和结构取决于inits目录中文件的requier
util目录：可外用的js脚本（这里可以提供一个给外不用的config.js）
release目录：里面全是日期文件夹或者版本文件夹

页面调用

<!-- 在head中引入包配置 -->
<script src="http://a.tbcdn.cn/apps/quickPage/release/20130109/config"></script>

<!-- … page body -->
<!-- 在页面底部，或者任何一个你想要异步进入包的位置 -->
<script>
KISSY.use( 'quickPage/inits/index' );
</script>

配置文件

config.js

位置：日期目录应用包配置 + 源码目录的切换 config.js文件是由打包工具自动生成，需要打包工具生成时能自定义生成文件的模板，如果没有自定义则使用默认的。模板如下：（为了用户能够方便修改，模版也可以放在map.js里进行定义）

(function() {
    var config_path = window.location.href.indexOf('daily.taobao.net') != -1 ? 'http://assets.daily.taobao.net/apps/{{appPath}}':'http://a.tbcdn.cn/apps/{{appPath}}';
    var version = '/app/{{releaseName}}/{{time}}';
    function ifDebug(){ return KISSY.Config.debug ? true : false ; }
    if(ifDebug()) version = '';
    KISSY.config({
        packages:[
          {name:'app',tag:'20130113',charset:'{{appCharset}}',path:config_path+version},
          {name:'gallery',path:config_path+'/app/plugins',charset:'{{galleryCharset}}'}
        ],
        map:[[/http:\/\/a.tbcdn.cn\/s\/kissy\/1.2.0\/(?:overlay|component|uibase)-min.js(.+)$/, 'http://a.tbcdn.cn/s/kissy/1.2.0/??overlay-min.js,component-min.js,uibase-min.js$1'], [/http:\/\/assets.daily.taobao.net\/s\/kissy\/1.2.0\/(?:overlay|component|uibase)-min.js(.+)$/, 'http://assets.daily.taobao.net/s/kissy/1.2.0/??overlay-min.js,component-min.js,uibase-min.js$1']]
    });
})();

生成后文件如下：

(function() {
    var config_path = window.location.href.indexOf('daily.taobao.net') != -1 ? 'http://assets.daily.taobao.net/apps/shop-street':'http://a.tbcdn.cn/apps/shop-street';
    var version = '/app/release/20130114';
    function ifDebug(){ return KISSY.Config.debug ? true : false ; }
    if(ifDebug()) version = '';
    KISSY.config({
        packages:[
          {name:'app',tag:'20130113',charset:'gbk',path:config_path+version},
          {name:'gallery',path:config_path+'/app/plugins',charset:'utf-8'}
        ],
        map:[[/http:\/\/a.tbcdn.cn\/s\/kissy\/1.2.0\/(?:overlay|component|uibase)-min.js(.+)$/, 'http://a.tbcdn.cn/s/kissy/1.2.0/??overlay-min.js,component-min.js,uibase-min.js$1'], [/http:\/\/assets.daily.taobao.net\/s\/kissy\/1.2.0\/(?:overlay|component|uibase)-min.js(.+)$/, 'http://assets.daily.taobao.net/s/kissy/1.2.0/??overlay-min.js,component-min.js,uibase-min.js$1']]
    });
})();

abc.js

位置：源码目录作用：打包规则，abc的工具入口文件略

map.js

位置：源码跟目录作用：基础设置和变量赋值略

使用

老应用的接入

配置应用根目录
配置应用的包、目录结构中的特殊文件夹名（比如release可以配成r）
创建目录结构的命令（如果已经存在文件夹就不创建）
应用接入完成

新应用的创建

配置应用根目录
创建目录结构的命令
应用接入完成

maxbbn commented 11 years ago

稍微修改了下格式

maxbbn commented 11 years ago

特点还是比较突出的，但名字感觉起的不好 QuickPage 不能够表达核心特点

yacheng commented 11 years ago

感觉不是page的概念，而是应用的概念，比如QuickApp

maxbbn commented 11 years ago

模块很重，页面多但是轻，我觉得是一个主要特点

maxbbn commented 11 years ago

为什么要把JS文件打包到JS目录呢？ CSS文件打包到CSS目录？和SRC里面的结构不一样了

yacheng commented 11 years ago

写错了，没区分js和css目录，有些还在本地整理，稍侯贴出来

abc-team / ABC