基于软件工程的Web前端开发技术

董悦 孙博宇

摘要：随着现代技术的发展，人们对于任何事物在看重实用性能的同时，也越来越重视自我的体验，比如当前流行的互联网企业，除了要有出色的性能和实用性，还要有良好的界面、客户体验，这样才能吸引人。只有做好前端技术、客户体验，一切才有可能。本文主要研究了软件工程的web前端开发。

关键词：软件工程；web前端开发；现状分析；前景展望

一、web前端开发面临的问题

自2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。

互联网的自诞生以来就在不断的飞速发展中，与之相应的各种互联网技术层出不穷。当今的社会中，Web已经渗透到了各个行业中，成为日常生活中重要的组成部分。Web工程可以将传统的信息和数据库系统搬到Internet上，拓展了信息交互的手段。然而Web系统的开发流程却面临着很多问题，比如缺少严格和系统的方法。目前Web开发还是主要凭借开发者的经验积累，然而复杂的Web系统很难依靠个人的经验独立完成。即时费时费力的开发出来一套系统，又因为缺少系统方法，不同系统间相差太大，可移植性和参考性很差，导致重复开发，资源的浪费。

二、Web开发方法应具备的特性

成熟的Web开发方法，应当是整体化的Web应用开发流程。我们知道，系统化、整体化的好处是可以提高开发效率和质量。Web开发方法要易于掌握，因为开发方法的设计初衷是为了降低开发者的工作量，因此开发方法应当易学易懂。但Web开发方法还是应当可以將Web程序的各方面描述清楚，达到表达能力和难度的平衡。与此同时，Web设计方法还应当借鉴常见的开发语言和技术特点，使得开发者更快更好的适应。

Web开发方法还应当具有对复杂系统建模的能力。Web应用可以使用的范围非常广泛，因此大量的传统信息和数据库系统都进行了Web移植。这些应用都具有不同的、复杂的功能，开发方法应当适用于该类需求，应当具有对商业过程、工作流建模的能力。Web开发方法还应当具有表现层建模的能力，这一点在传统设计方法中尝尝忽略。界面是和用户交流的接口，因此需要非常重视界面的表达能力，丰富的界面表达将使得系统更人性化，并将系统的信息完整的表达出来。Web开发方法还应能在较高的抽象层次上表达系统和资源的集成方法。因为新的系统可能要与原有系统相结合，而原有系统的开发语言则种类繁多，开发方法要能适应这种情况。另外，还要保障接口的标准性，从而便利开发出的系统和资源与数据库相连接。

三、web前端开发方法研究

随着Web技术的飞速发展，越来越多的人注意到Web开发的重要性，因此很多Web开发方法被研究出来。现今Web应用开发方法具有一些共性的特点，比如将Web系统模型分为领域模型、导航模型和展示模型，然后经过概念建模、逻辑建模、物理建模和实现四个过程完成Web 系统开发。这四个过程中，领域模型只用来描述Web应用中领域对象的。展示模型用于描述Web页面的展示形式，是导航对象和导航行为的最终体现。导航模型是Web模型不同于传统的重要部分，它用于描述Web应用的导航特性，用于连接领域模型和展示模型。

Web前端开发技术包括三个要素：HTML、CSS和JavaScript，随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。随着时代的发展，前端开发技术的三要素也演变成为现今的：html5，css3，jquery。

四、web前端开发核心技术

1.HTML语言

掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。

2.CSS与JavaScript

学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

3.操作系统与网络服务器

了解Unix和Linux的基本知识，对于开发人员有益无害。Web服务器，包括对Apache的基本配置，htaccess配置技巧的掌握等。

五、结束语

目前Web开发方法主要还是存在方法复杂的问题。Web开发方法研究者仅根据自己的领域，而没有考虑到多领域的融合问题。另外，尽管Web开发方法提供表现层建模，但多数方法在该方面过于简单，没有体现出设计细节。而模型间缺少清楚和灵活的映射，这也使得层间的连接非常的贫瘠。总的来说，目前的在规范化角度做得很好，但在工程化的方面还很欠缺，所以在未来的研究中，应当令Web系统研究方法更具工程化的特性。

参考文献：

[1] 前端技术.腾讯网.2018-01-20.

[2] HTML5能否挑战移动终端OS.中华人民共和国工业和信息化部2018-08-29.

[3] 前端开发大盘点：2015最流行前端框架TOP20.网易 2018-08-28.

[4] web前端开发工程师职责.人民网.2011年11月29日.

作者简介：

第一作者：董悦，女，辽宁朝阳，本科，就读于辽东学院信息工程学院信息管理与信息系统专业B1701班，学号：0911417018，研究方向：web前段开发。

第二作者：孙博宇，男，辽宁大连，本科，就读于辽东学院信息工程学院计算机科学与技术专业b1506班，学号：0917150610，研究方向：web前端开发。