组件化WEB前端架构设计与实现

王萌 田杨 李宁宁

摘要：随着科技的发展，Web环境的不断更新，人们对前端的要求也在不断提高，用户已经不再满足于页面的功能性实现，对页面的美观度也有着强烈的要求。从事前端开发的过程中，我们也根据业务和需求的不断变化，不断深入研究如何快捷便捷的从事前端开发工作。从项目中积累沉淀出一套适合组件化前端框架。该框架有低耦合，高复用，高效等特性，学习成本低，开发效率高的优点。

关键词：前端；组件化；架构

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）30-0077-03

1 概述

现今人们对美观度的要求越来越高，用户对系统的要求也在不断地提高，不止要满足性能的需求，对页面的美观度的要求也在逐渐提升，这就导致页面展示越来越重要。如何满足用户对系统的需求？如何让页面更好地展示在用户面前？如何快速高效开发等等一系列的问题也应运而生。

在前端人员越来越多人员分布越来越广，项目的复杂度越来越高，要求越来越严格的情况下。前端的开发难度在逐年提高，所以前端团队开发的形式越来越具体化。如何从繁重的工作中解脱自己，并提高开发效率和质量一直是前端人员所追求，所以营运而生组件化开发，对于组件化开发不只是后台专利，前端也有组件化。

无论是前端还是后台，都是整个软件体系的组成部分。软件产品也是产品，既然是产品就有它应用的场景，使用的地方时，有它产生的目的性。而这最大的目的性就是创造剩余价值，追逐利润的极致，成本是软件产品必须要面的实质性问题，降低成本提高开发效率是一条必经之路。

提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是每一次做新产品都可以利用已有的东西，那就会好很多。怎样才能减少变更代价呢？如果我们能够理清模块之间的关系，合理分层，每次变更只需要修改其中某个部分，甚至不需要修改代码，仅仅是改变配置就可以，那就更好了[1]。

工程化、模块化、组件化生产这些概念并不是仅存在于软件开发中，例如汽车制作行业，通过流水式操作完成一整辆汽车的拼装工作，小道螺丝，大到整个车体车架都是分批给各个不同的部门或是厂商去制作，也有专门的地方去拼装整部汽车。这样在无形中我们将制造效率提高，在生产过程中或是使用过程中的，我们可以从一个厂商购入相同型号的组件，使用到类似的型号的汽车拼装，这样也提高了组件的使用率。软件产品的开发也追寻着类似的开发方式，讲软件解耦分成不同的组件，组件结合成模块，模块和模块拼装成产品，行程一整套工程化的作业方式。提高开发的效率也提高组件的复用率，使开发更加简便化也更好的控制对代码质量产品质量的检测。因为同一后有同一的标准我们就有一套可以衡量的标准这样也可以提高检测速度和质量，从而降低成本，提高利润的生成。

2 背景

前端初期给开发人员的印象是入门简单门槛低，只需要会使用html、js、css会Ps基本就是个合格的前端开发人员，但是隨着前端技术的不断发展对前端人员的要求也在逐渐地提升。WEB的发展史：

l 1989出现web原型；

l 1990年出现浏览器原型；

l 1994年HTML2规范公布；

l 1995年脚本语言的出现；

l 1997年ECMAScript规范公布；

l 2000年浏览器的第一次战争。

Web发展的初期：从诞生到2005年都是以前请厚重的模式展示给大家的，直到ajax的出现与兴起逐步促进Web2.0时代的发展。

l 2008年迎来浏览器的第二次革命，兼容性的前端要求也随之而来。

l 1994年W3C发布HTML4.0标准；

l 2004-2008年HTML5的演化到正式发布；

l 2009年Node.js诞生；

l 2010年MV*框架的兴起；

l 2009-2017移动端的快速发展。

前端的发展在不断地刷新这人的认知，从基础技能的更新，框架的变革，浏览器之间的竞争都无处不在的提醒这人们前端崛起是必然趋势。从事前端开发人员也在逐年增加，开发人员的追求的极致已经不是如何去实习功能，如何去还原设计图，人们把质量和效率提上了日程。前端工程化是早起的思想，它是一种思想而非一种技术，它可以深入到项目的各个方向中。与模块化的程序设计思想类似，前端模块化开发的基本思想是在Web上以模块作为基本单位，对相关代码等进行组织和划分，各个模块相互独立，负责各自特定的功能[2]。

前端工程化就是用工程思维方式来设计和开发自己的项目，是高层次的思想，前端模块化是更加具体化的实施方案，模块简单说就是运用技术实现具体的一系列功能的页面的组合。什么是组件？组件就是页面上一些小的组成，通过不同的组合拼装成一个完整的页面，当需要的时候添加进来，当不需要的时候随时修改或是删除。组件之间是自有组合的，组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面[1]。组件有良好的复用性可以重复使用在不同页面中，通过小的改变也可以变化成拥有不同功能的模块页面。

3 需求分析与设计

在汽车行业中也有不少的系统网站和应用程序，根据不同的需求产生了许多产品的原型。对现有产品调研整理后发现虽然有成型的产品但是使用的技术是分散的，使用的方法是参差不齐的，没有统一的开发标准、统一的检测标准，在后期维护中遇到许多问题，技术部统一要求维护人员掌握的技术要全面化，提高人员成本。检测标准的不统一使得产品出来后在不同的环境下展现出不同的效果，出现的问题也是层出不穷，降低了用户的体验度，也让部分用户对我们的产品失去了信心。所以我们现在急需一整套的解决方案去改变现有的状况，在多方调研中我们发现使用组件化的开发方式可以有效地解决现在面临的问题。

在软件产品上解耦合，前后台分离开发，采用组件化开发的方式，统一开发标准框架，统一的框架规范，统一检测标准。通过mv*的方式进行项目的开发，将前端的开发成本降低，提高开发的效率。

