基于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