基于require+knockout的webapp结构设计

***********************************************************************************

一、项目结构:

Webapp

----Audio:音频文件

----Build:压缩处理后的文件

----Css:css文件

----Font:字体文件

----Html:模板文件

----Image:图片文件

----Js:js文件

--------app

-----------dialog:对话框视图

-----------languages:语言词典

-----------helper:辅助工具子类

-----------model:业务模型

-----------layout:布局视图

-----------view:布局中子视图

main.js:app入口

lib:第三方js库

app.js:全局对象

二、代码结构:

***********************************************************************************

define(function (require) {

/*严格模式*/

'use strict'

    /*第三方库引用定义*/

    var lib = {

        ko: require('knockout'),

        $: require('jquery'),

}

/*工具函数引用定义*/;

    var helper = {

        view: require('app/helper/view'),

common: require('app/helper/common'),

};

/*数据模型引用定义*/

    var models = {

        System: require('app/Model/System'),

Token: require('app/Model/Token'),

};   

return function (obj) {

        var me = this;

        /*内部变量定义*/

        me = helper.view.extend(me, obj);

        me.templateUrl = 'share/html/view/xxxx.html';

        me.viewModel = {};

        me.events = {

            /*事件函数*/

        };

        me.methods = {

            /*公共函数*/

        };

        me.before = function (callback) {

            /*业务代码.....*/

            if (callback) callback();

        }

                   me.bind = function (callback) {

            /*业务代码.....*/

            if (callback) callback();

        }

        me.after = function (callback) {

            /*业务代码.....*/

            if (callback) callback();

        }

        me.done = function (callback) {

            /*业务代码.....*/

            if (callback) callback();

        }

    }

});

***********************************************************************************

三、加载顺序:

 

1.url改变触发window.onhashchange

2.根据hash在routes中找出匹配route

3.根据route找到相应LayoutView

4.启动LayoutView

***********************************************************************************

四、视图嵌套结构：

     

***********************************************************************************

五、视图执行逻辑

     

1. 视图启动
2. 执行before函数
3. 获取模板
4. 翻译模板
5. 绑定数据
6. 注册视图事件
7. 执行after函数
8. 执行子视图启动函数
9. 执行done函数

 

以上函数大部分都是通过异步方式执行

 

 

***********************************************************************************

六.、视图间事件通讯

各视图都是独立运行的，视图间通讯是通过事件来进行，每个视图发起的事件会在当前路由内所有的视图中广播，匹配的事件才执行

                                                                                                                              朱现国 2015/6/3