分析其他系统的功能和现有项目的框架，梳理出以下几个问题：

首先，开发环境的选取。分析企业的应用环境，企业对视觉、功能的要求范围，开发工期的范围，开发人员的配置等。部署的环境是在什么样的操作系统下进行？是否可以联网？部署的端口是否有要求等。

其次，组件内容。我们所提供的组件应该包括哪些内容，通过组件是否可以完成简单的页面开。组件的性质可划分为：业务组件，功能组件。功能组件为基础，加入一定的业务需求后演变成业务组件。从已有项目中分析得来的在以后的使用中也有一定的比例所以我们也可以称其为共性组件（通用组件）。

再次，组件之间通讯，项目中使用前后台分离的方式开发，通过Ajax进行与后台的交互，采用Json格式的数据传输方式。组件通过Js和html的之间的构建类完成相互的结合。

整理以上问题内容，应设计组件开发内容清单和适用的开发环境情况，以及交互方式制定一套具体的开发标准和开发规范。根据不同的内容可以组合成不同的页面。

对现有汽车企业对浏览器的应用分析得出结论：IE8+的浏览器支持，已内网访问位主部分有外网访问，部署环境系统涉及linux/windows/ slorais操作系统。随着时代的进步对界面的要求也从单纯的功能性操作提高到界面美观的高度。

4 设计与实现

对于前端组件化框架的设计，思想如下：

1）列出项目中高频涉及的功能组件和业务组件进行封装，让其可以单独使用运行，组件与组件直接无直接联系。组件的复用性和可移植性能提高组件在不同场景下使用，解耦合是软件开发的性能提升的关键，所以组件化开发每个组件都可以单独运行，不受其他组件的影响这样在后期的拼装过程中才能更好地应用。根据组件的功能列出相应的Demo案例可以参考，同时配有文字性注释辅助开发人员的使用。

2）列出系统开发的基本框架所包含的模块，根据模块内容指定可以应用的组件信息，也模块的功能也提现约束组件的特性，如大小、展示形式、加载方式等等。每个模块都可以称之为一个系统，模块和模块之间通过协议和数据进行链接，它们之间没有必要的联系，分开后可以使用在不同的系统中，合并在一起又能组成不同的模块。根据不同的组成方式又需要不同组件去填充。

3）拼装组合组件，根据组件的使用说明和模块的性质完成组件的拼装。通过快速的组件拼装最后形成一个完整的页面，通过页面的充实完成整个系统的开发。

首先，统一框架根据企业应用场景的分析，我们采用Jquery的开发框架进行前端开发，采用webpack的方式进行前端构建和打包压缩等。采用Ajax的Json传输方式，通过Nginx的应用辅助进行页面的跳转和图片等的处理。对页面的样式標准参考多个流行中UI规范制定了有自己特色的UI设计规范内容，并制定了三套主题分别是以蓝色为主、绿色、暗色为辅的页面主题参考标准。

其次，构建一套特有的组件库，包括功能性组件和业务性组件，通过组件库的内容可快速拼装出的页面。实际应用中代码如下：

样式引入方式：

脚本引入方式：

页面中应用：

角色名称：

再次，根据Ajax的使用进行前后台的数据交互，判断数据交互的结果是否正确，验证数据的真实性，根据返回的结果展示不同的页面信息。

$.ajax（{

url： addr + "/api/sys/user？_ts="+ new Data（）.getTime（），

type： 'POST'，

data： JSON.stringify（params），

contentType： "application/json； charset=UTF-8"，

success： function （response） {

if （response.ok） {

refreshData（）；

layer.closeAll（）；

layer.msg（'成功！'）；

} else {

layer.msg（response.message）；

}

}，

error： function （response） {

layer.closeAll（）；

layer.msg（'失败！'）；

}

}）；

最后，根据前端规范通过JsLint的应用对代码进行扫描，当全部通过后再进行代码压缩打包工作。代码打包通过WebPack工具进行打包处理，在最后的部署环境下运用的合并压缩后的打包程序，减少页面的请求提高加载速度。根据汽车企业在公司内部规定使用的内部网络，缺少外网链接在此组件化开发框架中并没有使用CDN方式加载页面引入信息。此组件化开发框架面向的是汽车企业的内部管理系统的开发和应用，同时也适用于其他行业的开发，在后期继续完善组件开发功能下，我们还将致力于可视化组件的研究更好的完善此框架的內容。

5 总结

目前前端模块化和组件化的标准只是停留在初步阶段，由于缺少官方标准，各大公司的主流框架都用自己的方式实现组件化[3]。我们也尝试在根据汽车企业行业的特殊性，开发出自己的一套前端组件化框架应用。根据其兼容性的要求我们采用jQuery框架作为辅助开发框架，在开始使用jQuery之前，必须将jQuery库添加到项目中[4]。这是我们在使用中必须要注意的应用规范。我们将组件化根据模块划分又形成了部分的业务组件，组件化的开发在实际应用中，真实地提高了我们开发效率，运用组件化开发是现在前端发展的趋势，同时在完善组件化开发的基础上，我们也进一步地将框架其提升为组件化可视化的操作，企业及开发更简便，更快捷。一定程度上降低开发成本提高开发效率，提高软件产品的利润。

参考文献：

[1] 肖慧明.网站前端模块化开发策略研究[J].数字技术与应用，2018，36（3）.

[2] 黄江宁.基于Webcomponents标准的前端工程组件化的改进研究[J].电子技术与软件工程，2016（22）.

[3] 刘汀.基于jQuery的Web前端组件的应用研究[J].无线互联科技，2017（21）.

【通联编辑：朱宝贵】