论文总字数：20330字

目 录

1绪论 1

1.1选题背景和意义 1

1.1.1选题背景 1

1.1.2选题意义 1

1.2相关技术简介 1

1.2.1 Javascript语言 1

1.2.2 UI架构模式的演变史 2

1.3 国内外研究现状 4

1.3.1 Angualrjs 4

1.3.2 Vuejs 4

1.3.3 Reactjs 5

1.3.4总结 5

1.4 论文组织结构 6

2 Zues.js的设计 6

2.1框架简介 6

2.2 Context（作用域上下文） 7

2.3 $compile（全局编译函数） 7

2.4 directive(内置指令) 8

3 Zues.js的实现 9

3.1 函数模块简介 9

3.2 viewModel 9

3.3 DOM WALK 12

3.3.1 DOM树进行递归遍历 12

3.3.2 指令的扫描和提取 13

3.3.3 创建d-text和d-attr指令 14

3.4 指令（directive）的实现 15

3.4.1 父类 15

3.4.2 子类 16

3.4.3 实现Repeat指令 17

3.4.4 表达式的解析和转换 21

3.5 框架的兼容性 28

3.5.1兼容的浏览器 28

3.5.2 babel编译 28

3.5.3 使用polyfill库 28

4 编写Zues应用程序 28

4.1 Hello world 28

4.2 任务列表应用 29

4.2.1 编写应用模板 29

4.2.2 编写应用逻辑 30

5 总结和展望 34

5.1总结 34

5.2 展望 34

参考文献 35

致谢 36

前端MVVM框架的设计与实现

卢惠健

, China

Abstract：Since the era of mobile Internet access, the number of applications need to be created and more attention paid to user experience. What’s important is the fact that applications are becoming more and more complex, especially on the front end. The traditional web development mode blurs the line between front end and back end, which affects software development efficiency and code quality. In this paper, we will design and develop a Javascript framework based on MVVM architecture with a better separation of concerns. It allows replace view with a new one without changing the viewModel. It allows designers to work in the View without touching any logic and to easily unit test View's logic. We will introduce the design and implementation of zues.js and explain how to use zues.js through using two examples.

Key words：MVVM architecture; web front-end development; Javascript framework

1绪论

1.1选题背景和意义

1.1.1选题背景

移动互联网时代，互联网渗透进人们生活的方方面面，人们可以在互联网上购物、租房、订餐、打车......，生活的衣食住行已经都离不开它了，它像水和电一样已经成为了人们生活的基础性设施。

2014年10月28日，W3C工作组正式发布了HTML5标准^[1]。HTML5扩展了Web在存储、流媒体、游戏方面的能力，同时也使Web有了操作硬件API的能力。HTML5和Web跨平台优势的结合是使得Web开发在移动互联网时代再次焕发了生机。

各大互联网在自家产品中使用HTML5技术，富客户端应用开始蓬勃发展，web产品逐渐开始应用化,应用程序界面和逻辑变得更加复杂。随着前端功能增强，代码的膨胀，对前端架构提出了更高的要求。

1.1.2选题意义

Web 前端MVVM框架很好的解决了模板与视图高度耦合的问题，使工程师从代码中视图、数据及逻辑的强耦合的困扰中解放出来，代码的可维护性和可复用性也大大提高。

为了解决了Web应用中代码过度耦合，不利于维护的问题，开发一个轻量能同时适应于移动端和PC端的浏览器的Web 前端MVVM框架就非常有意义。本框架将会在现有国内外比较成熟的MVVM框架的基础上，综合优秀特点，设计简明的API，实现一个对开发者友好的Web前端MVVM Javascript框架。

1.2相关技术简介

1.2.1 Javascript语言

Javascript最初是由网景公司Brendan Eich工程师设计开发用来开发网页的一门脚本语言。它非常灵活和优雅，同时吸收了面向对象和函数式的特点。随着Javascript的发展，它已经成为浏览器平台的唯一编程语言。2009年nodejs平台^[2]发布，Javascript拥有运行在服务端的能力，它一下子成了一门全栈型编程语言。框架是设计用来编写浏览器端应用，所以选择Javascript作为编写框架的编程语言。

1.2.2 UI架构模式的演变史

1 MVC诞生

1978-79年，Trygve Reenskaug^[3] 构想并提出MVC模式，设计目标是提供一个可以让用户像操作真实世界中的实体一样的接口来操作views背后的数据。程序被分成三个模块：数据型（Model）、控制器（Controller）、视图(View)。

（1）Model: 数据模型，代表应用的数据和业务逻辑。通常通过领域模型(DOMainModel)来实现，领域模型的对象用来模拟真实世界的实体 - 描述他们的属性和行为。Model暴露函数调用接口和数据调用接口，对Controller和View不依赖。

（2）Controller：控制器，是用来接收用户输入的组件，这些输入包括数据入口、键盘/鼠标命令。它的责任是桥接用户和应用，以便用户可以和屏幕及数据交互。监听用户操作事件，调用Model暴露的接口，依赖Controller和Model。

（3）View: model可视化的描述，通常是由应用程序中的界面(screen)和UI组件(widget)构成。

图 1-1 MVC模式结构图

在MVC模式中，可以被用户操作的每一个UI元素都对应一个Model-View-Controller三元组。三个模块之间都是单向通信，view传输事件给Controller，Controller完成业务逻辑后，要求改变Model的状态，Model将新的状态发给View，用户得到反馈。

2 从MVC到MVP

MVC架构默认View可以从Model中获取当前View的所有状态，这显然是不正确的，比如View中显示了一个列表，当需要记录列表中的哪一行被选中了，记录哪一行显然不是Model要做的事情。为了解决这个问题，诞生PresentationModel^[4]模式，PresentationModel是介于View和Model之间的一层，是为UI逻辑设计的Model，用来记录当前View的状态，同时肩负了观察Model的改变以及时的更新View的责任。

PresentationModel并不是无敌的，它虽然解决了保存UI状态和逻辑的问题，却也引入了新的问题，在某些情况下它鼓励了开发人员透过PresentationModel直接访问View，以便对View的状态做出快速的改变。但是PresentationModel的设计初衷不是这样的，它不应该依赖于View，于是又诞生了另外一种设计模式——MVP。

图1-2 MVP模式结构图

（1）Model：是应用中的数据和业务逻辑部分。

（2）View：是Model的可视化表现，由应用的屏幕(screen)和UI组件(widgets)组成。

（3）Presenter：包含表现逻辑(PresentationLogic)并负责和Model交互。

3 MVP演变成MVVM

MVVM 是 Model-View-ViewModel 的简写，是一个相当新的架构， 2005 年，微软的 WPF 和 Silverlight 的架构师 John Gossman^[6]在MVP（Model – View - Presenter）架构的基础上提出MVVM架构模式，并且应用在微软的软件开发中。

图1-3 MVVM模式结构图

MVVM模式是由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，MVVM模式是MVP模式的衍生，唯一不同是原来MVP中Presenter名字改为ViewModel（视图模型），

在ViewModel中加入了状态数据（state data），用来抽象View状态。然后通过双向数据绑定（data binding）使ViewModel中的状态数据（state data）与View中的显示状态（screen state）保持一致。在ViewModel中的展示逻辑修改了它对应的状态数据，就可以引起View的状态的改变，从而可以避免MVP模式中在View上开发大量的接口的问题。

剩余内容已隐藏，请支付后下载全文，论文总字数：20330字

相关图片展示：