如何设计一个自己的前端MVC框架(一)

如何设计一个自己的前端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 框架的实现,对应用程序开发周期的缩短,开发成本的降低,应用程序后期的维护都会有很大的帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,834评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 你终于可以名正言顺的 背着书包上小学了 爷爷牵着你的手 你屁颠屁颠的跟着走 你遇到好多小伙伴 同班同学或者街坊邻居...
    萍萍_sunshine阅读 149评论 0 0
  • 最近真是对画画着了魔,看到什么都想画。这不,连购物袋都不放过。话说,这幅头上长满花朵的小鹿,我今年都见过两个了,见...
    有朵时光阅读 1,014评论 0 4