基于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
***********************************************************************************
四、视图嵌套结构:
***********************************************************************************
五、视图执行逻辑
- 视图启动
- 执行before函数
- 获取模板
- 翻译模板
- 绑定数据
- 注册视图事件
- 执行after函数
- 执行子视图启动函数
- 执行done函数
以上函数大部分都是通过异步方式执行
***********************************************************************************
六.、视图间事件通讯
各视图都是独立运行的,视图间通讯是通过事件来进行,每个视图发起的事件会在当前路由内所有的视图中广播,匹配的事件才执行
朱现国 2015/6/3
基于require+knockout的webapp结构设计的更多相关文章
- 学习 | 基于require.js的三级联动菜单【入门】
主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加 ...
- 基于vue移动音乐webapp跨域请求失败的问题解决
在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位 ...
- 基于SpringBoot+SSM实现的Dota2资料库智能管理平台
Dota2资料库智能管理平台的设计与实现 摘 要 当今社会,游戏产业蓬勃发展,如PC端的绝地求生.坦克世界.英雄联盟,再到移动端的王者荣耀.荒野行动的火爆.都离不开科学的游戏管理系统,游戏管理系 ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
- 下载PHPDroid: 基于WebView和PHP内置HTTP服务器开发Android应用
基于Android上的PHP(比如我打包的PHPDroid),寥寥几行PHP代码,就能实现一个支持无线局域网用浏览器访问的Android手机的Shell,用于执行命令和PHP代码. 个人在 ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
随机推荐
- 安装prometheus+grafana监控mysql redis kubernetes等
1.prometheus安装 wget https://github.com/prometheus/prometheus/releases/download/v1.5.2/prometheus-1.5 ...
- JavaScript对象原型写法区别
体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...
- 百度api的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Java Applet实现五子棋游戏
从谷歌的AlphaGo到腾讯的绝艺,从人脸识别到无人驾驶,从谷歌眼镜到VR的兴起,人工智能领域在不断的向前迈进,也在不断深入的探索.但背后错综复杂的技术和利益成本也是很多企业亟待解决的难题.对于人工智 ...
- AspectJ基本用法
参考:深入理解Android之AOP AOP虽然是方法论,但就好像OOP中的Java一样,一些先行者也开发了一套语言来支持AOP.目前用得比较火的就是AspectJ了,它是一种几乎和Java完全一样的 ...
- 老李推荐: 第8章4节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 4
这一部分的代码逻辑关系是这样的: 344行: 一个外部循环每次从上次保存下来的设备列表获得一个设备Device实例 350行: 再在一个内部循环从最新的设备列表中获得一个设备Device实例 353行 ...
- (iOS)开发中收集的小方法
1.颜色转变成图片 - (UIImage *)createImageWithColor:(UIColor *)color { CGRect rect = CGRectMake(0.0f, 0. ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- How To Use ggplot2
0. Preparation and Introduction ggplot2是R中新颖的数据可视化包,这得益于Leland Wilkinson在他的著作<The Grammar of Grap ...
- 从零开始用 Flask 搭建一个网站(二)
从零开始用 Flask 搭建一个网站(一) 介绍了如何搭建 Python 环境,以及 Flask 应用基本项目结构.我们要搭建的网站是管理第三方集成的控制台,类似于 Slack. 本篇主要讲解数据如何 ...