『壹』 js常用设计模式(MVC、MVP、MVVM及其他设计模式)
一、MVC
MVC模式的意思是,软件可以分成三个部分。
视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存
各部分之间的通信方式如下。
View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View,用户得到反馈
所有通信都是单向的。
二、互动模式
接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。
另一种是直接通过controller接受指令。
三、实例:Backbone
实际项目往往采用更灵活的方式,以 Backbone.js 为例。
1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
3. Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。
四、MVP
MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
1. 各部分之间的通信,都是双向的。
2. View 与 Model 不发生联系,都通过 Presenter 传递。
3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
五、MVVM
MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。
唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。 Angular 和 Ember 都采用这种模式。
1、js工厂模式
说明:
在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。
引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。
在函数的最后返回该对象。
不推荐使用这种方式创建对象,但应该了解。
2、js构造函数模式
说明:
与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。
同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。
同样的,不推荐使用这种方式创建对象,但仍需了解。
3、js原型模式
说明:
函数中不对属性进行定义。
利用prototype属性对属性进行定义。
同样的额,不推荐使用这样的方式创建对象。
4、构造函数+原型的js混合模式(推荐)
说明:
该模式是指混合搭配使用构造函数和原型方式。
将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。
推荐使用这样的方式创建对象,这样有好处。
5、构造函数+原型的动态原型模式(推荐)
说明:
动态原型方式可以理解为混合构造函数,原型方式的一个特例。
该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
}
从而保证创建该对象的实例时,属性的方法不会被重复的创建。
『贰』 什么是MVC设计模式,如何使用MVC
MVC是Model,View,Controller的缩写,MVC是Application开发的设计模式,也就是大家所知道的Model2.在MVC的设计模式中,它包括三类对象:(1)模型(Model)对象:是应用程序的主体部分。(2)视图(View)对象:是应用程序中负责生成用户界面的部分。(3)控制器(Control)对象:是根据用户的输入,控制用户界面数据显示及更新Model对象状态的部分。即要求在Application开发中你把商业逻辑,界面显示,数据分离。 MVC应用程序总是由三个部分组成.Event(事件)导致Controller改变Model或View,或者同时改变两者.只要Controller改变了Models的数据或者属性,所有依赖的View都会自动更新.类似的,只要Controller改变了View,View会从潜在的Model中获取数据来刷新自己 MVC模式是一个复杂的架构模式,其实现也显得非常复杂,但多种设计模式结合在一起,使MVC模式的实现变得相对简单易行.Views可以看作一棵树,显然可以用Composite Pattern来实现.Views和Models之间的关系可以用Observer Pattern体现.Controller控制Views的显示,可以用Strategy Pattern实现.Model通常是一个调停者,可采用Mediator Pattern来实现. java开发Web Application有几种符合MVC设计模式的开发方式。 1:Jsp+Servlet+JavaBean(EJB) 2:Jsp+JavaBean(Controller)+JavaBean(EJB)(Model) 3:TDK(Turbine,Velocity...) 4:Xsp 5:Jsp+Struts+JavaBean(EJB)
『叁』 如何设计一个自己的前端MVC框架
对于一些中小型的web应用程序,为了缩短开发周期和降低开发和维护成本,往往会采用一种基本MVC开发模式的框架开发。现在市场上的开发传统web页面的JavaScript框架比较多,但是专门对移动应用程序的MVC设计模式的框架比较少。所以开发一套针对移动应用程序的MVC设计模盯衡式的框架还是很有价值的。参考传统MVC设计模式框架,移动应用框架应该实现以下几个方面:
MVC的分离
移动应用程序中,model,view,controller得到严格的分离,使得应用程序的结构和开发的思路更加清晰,程序的维护更加方便。
数据的更新
Model中的数据与View中数据的双向更新,当Model中的数据发生变化时,View中的数据随着发生变化,当View中输入或修改数据时,Model的数据也会发生变化,省去开发者手动操作数据的变化,避免发生错误。
数据的格式化
当Model中的数据需要先格式化再显示在view中的时候,可以先进行数据格式的转化。
数据的验证
当view中输入数据或者是改变数据的时候,需要验证数据时,可以先对数据进行验证,当验证通过时,才赋给Model中相应的数据。
页面管理调度
实现各个页面之间的调度,避免由开发者实现页面调度而产生的混乱,同时也加快程序的开发速度。
框架的实现与程序的开发离不开JavaScript库,目前的Javascript库的形势也比较尴尬,一方面是传统的web页面javascript库的成熟,一方面却是针对移动端应用设计开发web应用JavaScript的相对落后,虽然也有几款优秀的,但是相对体积比较大,而且有时候出了问题也很难跟踪,所以有必要开发一套专门针对移动端开发的JavaScript库,使它具有灵活,小巧,功能完善的工具集和UI组件,帮助开发移动端应用的开发者快速工发并容易维护,所以具体需求有以下几个方面:
事件的支持
DOM2级的腊裤事件使对DOM元素的操作起到了解耦作用,在程序开发的过程中,对程序对象之间的解耦的作用,在程序开发的过程中,对对象之间的解耦也是相当必要的,所以有必要做一个统一的接口,而事件是一个不错的选择,而且事件在MVC设计模式的实现中占有很重要的地位,他既可以使Model,view,controller之间分离解耦,又使他们之间存在内在联系。
插件机制
一个好的Javascript库,他应该有自己的灵活完善的插件机制,不仅可以为库的开发台提供方便,也应该为开发应用程序时提供方便,针对相同的功能开发插件,避免代码的多次开发。
页面管理
一个移动应用程序会有很多页面需要分级管理,这是由移动办公设备的特性决定的,面对多级与多个页面,需要一种机制来管理各个页面之间的关系才而已痛苦误会页面的加载时机与加载方法。
动画的功能
使用移动设置性能的提升与大量移动应用的出现,使用户对程序的选择更多。如果程序不能更炫更苦的表现来吸引用户,那他将难以进入市场,而动画就是其表现手段之一,所以有必要为开发者提供一套实现动画的方法,使开发者可以迅速开发能吸引用户的动画。
手势的支持
随着触摸移动设备的普及与苹果公司在它原生IOS应用程序中推出了手势操作后,人们越来越喜欢这种交互方式了。为了适应这种潮流与提升程序的竞争力,在面向移动应用开发的JavaScript库中添加手势的支持是有必要的。
数据的通信
作为一个信息时候的应用程序,数据通信的功能是不可或缺的。虽然Ajax技术提供了数据通信的相应的接口,但是如果每一次的数据通信都要开发者去创建,调用相应的接口,会出现很重复的代码,而且效率也不高,所以有必要对Ajax数据通信接口进行封装。
数据的本地化
当应用程序与后台通信取得数据的时候,有些数据是需要保存在本地的,还有一些数据的状态,以及一些经过运算得到的数据也是需要保留在本地的。这就需要提供一种数据本地化的接口
UI组件
开发者在开发应用程序的时候,常常会遇到一个功能相同的控件在不现的轮则简应用程序程序中都会用到,为了提高应用程序的开发效率,缩短开发周期,有必要把一些常用的控件抽象出来形成组件,供开发者调用
屏幕的适配
随着移动设备的不断更新发展,设备屏幕的尺寸与分辨率越来越多样化,这便成了跨平台应用程序“一次开发,多处运行”的最大难题。所以有必要形成一_方案来解决这一问题。
总结
在这所有问题中,事件的扩展,插件机制,页面的管理,MVC设计模式的实现不仅是重点,也是难点,它们的实现具有以下价值:
事件在web开发中应用已经很广泛,不过它只有在相应的DOM元素上才有事件,而且MVC设计模式的实现需要事件的驱动,所以需要扩展DOM事件到普通对象上,使它们具有订阅发布消息功能,且与DOM事件有相同的接口。
插件机制需要代码的高度抽象化,它是UI组件实现的基础,它的实现提高了代码的重复使用。
页面的管理,它把应用程序按业务逻辑分解为以页面为单位进行管理,使程序的逻辑结构更加清晰,而且它为MVC框架中页面的调度实现提供了基础。
MVC设计模式的实现,即MVC框架的实现,对应用程序开发周期的缩短,开发成本的降低,应用程序后期的维护都会有很大的帮助。