***********************************************************************************
一、项目结构:
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
***********************************************************************************
四、视图嵌套结构：
***********************************************************************************
五、视图执行逻辑
- 视图启动
- 执行before函数
- 获取模板
- 翻译模板
- 绑定数据
- 注册视图事件
- 执行after函数
- 执行子视图启动函数
- 执行done函数
以上函数大部分都是通过异步方式执行
***********************************************************************************
六.、视图间事件通讯
各视图都是独立运行的，视图间通讯是通过事件来进行，每个视图发起的事件会在当前路由内所有的视图中广播，匹配的事件才执行
朱现国 2015/6/3