Web前端MVC框架的发展方向以及意义

摘  要：MVC框架是Web前端开发中的一种创新的软件构建模式，在进行Web的设计开发中，要保证系统操作的有效性，保证系统测试性和延伸性等，才能保证系统设计的有效性。通过对于前端MVC框架概念介绍，分析前端MVC框架的意义，并探究Web前端MVC框架的前端发展方向，为促进Web前端MVC框架的有效应用和发展提供参考。

关键词：Web;前端MVC框架;前端发展;意义

中图分类号：TP399     文献标识码：A

Abstract：MVC framework is an innovative software construction mode in Web front-end development.In the design and development of Web，it is necessary to ensure the effectiveness of system operation，system testing and extensibility，so as to ensure the effectiveness of system design.This paper introduces the concept of front-end MVC framework，analyzes the significance of front-end MVC framework，and probes into the direction of development of Web front-end MVC framework，which provides a reference for the effective application and development of Web front-end MVC framework.

Keywords：Web;front-end MVC framework;front-end development;significance

1   引言（Introduction）

Web前端开发是在Web发展中逐渐细分出来的一种软件开发模式，最初的前端开发相对比较单一，主要是以页面为主要工作单元，对页面中的内容进行展示，这一时期的界面上的JavaScript逻辑较少，因此可以不用建设相应的框架。而在互联网快速发展的今天，web页面除了内容展示外，还要实现与用户的友好交互和突出一些炫丽的技术特效等，这样就会导致前端代码逻辑变得更加复杂多样，尤其随着4G时代开启、5G时代的到来，移动通信技术和智能化移动通信设备进入了一个高速发展和全面普及的时期，这样全段代码的跨平台、跨设备使用越来越频繁，对代码的复用性要求也越来越高，前端页面的复杂性越来越高，系统维护性的要求不断提升[1]。

MVC（Model View Controller）是一种软件设计模式，最早应用于Desktop程序的开发中，后来随着Web应用复杂程度的日益增加，MVC这种架构模式被移植到WEB应用的后端（服务器端）的开发中，以使表示层与数据层实现分离[2]。而今随着WEB前端应用程序开发研究的不断发展，基于MVC框架在WEB应用的后端开发中的成功应用，很多软件开发公司开始研究MVC框架在前端的应用，通过借助具有跨平台、复用性且已维护的框架，实现web前端开发效率的大幅提升。

目前，MVC框架在前端的应用已由传统的MVC框架产生了各种变体框架，如：MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）等[3]，其中代表性应用框架包括BackBone和AngularJS。

2   前端MVC框架（Front-end MVC framework）

2.1   传统MVC框架

在MVC框架中，往往将一个应用划分成三个层次，即模型层、视图层和控制层[4]。这些不同层次担任的工作任务也不尽相同。其中，模型层主要是数据模型，其主要作用是发挥对于应用程序的业务逻辑相关数据进行包装和处理，在模型层能够直接针对相关数据进行访问。视图层则是对于相关数据进行显示。不过这种显示往往是带有一定目的，在视图层中很少有程序逻辑存在，要想实现视图层的新功能，则需要对于数据模型进行监视和访问。控制層借助控制器对于模型和视图之间的关系进行有效的调控，这种控制更多的是对于应用程序流程进行控制，对于相应事件进行处理和响应，这些事件可能是用户行为，还有数据模型上的改变，控制层对于用户事件信息进行获取，并通知模型层进行更新处理，最后将模型层的处理结果传达给视图层，视图层的相关显示信息也会发生改变，可以说，是控制器对于视图层，以及模型层的一致性进行了有效的调节和控制[5]。具体的框架结构图如图1所示。

2.2   前端MVC框架

随着前端MVC框架的深入研究和发展，现阶段基于MVC框架设计的相关应用程序较多，相关的框架都能够实现相应问题的处理。其中，在MVC框架研究中发展比较突出的有BackBoneJS、AngularJS、Ember JS、JavaScript MVC、knockout JS等。这里的BackBoneJS能够对于应用中的层次分离问题进行有效解决，还能够对于持久层，以及REST同步服务，模型、视图、事件驱动、模板和定位等。这一框架还能实现在模型发生改变后的视图及时更新，一些公司借助这一框架来完成应用构建，且能够得到很好的社区支持。Ember JS更适用于桌面级别的相关应用开发工作，这种模型中的模块化和标准化界面比较突出，系统不用亲自来处理相关的信息和数据，还能够实现对于持久化、计算相关的属性支持，能够自动更新模板，支持正确的状态管理，且系统还具有正确的文档和模板管理。AngularJS则是谷歌创建的一种JS框架，能够实现对于应用程序中的词汇进行有效的拓展，能够帮助web程序中使用HTML动态内容。实际上，MVC框架模型之间存在的差异比较显著，但是综合来看，其中的相关层之间分工明确，相互分离又相互连接。具体来看，模型层主要是实现对于视图层的数据保存和处理功能，视图层主要是显示模型层中提供的数据和接收用户输入信息，并对此做出响应，模型更新后能够及时对用户进行更新反馈。控制层负责业务逻辑处理以及事件逻辑处理。控制层通过对于数据进行增减和检查改动，将结果传递到视图层，由视图层向用户进行显示[6]。

