MVC框架可以把应用清晰明了地分为三个部分:Model层–数据层,View层–视图层,Controller–逻辑层,Model层负责整合数据,View层负责页面渲染,Controller层负责实现业务逻辑。

我在这里简单说一下我对MVC框架中的View层的理解。

View层一般包含两个部分:View类和模版文件,View类并不是必需的,采用View类可以整合代码,因为有时候View层也会有一些复杂的逻辑和数据读取的操作,这些操作最好放在类(或者对象)中实现,如果直接在模版文件中实现,会让模版文件很凌乱,不利于代码复用和后期维护。

对于一个Web应用来说,整个应用的风格和页面布局需要保持一致,那么聪明的小伙伴是否联想到了代码复用?假如这个应用一共有200个页面,如何实现“只需在代码中修改一处,就可以修改所有页面的共用部分?”,这是一个非常重要的功能,要不然页面上每一个小改动都需要重复200次,其中难免出错,维护代价高昂。

代码复用的基本思想是“模块化”,每个模块只负责一小部分功能,整个应用的功能就是这些模块的排列和组合,这个思想运用在View层就可以实现上面提到的问题。

那么如何将“模块化”的思想运用在View层的实现上呢?

首先,需要分析web应用页面渲染的特点。一般的,大部分页面共用一个基本布局(基本布局之外没有web内容),在基本布局里面进行划分,比如划分为上下布局,左右布局等,然后再在划分好的小块中再进行布局划分,以此类推,直到完成一个页面的布局。因为一个Web应用的风格和大体布局是一致的,所以上面划分出来的布局中,一部分布局是可以共用的。每一次划分所产生的块都是“模块”,这些“模块”都可以复用,页面与页面之间共用的块,可以通过调用相同的“模块”来实现,需要修改的时候,只需修改“模块”即可,这样就可以达到“只需在代码中修改一处,就可以修改所有页面的共用部分”。

那么如何划分布局呢?(如何把我脑海中对页面布局的划分告诉Web应用?)

我的两种方案

1. 在每个模块中实现对它所包含的子模块的调用。这样,只需要“手动”调取出第一个模块,就可以调取出所有它的子模块,从而完成整个页面的渲染。这个方法的缺点是“环环相扣”并且没法快速查看,如果某个模块渲染不正确,只能一级一级地往上追溯。“环环相扣”导致模块与模块之间的关系非常紧密,有悖于“模块化”的思想。

2. 为每一个页面单独设置一个布局的.xml文件,在这个文件中,规定好页面的布局划分,哪个模块包含哪些子模块就一目了然,便于快速定位问题。缺点是.xml文件的解析难度很大,解析.xml文件也非常吃性能,如果页面布局复杂,维护.xml也会非常麻烦。

我比较偏向于第2个方案,第1个方案还有一个非常致命的缺点:页面的渲染过程是逐级展开的,需要在关键节点进行“干预”,使上级模块调取合适的子模块,这也是一个难点,如果需要干预的点太多,就会非常麻烦并且非常凌乱。相比之下,方案2只需要维护.xml文件,只要编写一个完善的解析函数,就可以很好的工作,如果解析.xml文件对性能造成较大影响,可以把解析.xml后所得的布局对象或者数据结构保存在NoSQL数据库中作为缓存(毕竟页面布局不会修改的很频繁),这样可在一定程度上减轻解析.xml文件对性能的影响。

再进一步

有没有发现,上述的第2方案,“为每一个页面单独设置一个布局的.xml文件”会导致众多.xml文件中都会包含大量的重复代码,因为大部分页面的布局有很多位置是相同的或相近似的,所以可以对.xml文件作一些优化,把.xml文件中重复的部分分离出来,单独维护,这样.xml文件的内容就会清爽很多。

如果您觉得阅读本文对您有帮助,欢迎转载本文,但是转载文章之后必须在文章页面明显位置保留此段声明,否则保留追究法律责任的权利。

作  者:blog.jpdou.top

原文链接:http://blog.jpdou.top/talk-about-view-of-mvc/

谈谈我对MVC的View层实现的理解的更多相关文章

  1. 微信上传文章素材—ASP.NET MVC从View层传数据到Controller层

    View层: $('#btnNews').click(function() { if (!confirm('确定要提交吗?')) { return; } var frontViewData = []; ...

  2. 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造

    第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...

  3. 转载《浅析MVC框架中View层的优雅设计及实例》

    在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...

  4. MVC中从Controller像View层传值

    MVC中的Controller不能直接的訪问View层中的控件,那么是怎样的将Controller中值传到View中,经常使用的有4种 ViewData: 是获取或设置视图的字典对象,它里面存放的是键 ...

  5. 浅析Yii2的view层设计

    Yii2.0的view层提供了若干重要的功能:assets资源管理,widgets小组件,layouts布局... 下面将通过对Yii2.0代码直接进行分析,看一下上述功能都是如何实现的,当然细枝末节 ...

  6. MVC中view和controller相互传值的方法

    MVC项目中,在view层如果使用前台框架,框架中会有封装好的相互传值方法.但是,那些postdata[][]方法不一定能够满足功能需求,反而一些常用的传值方法可能会刚好解决它们的不足.总结如下: 一 ...

  7. iOS应用架构谈(三):View层的组织和调用方案(下)

    iOS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答iOS应用架构中的种种问题,本文是其中的第二篇,主要讲View层的组织和调用方案.下篇主要讨论做View层架构的 ...

  8. iOS应用架构谈(二):View层的组织和调用方案(上)

    OS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答iOS应用架构中的种种问题,本文是其中的第二篇,主要讲View层的组织和调用方案.上篇主要讲View层的代码结构. ...

  9. iOS应用架构谈(二):View层的组织和调用方案(中)

    iOS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答iOS应用架构中的种种问题,本文是其中的第二篇,主要讲View层的组织和调用方案.中篇主要讨论MVC.MVCS. ...

随机推荐

  1. service的生命周期以及两种service的差异

    可以看到,两种service的生命周期都相对简单,有一点不同的是,Intentservice每次调用的时候都执行onstartcommand,而boundservice一旦启动了之后,就不会每次执行o ...

  2. [matlab]机器学习及SVM工具箱学习笔记

    机器学习与神经网络的关系: 机器学习是目的,神经网络是算法.神经网络是实现机器学习的一种方法,平行于SVM. 常用的两种工具:svm tool.libsvm SVM分为SVC和SVR,svc是专门用来 ...

  3. linux上运行jmeter-server失败

    1. 在linux上运行jmeter-server报如下错误 处理办法: 通过如下命令运行 ./jmeter-server -Djava.rmi.server.hostname=192.168.16. ...

  4. cdce62005配置说明

    相关芯片手册可查阅:http://www.ti.com.cn/product/cn/cdce62005 需要使用的软件下载地址:http://www.ti.com.cn/cn/lit/sw/scac1 ...

  5. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  6. 51nod1521(set.upper_bound())

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1521 题意:中文题诶- 思路: 我们先看一下set容器的三个 ...

  7. PostGIS安装 pgis3.4.2 postgresql 10.1

    https://yq.aliyun.com/articles/228258http://download.osgeo.org/postgis/source/http://blog.51cto.com/ ...

  8. 转载 常用Jquery插件整理大全

    常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...

  9. 小程序组件交互 -- 传入js

    1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...

  10. web安全深度剖析pdf

    Web安全深度剖析.pdf_免费高速下载|百度网盘-分享无限制 链接:https://pan.baidu.com/s/1kVwP7SF