概述 首先，我们来了解一个什么是MVVM？ MVVM是Model-View-ViewModel的简写。首先，view是对viewmodel中数据的一个可视化的显示，view观察viewmodel，操作view时会发送命令到viewmodel，并且当viewmodel变化时更新；其次，viewmodel是model对外暴露的数据视图和操作。因此，view和model是不知道彼此存在的。 Knockoutjs是一个名正言顺的MVVM框架，通过简洁易读的data-bind语法，将DOM元素与viewmodel关联起来。当模型（viewmodel）状态更新时，自动更新UI界面（view）。viewmodel是model和view的桥梁，是一个纯粹的js对象。 WeX5是基于Knockoutjs实现MVVM模式的，我们来看看，在WeX5中，如何与MVVM对应： 如上图所示，MVVM在WeX5中分别如下： ● view（V）：.w文件，包含布局组件、显示组件和编辑组件等各种展现组件，构成用户交互界面；它通过“bind-”绑定表达式与数据和界面逻辑进行关联； ● viewmodel（VM）：.js文件和Data，表示页面数据模型和界面逻辑；其中Data是.w页面中的Data组件，在Data组件上可以定义数据规则表达式； ● model（M）：服务端（Baas）,表示后台数据模型和操作； 数据绑定 WeX5在数据和view上，都提供了大量可通过表达式定义的动态属性。当表达式依赖的数据项改变时，表达式会自动重新计算，从而更展现的显示和行为。我们把页面上的这种由数据驱动界面动态交互的能力称之为“数据绑定”。 在数据和view两个层面，表达式属性的作用有所不同，我们把表达式分为两类： ● 数据规则表达式：用于定义数据相关的规则，例如只读规则、必填规则、计算规则和约束规则等等； ● 绑定表达式：用于定义展现组件上的数据、状态、样式等稳中有各种动态属性。 数据规则表达式和绑定表达式都采用js表达式语法，但不同的表达式有不同的作用和描述规则，接下来我们将详细介绍这两种表达式。 （注：本节所用到的案例参见WeX5自带的“数据绑定”案例，即/UI2/demo/misc/bind/index.w。启动WeX5运行平台，在chrome浏览器中访问http://localhost:8080/x5/UI2/demo/misc/bind/index.w即可运行） 应用构成 WeX5应用的前端由若干个页面构成，这些页面可以按业务的需要，组织到多个目录中。每个页面由以下三个文件组成： ● w文件：页面片段，定义页面的展现，由若干组件构成；它是MVVM的V； ● w文件同名的js文件：定义页面逻辑，以js模块化的方式定义一个js类；这个js类的实例是MVVM的VM； ● w文件同名的css文件：定义页面的样式，只作用于当前w文件中的界面元素。

WeX5页面运行时，分成两个阶段：编译阶段和运行阶段。 编译阶段 图2-19 页面编译阶段 如上图所示，WeX5页面编译时，根据页面的三个核心文件（.w文件、.js文件和.css文件），编译生成三个目标文件： ● main_{lang}_{skin}.html：完整的HTML页面，可以作用独立的HTML页面运行； ● xx.w.view_{lang}_{skin}.html：HTML页面片段，不能独立运行，只能作用页面片段被其它页面加载，适用于单页应用模式； ● xx.w.view_{lang}_{skin}.js：页面逻辑，包含页面初始化等相关逻辑，它继承.w同名的js文件中定义的js类； 运行阶段 运行阶段可以分为：页面创建、用户交互和关闭页面三个过程。 1、页面创建 如上图示，页面创建时，分成以下步骤： 1)页面准备：负责加载页面，创建组件实例，执行数据绑定初始化； 2)触发onModelConstrut事件：触发Model开发构造事件； 3)Data加载：Model中的Data加载数据； 4)触发onModelConstructDone事件：触发Model构造完成事件； 5)触发onLoad事件：触发页面加载完事件； 6)触发onParamsReceive事件：触发页面接收参数事件； 2、 用户交互 如上图所示，当执行下列操作时，会触发相应的事件： 1)再次向页面传参数时，会触发onParamsReceive事件； 2)当离开页面时，会触发onInactive事件； 3)当进入页面时，会触发onActive事件； 3、 页面关闭 如上图所示，关闭页面时，会按顺序触发以下事件： 1)onInactive事件：页面离开事件； 2)onunLoad事件：页面销毁事件； 在页面的整个运行阶段，我们可以在蓝色部分接管相应的事件，实现自己的逻辑，例如：onModelConstruct、onModelConstructDone、onLoad、onParamsReceive、onActive、onInactive和onLoad。

页面模式定义 页面模式有两种：多页应用（Multi-page Appliction简称为MPA）与单页应用（Single-page Application简称为SPA）。 多页应用（MPA）是传统的Web应用，每次应用程序需要显示数据或将数据提交给服务器时，浏览器必须离开当前页面，从服务器请求一个新的页面进行加载显示。在多页应用中，浏览器会不停的重新加载页面，浏览器就会一直发出卡卡卡的声音，整个操作也常感知卡卡的。如果使用这样的页面模式，使用者体验比较差，整体流畅度比较低。 单页应用（SPA）是一种特殊的Web应用，它将所有的活动局限于一个Web页面中，一旦页面加载完成后，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用JavaScript动态变换HTML的的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。 页面模式对比 WeX5对页面模式的支持 页面（.w）是WeX5前端基本单元，对于每一个页面（.w），WeX5即可以作为页面片段运行在单页应用的外壳页面里，也可以作为独立的页面加载运行。所以，WeX5即支持多页应用模式的开发，也支持单页应用模式的开发。为了获得更好的运行性能和用户体验，WeX5推荐采用单页应用模式，同时，WeX5对大规模单页应用模式也提供了非常好的支持。 单页应用模式的三大问题 在单页应用模式下，由于运行时只有一个页面，很容易产生以下三大问题： id 冲突、css冲突和js冲突。针对这三大问题，WeX5采用了以下技术来解决： 1、针对id冲突，采用xid技术来解决； 2、针对css冲突，采用css局部化技术来解决； 3、针对js冲突，采用js模块化技术来解决； ● id冲突 首先，我们来看看什么是id？ id是HTML元素的唯一标识，id在一个HTML文档中必须是唯一的。 在单页面应用模式中，开发阶段，为了多人协作和代码组织的需要，每个页面片段是独立开发的，但在运行时刻，所有的页面片段都被加载到一个页面中运行，这种情况下，很容易产生id冲突的问题。 如上图所示，由于在page1片段和page2片段中都定义的id=“a”，导致运行时，在一个HTML文档中有两个HTML元素的id属性为“a”，产生了id冲突。 针对单页应用模式的id冲突，WeX5使用xid技术来解决（即上述方案三）。那我们来看看，什么是xid？ xid是WeX5页面(.w)中界面元素的唯一标识，替代传统HTML中的id； xid在一个页面片段（.w）中必须唯一。 WeX5页面在浏览器运行时，每加载一个页面片段时，会针对每个界面元素的xid属性，生成一个HTML文档唯一的id，生成规则是： xid + “页面实例标识” = id。 其中，“页面实例标识”是页面片段加载后的唯一标识，它是一个guid，具体唯一性（即使同一个页面片段被加载两次，这两次生成的“页面实例标识”也是不一样的），因此，在整个HTML文档中，id不会产生冲突。 为了开发方便，WeX5针对xid提供了以下js api： 1、根据xid获取id：this.getIDByXID(xid)； [...]