3  前端MVC框架的意义（Significance of front-end

MVC framework）

前端MVC框架很容易让人联系到JQuery，实际上，两者之间还是存在一定差异的。一些程序员认为JQuery已经基本上实现了前端开发的需要，不需要在研究开发和利用前端MVC框架了，但是严格来说的话，JQuery并不是框架模式，而是一种算库，两者的区别就是，库能够对于代码、模板级别的复用以及对于复杂度的封装问题实现解决，属于一种系统开发工具，这种算库可以为前端开发提供有效的封装方案，用户可以选择使用，也可以选择不适用，就算是应用了，也不会对于用户自身的代码结构产生影响。但是框架就不一样了，框架是对模式级别的复用以及对程序组织的规范，属于一种解决方案，能够有效提升系统开发工作效率。使用框架进行前端开发，需要遵循一定的框架应用规则。实际上前端MVC框架和JQuery的区别还是很明显的，JQuery主要是以DOM操作为中心的，MVC框架主要是以模型为中心的，两者解决的问题是不同的，前端MVC框架的目标是带来一整套工作流程变更，这样后端工程师就可以对于前端模型代码进行有效编辑，实现前端和后端的有效联系，交互工程师能够处理UI和模型的互动关系，UI工作人员也能够进行有效的HTML源码的处理，这样相关的开发工作效率就会大大提升，符合软件开发工业化的标准和发展需要。

前端MVC框架应用到前端开发过程中的意义也是比较突出的。相对于后端开发程序来说，前端开发相对来说比较薄弱，但是很多程序员对于在前端开发利用MVC框架更是不理解，这就需要把握前端MVC框架应用的重要性，明确前端MVC框架的适用范围。在一些项目体系中，模型部分并不是很复杂，而传统的软件开发系统中，模型层代码最多，视图层相对较少，但是在互联网中，这种情况恰恰相反，因为模型层的复杂度不够，使用前端MVC框架就会显得有些大材小用，所以在前端MVC的使用范围要做好确定，必须要确定产品类型，对于页面型产品，可以使用一些基于服务器生成Web页面和视图，只需要借助一些简单的JavaScript和JQuery就能够实现互动性增强的方法，这时候JQuery的应用效果比较好，因此也就不需要进行前端MVC框架使用，而针对应用软件类的产品，就很需要应用软件产品前端MVC框架应用了[7]。例如在进行程序开发的过程中需要API或是服务器通讯，就需要借助相应的视图以及数据，将成熟的框架使用起来。

4  Web前端MVC框架发展方向（Development

direction of Web front-end MVC framework）

随着信息技术的不断发展，信息已经成为全世界发展的主流资源，互联网为信息交流更是提供了多种多样的渠道，进一步加速了信息交流和传播，在此背景下，Web前端MVC框架技术也在相关技术的发展推动下获得了自身的不断提升，Web前端MVC框架在互联网软件开发中的应用也越来越普遍，取得了一定的成效，目前，Web前端MVC框架也在积极探索和其他领域的合作，通过认证分析研究Web前端MVC框架的技术在数据处理、分析等方面的作用和效果，在软件和网页开发中，如何有效应用Web前端MVC框架等都需要进一步研究分析[8]。就Web前端MVC框架的发展趋势来看，体现了Web前端MVC框架和时代发展相协调的趋势，也体现了技术的进一步发展和完善。

在系统的软件开发和网页开发中，Web前端MVC框架发挥着关键作用，相对于以往的软件和网页开发工作来说，Web前端MVC框架在网页和软件的开发过程、操作流程、数据获取等方面都显得更加简单易操作，而且借助这种框架进行开发设计的软件和网页质量也更加可靠，此外，针对网页和软件开发，在进行静态接口的查询中，主要是采用HTML表单形式开展的，这就会导致在软件和网页的开发中，必须要遵循一定的规范要求，就会受到较多的限制。随着信息技术的快速发展，相关的核心技术也在进一步优化，Web前端MVC框架已经被广泛的应用到软件、网页的开发设计中了，成为软件开发程序员广泛使用的技术之一。不过，目前的Web前端MVC框架在进行软件和网页开发的过程中，存在的问题还是比较突出的，国内外相关技术研究人员和学者也在积极探究相关的技术障碍和缺陷问题，为Web前端MVC框架技术的进一步完善奠定了基础。

