二十五、HTML5单页框架View.js介绍 - 视图布局

不需要 Npm 的单页应用框架：

View.js - http://view-js.com

---

布局方式

作为用户视觉的页面载体，每个视图都可能拥有自己独特的布局。
下图是移动端常见的布局结构：

其中，顶部标题栏和底部导航栏，以及可能存在的标签页栏，通常情况下是需要固定位置显示的。开发者一般采用绝对定位的方式将其固定。但在页面涉及用户输入的场景下，为避免弹出的虚拟键盘将底部导航 “顶上去” 的情况等，View.js 建议开发者使用脚本动态布局来实现位置固定的目的，亦即：

[可滚动正文] 的高度 = 布局空间的总高度 - [标题]的高度 - [底部导航] 的高度

其中，布局空间的高度基本上等同于浏览器正文区域的高度，例如：

var totalHeight = View.layout.getLayoutHeight();
var height = totalHeight - headerObj.offsetHeight;

bodyObj.style.height = height + "px";

布局动作

为简化开发者的开发工作，View.js按如下方式供开发者实现动态布局：

1. 开发者提供特定布局空间宽度和高度下的布局动作；
2. View.js自动检测布局环境的变化，做出是否需要重新布局的决定，并自动计算出布局空间的宽度和高度；
3. View.js使用计算得出的布局空间的宽度和高度调用开发者提供的布局动作，实现动态布局的目的

开发者可以通过API：

view.setLayoutAction({Function} action, {Boolean} [ifLayoutWhenLayoutChanges=true])

设定布局动作。如：

var viewId = "myView";
var view = View.ofId(viewId);

var headerObj = view.find("header");
var bodyObj = view.find(".body"),
	btnObj = view.find(".btn");

view.setLayoutAction(function(){
   
   
	var totalHeight = View.layout.getLayoutHeight();
	var h