如何设计一个自己的前端MVC框架(一)
随着移动互联网的迅速发展和HTML5技术的日趋成熟,基于web技术开发的移动应用程序越来越多,而且也越来越复杂,它们有着大量的API或通讯接口与服务器或后台通读,进行大量的视图的操作以及大量的数据的操作,视图的实现与操作需要一些常用的UI控件,数据的操作需要一些常用方法的实现来加快开发速度,所以移动应用程序的开发模式与传统web开发模式也越来越像,对JavaScript库和框架的依赖也越来越大。
对于一些中小型的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 框架的实现,对应用程序开发周期的缩短,开发成本的降低,应用程序后期的维护都会有很大的帮助。