Web前端MVC框架实际上也属于一种语言环境，并通过在软件和网页开发中的应用，实现自身的不断完善。在进行Web前端MVC框架的相关研究中，一直将研究重点放在对于相关数据的整合和功能生成上。Web前端MVC框架应用过程中，软件开发人员需要对于相关的软件开发过程进行细致分析，在网页查询中，进行接口识别以及语言环境接触，针对黑名单和白名单的识别送礼用，能够为查询接口的效率提升提供有效参考和帮助，在进行查询接口的使用中，相关的框架语言环境也能够发挥积极作用。这对于今后软件和网页的开发能够发挥一定的促进作用。借助Web前端MVC框架进行软件构建，针对后台数据节进行梳理，才能获得更多的有价值的信息。在进行信息处理阶段，必须要做到将信息和数据作为处理的重点对象，例如，对于实体概念等进行处理的过程中，首先是使用HTML表单进行处理，再进行后台填充，最后通过有效查询来获得有用的信息，而在选择使用哪种形式进行表单填充、进行数据信息获取等方面，都需要针对Web前端MVC框架进行探究，也需要在进行Web前端MVC框架的开发中，进行相应的处理分析，才能有效提升语言环境的真实性。此外，Web前端MVC框架本身就属于软件开发中的操作步骤之一，对于相关的语言、数据等处理发挥着关键作用，对于网页开发和软件开发来说是一种新的技术发展领域。

近年来，软件开发行业发展火热，已经成为我国国民经济的重要支柱型产业，软件和网页开发应用，也是信息时代、网络时代发展的必然产物。开展Web前端MVC框架研究，对于进一步促进信息技术发展和互联网金融进步等都具有重要意义。针对Web前端MVC框架而言，相關数据获得、语言环境构建的有效性和准确性等都是进行Web前端MVC框架身份验证的重要依据，借助接口对于相关数据进行处理分析，能够为软件、网页开发研究提供更广阔的思路。例如，在进行Web前端MVC框架查询操作后，将静态和动态数据有效结合起来，能够实现更快的资源数据生成。在软件开发领域中能够发挥积极作用。随着社会的进步发展，中小企业都倾向于构建自己的网站，发挥企业的宣传作用，打响企业声誉、树立企业形象。这进一步推动了我国软件和网页开发行业的发展，要求相关软件和网页开发企业要加快提升自身的工作效率，还要不断提升软件和网页质量。在Web前端MVC框架技术逐渐走进软件、网页开发的过程中，相关的程序设计人员也将这一技术和相关的软件开发技术结合起来，实现相关技术的进一步融合和利用，实现了Web前端MVC框架技术流程的不断简化，为软件和网页开发提供了有效的技术选择。作为一种软件和网页开发新技术，Web前端MVC框架技术在目前的网页和软件开发中占据着重要地位，且随着该技术的进一步发展进步，Web前端MVC框架还在进一步完善中，将来Web前端MVC框架将在软件和网页开发中发挥更大的作用。

5   结论（Conclusion）

MVC概念最早是在桌面应用开发中使用的，这种设计模式强制性地将程序的输入、处理和输出分开，最典型的MVC就是JSP+servlet+javabean的模式：Jsp代表视图，也就是负责与用户进行交互，既向用户输出数据也接收用户输入;servlet代表控制，接收来自视图的请求、控制跳转和工作流;javabean代表模型，主要负责业务数据和业务逻辑处理。随着Asynchronous Javascript And XML（异步JavaScript和XML）的兴起、B/S模式应用程序的不断发展和web应用软件开发工作的进一步细分，MVC的应用可使整个WEB项目前端开发的清晰度、明朗性和可扩展性方面得到大大改善，尤其是对需工程化开发的大型项目MVC的应用更加必要。根据本文分析，Web前端MVC框架技术的应用优势比较突出，相关的技术发展也在进一步完善中，对此，开发和利用Web前端MVC框架技术对于提升软件和网页开发的工作效率具有积极意义，Web前端MVC框架技术的发展也将带动软件和网页开发技术走向一个崭新的高度。

参考文献（References）

[1] Yingan Shao.Research on the reform of Web front-end courses based on Internet+Mode[A].Institute of Management Science and Industrial Engineering.Proceedings of 2018 3rd International Conference on Education，Sports，Arts and Management Engineering[C].Institute of Management Science and Industrial Engineering，2018（5）：180-184.

[2] Gunawan Gunawan，Armin Lawi，Adnan Adnan.Analisis Arsitektur Aplikasi Web Menggunakan Model View Controller（MVC）pada Framework Java Server Faces[J].Scientific Journal of Informatics，2016，3（1）：24-28.

[3] Jia-ying WANG.The Design and Application of Front End MVVC Framework Based on Management Platform[A].Science And Engineering Research Center.Proceedings of 2016 International Conference on Electrical Engineering and Automation[C].Science And Engineering Research Center，2016（5）：486-490.

[4] 于春娜，王晨升，杨光，等.Web前端MVC框架的意义研究[J].产业与科技论坛，2014，13（01）：52-53.

[5] 霍福华，尹宇孚.基于J2EE架构的五层Web开发模型研究[J].通讯世界，2017（01）：225-226.

[6] 乔淑夷.基于MVC模式的Web前端框架关键技术研究与实现[D].中國海洋大学，2014.

[7] 牟凤瑞，刘志军.面向对象软件设计中的MVC框架及面向对象编程应注意的问题[J].沧州师范专科学校学报，2007     （02）：36-37.

[8] 苗洁.基于EasyUI框架与Spring MVC框架的权限管理系统的设计与实现[J].电脑知识与技术，2015，11（15）：53-55.

作者简介：

霍福华（1984-），男，硕士，讲师.研究领域：WEB应用开发，数据分析与处理.