欢迎来到天天文库
浏览记录
ID:30973015
大小:56.50 KB
页数:5页
时间:2019-01-04
《下一代富客户端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、实现任何东西。二、调用富客户端框架为了
此文档下载收益归作者所有