下一代富客户端WEB的应用前端开发框架.docVIP

下一代富客户端WEB的应用前端开发框架 　　摘 要：目前，WEB应用的规模和复杂度不断提升，各种框架层出不穷，我们已经具备了令人难以置信的能力。然而从实际的使用效果来看，我们所做的努力依然不够。与各种服务端框架相比，前端框架在设计理念方面仍然存在很大的提升空间。在创建这些应用的过程中所引入的复杂性同样令人难以置信。我们需要的是只通过一个独立的框架就可以构建动态、交互密集型的客户端应用，以及将代码隔离成模块的方法，这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包括MVC、模块化、依赖注入、自动双向数据绑定和测试，等等。 　　关键词：富客户端WEB应用；前端开发框架；MVC；模块化；依赖注入；自动双向数据绑定 　　文章编号：1674-3520（2015）-04-00-02 　　引言 　　富客户端开发技术是完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。 　　富客户端前端开发框架主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能。在使用典型的WEB类库时，你可以选择并使用你所喜欢的功能；而对于富客户端前端开发框架来说，你必须把它作为一个完整的套件来使用，框架中的所有东西都包含在里面。这样一来后续的开发、扩展和修改都变的可维护了。 　　一、富客户端开发概念 　　（一）客户端模板 　　多页面 WEB 应用会在服务端创建 HTML，把 HTML 和数据装配并混合起来，然后再把生成的页面发送到浏览器中。在某种程度上，大部分单页面应用――也叫做 AJAX 应用――也会做同样的事情。在这一方面，富客户端框架的处理方式完全不同，在富客户端框架中，模板和数据都会发送到浏览器中，然后在客户端进行装配。这样一来，服务器的角色就变成了仅仅为这些模板提供一些静态的资源，然后为这些模板提供所需要的正确数据。 　　（二）Model View Controller（MVC） 　　MVC 背后的核心理念是： 你应该把管理数据的代码（model）、 应用逻辑代码（controller），以及向用户展示数据的代码（view）清晰地分离开。视图会从模型中获取数据，然后展示给用户。当用户通过鼠标点击或者键盘输入与应用进行交互的时候，控制器将会做出响应并修改模型中的数据。最后，模型会通知视图数据已经发生了变更，这样视图就可以刷新其中显示的内容。 　　在富客户端应用中，视图就是 Document Object Model（DOM，文档对象模型），控制器就是 JavaScript 类，而模型数据则被存储在对象的属性中。 　　（三）数据绑定 　　在 AJAX 型的单页应用普及之前，类似 Rails、PHP 和 JSP 之类的平台都可以帮助我们创建用户界面（UI），它们会把 HTML 字符串和数据混合起来，然后再发送给用户并显示。而 jQuery 之类的库则在客户端继承了这一模型，让我们遵守类似的风格，但是使用jQuery 可以单独刷新 DOM 中的局部内容，而不是刷新整个页面。在 jQuery 中，我们会把 HTML 模板字符串和数据混合起来，然后把获得的结果插入 DOM 中我们所期望的位置，插入的方式是把结果设置给一个占位符元素的 innerHtml 属性。 　　以上机制都工作得相当不错，但是当想要把最新的数据插入到 UI 中，或者根据用户输入来修改数据的时候，你就需要做很多极其繁琐的工作来保证数据的状态是正确的，并且 UI 和 JavaScript 属性要同时正确。现在我们可以仅仅声明 UI 中的某个部分需要映射到某个 JavaScript 属性，然后让它们自己去同步。这种编程风格叫做数据绑定。因为它可以和 MVC 很好地结合起来，所以我们把它引入到了富客户端框架中。这样一来，当编写视图和模型的时候，可以节省代码量。在 UI 中，把数据从一个值修改成另一个值的大部分工作会自动进行。 　　（四）依赖注入 　　我们在编写类（编写业务和逻辑）时的只需要简单地获取它们所需要的东西，而不需要创建那些它们所依赖的东西。 　　这种风格遵循了一种叫做迪米特法则[1] （Law of Demeter，http：///wiki/Law_of_Demeter）的设计模式，也叫做最少知识原则。既然 Controller 的职责是设置模型的内部状态，那么用这一法则就意味着，它不应该去操心任何其他任何东西。 　　（五）指令 　　富客户端框架内置了很多指令，可以帮助你