下一代富客户端web应用前端开发框架

《下一代富客户端web应用前端开发框架》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、下一代富客户端WEB应用前端开发框架摘要：目前，WEB应用的规模和复杂度不断提升，各种框架层出不穷，我们已经具备了令人难以置信的能力。然而从实际的使用效果来看，我们所做的努力依然不够。与各种服务端框架相比，前端框架在设计理念方面仍然存在很大的提升空间。在创建这些应用的过程中所引入的复杂性同样令人难以置信。我们需要的是只通过一个独立的框架就可以构建动态、交互密集型的客户端应用，以及将代码隔离成模块的方法，这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包括MVC、模块化、依赖注入、自动双向数据绑定和测试，等等。关键词：富客户端WEB应用；前端开发

2、框架；MVC；模块化；依赖注入；自动双向数据绑定文章编号：1674-3520(2015)-04-00-02引言富客户端开发技术是完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用，使Web应用开发比以往更简单、更快捷。富客户端前端开发框架主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能。在使用典型的WEB类库时,你可以选

3、择并使用你所喜欢的功能；而对于富客户端前端开发框架来说，你必须把它作为一个完整的套件来使用，框架中的所有东西都包含在里面。这样一来后续的开发、扩展和修改都变的可维护了。一、富客户端开发概念(一)客户端模板多页面WEB应用会在服务端创建HTML,把HTML和数据装配并混合起来，然后再把生成的页面发送到浏览器中。在某种程度上，大部分单页面应用一一也叫做AJAX应用——也会做同样的事情。在这一方面，富客户端框架的处理方式完全不同，在富客户端框架中，模板和数据都会发送到浏览器中，然后在客户端进行装配。这样一来，服务器的角色就变成了仅仅为这些模板提供一些静态的资源，然后

4、为这些模板提供所需要的正确数据。(二)ModelViewController(MVC)MVC背后的核心理念是：你应该把管理数据的代码(model)、应用逻辑代码(controller),以及向用户展示数据的代码(view)清晰地分离开。视图会从模型中获取数据，然后展示给用户。当用户通过鼠标点击或者键盘输入与应用进行交互的时候，控制器将会做出响应并修改模型中的数据。最后，模型会通知视图数据已经发生了变更，这样视图就可以刷新其中显示的内容。在富客户端应用中，视图就是DocumentObjectModel（DOM,文档对象模型），控制器就是JavaScript类，而

5、模型数据则被存储在对象的属性中。（三）数据绑定在AJAX型的单页应用普及之前，类似Rails.PHP和JSP之类的平台都可以帮助我们创建用户界面（UI）,它们会把HTML字符串和数据混合起来，然后再发送给用户并显示。而jQuery之类的库则在客户端继承了这一模型，让我们遵守类似的风格，但是使用jQuery可以单独刷新DOM中的局部内容，而不是刷新整个页面。在jQuery中，我们会把HTML模板字符串和数据混合起来，然后把获得的结果插入D0M中我们所期望的位置，插入的方式是把结果设置给一个占位符元素的innerlltml属性。以上机制都工作得相当不错，但是当想要

6、把最新的数据插入到UI中，或者根据用户输入来修改数据的时候，你就需要做很多极其繁琐的工作来保证数据的状态是正确的，并且UI和JavaScript属性要同时正确。现在我们可以仅仅声明UI中的某个部分需要映射到某个JavaScript属性，然后让它们自己去同步。这种编程风格叫做数据绑定。因为它可以和MVC很好地结合起来，所以我们把它引入到了富客户端框架中。这样一来，当编写视图和模型的时候，可以节省代码量。在UI中，把数据从一个值修改成另一个值的大部分工作会自动进行。（四）依赖注入我们在编写类（编写业务和逻辑）时的只需要简单地获取它们所需要的东西，而不需要创建那些它

7、们所依赖的东西。这种风格遵循了一种叫做迪米特法则[1]（LawofDemeter,http://en.wikipedia.org/wiki/Law_of_Demeter）的设计模式，也叫做最少知识原则。既然Controller的职责是设置模型的内部状态，那么用这一法则就意味着，它不应该去操心任何其他任何东西。（五）指令富客户端框架内置了很多指令，可以帮助你为你的应用定义视图，这些指令可以把常见的视图定义成模板，它们可以设置应用的运行方式，或者用来创建可复用的组件。同时，并不会受限于富客户端框架内置的指令。使用者可以编写自己的指令用来扩展HTML模板的功能，从而

8、实现任何东西。二、调用富客户端框架为了