在讲完javascript设计模式之后,本文主要再讲前端开发框架的模式,再讲模式之前,首先介绍下库和框架的区别,两者都是产品开发时的产物,因此很多人并没有很细的区分开来。
库是将代码封装在文件中、允许继承和修改这些文件。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候,只需要使用库的一部分类或函数,然后继续实现自己的功能。比如造汽车,轮子、发动机都是一个库,我们需要继承它来组装汽车。
框架则是为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。可以说,框架是库的升级版。开发者在使用框架的时候,必须使用这个框架的全部代码。一个框架是一个可复用的组件,它规定了应用的体系结构,阐明了整个设计、协作组件之间的依赖关系、责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方法。比如我们对买来的汽车进行改造,买来的汽车就是一个框架,我们更换大排量的发动机等。
前端开发中会使用到许多Javascript框架,例如canjs,zepto,angularjs等。而js开发库,如jQuery,ExtJS,dojo等。框架模式有MVC、MTV、MVP、CBD、ORM、MVVM等等,下面我们来看下前端框架的模式:
MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式:
使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。MVC 分层有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。前端典型的MVC模式的框架是angular.js。
模板(Templates)
模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!
应用程序逻辑(Logic)和行为(Behavior)
AngularJS与标准Ajax应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
模型数据(Data)
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。
MVVM是Model-View-ViewModel的简写。MVVM(Model-View-ViewModel)框架的由来是MVP(Model-View-PResenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。MVVM 模式使用的是数据绑定基础架构,它们可以轻松构建UI的必要元素。View绑定到ViewModel,然后执行一些命令在向它请求一个动作。而反过来,ViewModel跟Model通讯,告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易,外观设计师就越容易使用Blend来创建一个漂亮的界面。同时,当UI和功能越来越松耦合的时候,功能的可测试性就越来越强。
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点:前端框架中典型MVVM模式的是kendo-ui,在开发中只需要定义一个控制器:kendo.observable(),就可以在视图模型上绑定数据。
本文只是简单的介绍了两种框架模式,学习框架模式能提高我们解决问题的思想,写出更好的代码。
新闻热点
疑难解答