《组件化WEB前端架构设计与实现.docx》由会员分享，可在线阅读，更多相关《组件化WEB前端架构设计与实现.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、组件化WEB前端架构设计与实现 王萌田杨李宁宁来源：电脑知识与技术2018年第30期摘要：随着科技的开展，Web环境的不断更新，人们对前端的要求也在不断提高，用户已 经不再满足于页面的功能性实现，对页面的美观度也有着强烈的要求。从事前端开发的过程 中，我们也根据业务和需求的不断变化，不断深入研究如何快捷便捷的从事前端开发工作。从 工程中积累沉淀出一套适合组件化前端框架。该框架有低耦合，高复用，高效等特性，学习成 本低，开发效率高的优点。关键词：前端；组件化；架构中图分类号：TP393文献标识码：A文章编号：1009-3044 (2018) 30-0077-031概述现今人们对美观度的要求越来越
2、高，用户对系统的要求也在不断地提高，不止要满足性能 的需求，对页面的美观度的要求也在逐渐提升，这就导致页面展示越来越重要。如何满足用户 对系统的需求？如何让页面更好地展示在用户面前？如何快速高效开发等等一系列的问题也应 运而生。在前端人员越来越多人员分布越来越广，工程的复杂度越来越高，要求越来越严格的情况 下。前端的开发难度在逐年提高，所以前端团队开发的形式越来越具体化。如何从繁重的工作 中解脱自己，并提高开发效率和质量一直是前端人员所追求，所以营运而生组件化开发，对于 组件化开发不只是后台专利，前端也有组件化。无论是前端还是后台，都是整个软件体系的组成局部。软件产品也是产品，既然是产品就 有
3、它应用的场景，使用的地方时，有它产生的目的性。而这最大的目的性就是创造剩余价值， 追逐利润的极致，本钱是软件产品必须要面的实质性问题，降低本钱提高开发效率是一条必经 之路。提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代 价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是每一次做新产品都可以 利用已有的东西，那就会好很多怎样才能戒少变更代价呢？如果我们能够理清模块之间的关 系，合理分层，每次变更只需要修改其中某个局部，甚至不需要修改代码，仅仅是改变配置就 可以，那就更好了“1。工程化、模块化、组件化生产这些概念并不是仅存在于软件开发中，例如汽车制作行业，
4、 通过流水式操作完成一整辆汽车的拼装工作，小道螺丝，大到整个车体车架都是分批给各个不 同的部门或是厂商去制作，也有专门的地方去拼装整部汽车。这样在无形中我们将制造效率提 高，在生产过程中或是使用过程中的，我们可以从一个厂商购入相同型号的组件，使用到类似 的型号的汽车拼装，这样也提高了组件的使用率。软件产品的开发也追寻着类似的开发方式， 讲软件解耦分成不同的组件，组件结合成模块，模块和模块拼装成产品，行程一整套工程化的 作业方式。提高开发的效率也提高组件的复用率，使开发更加简便化也更好的控制对代码质量 产品质量的检测。因为同一后有同一的标准我们就有一套可以衡量的标准这样也可以提高检测 速度和质量
5、，从而降低本钱，提高利润的生成。2背景前端初期给开发人员的印象是入门简单门槛低，只需要会使用himl、js、css会Ps基本就 是个合格的前端开发人员，但是随着前端技术的不断开展对前端人员的要求也在逐渐地提升。 WEB的开展史：I 1989出现web原型；I 1990年出现浏览器原型；1 1994年HTML2规范公布；1 1995年脚本语言的出现；1 1997 年 ECMAScripl 规范公布；12000年浏览器的第一次战争。Web开展的初期：从诞生到2005年都是以前请厚重的模式展示给大家的，直到ajax的出 现与兴起逐步促进Web2.0时代的开展。1 2008年迎来浏览器的第二次革命，兼
6、容性的前端要求也随之而来。1 1994 年 W3C 发布 HTML4.0 标准；I 2004-2008年HTML5的演化到正式发布；I 2009 年 Node.js 诞生；1201()年MV*框架的兴起；I 2009-2017移动端的快速开展。前端的开展在不断地刷新这人的认知，从基础技能的更新，框架的变革，浏览器之间的竞 争都无处不在的提醒这人们前端崛起是必然趋势。从事前端开发人员也在逐年增加，开发人员 的追求的极致已经不是如何去实习功能，如何去还原设计图，人们把质量和效率提上了日程。 前端工程化是早起的思想，它是一种思想而非一种技术，它可以深入到工程的各个方向中。与 模块化的程序设计思想类似
7、，前端模块化开发的基本思想是在Web上以模块作为基本单位， 对相关代码等进行组织和划分，各个模块相互独立，负责各自特定的功能12。前端工程化就是用工程思维方式来设计和开发自己的工程，是高层次的思想，前端模块化 是更加具体化的实施方案，模块简单说就是运用技术实现具体的一系列功能的页面的组合。什 么是组件？组件就是页面上一些小的组成，通过不同的组合拼装成一个完整的页面，当需要的 时候添加进来，当不需要的时候随时修改或是删除。组件之间是自有组合的，组件化将页面视 为一个容器，页面上各个独立局部例如：头部、导航、焦点图、侧边栏、底部等视为独立组 件，不同的页面根据内容的需要，去盛放相关组件即可组成完整
8、的页面1。组件有良好的复 用性可以重复使用在不同页面中，通过小的改变也可以变化成拥有不同功能的模块页面。3需求分析与设计在汽车行业中也有不少的系统网站和应用程序，根据不同的需求产生了许多产品的原型。 对现有产品调研整理后发现虽然有成型的产品但是使用的技术是分散的，使用的方法是参差不 齐的，没有统一的开发标准、统一的检测标准，在后期维护中遇到许多问题，技术部统一要求 维护人员掌握的技术要全面化，提高人员本钱。检测标准的不统一使得产品出来后在不同的环 境下展现出不同的效果，出现的问题也是层出不穷，降低了用户的体验度，也让局部用户对我 们的产品失去了信心。所以我们现在急需一整套的解决方案去改变现有的
9、状况，在多方调研中 我们发现使用组件化的开发方式可以有效地解决现在面临的问题。在软件产品上解耦合，前后台别离开发，采用组件化开发的方式，统一开发标准框架，统 一的框架规范，统一检测标准。通过mv*的方式进行工程的开发，将前端的开发本钱降低，提 高开发的效率。分析其他系统的功能和现有工程的框架，梳理出以下几个问题：首先，开发环境的选取。分析企业的应用环境，企业对视觉、功能的要求范围，开发工期 的范围，开发人员的配置等。部署的环境是在什么样的操作系统下进行？是否可以联网？部署 的端口是否有要求等。其次，组件内容。我们所提供的组件应该包括哪些内容，通过组件是否可以完成简单的页 面开。组件的性质可划分
10、为：业务组件，功能组件。功能组件为基础，加入一定的业务需求后 演变成业务组件。从已有工程中分析得来的在以后的使用中也有一定的比例所以我们也可以称 其为共性组件（通用组件）。再次，组件之间通讯，工程中使用前后台别离的方式开发，通过Ajax进行与后台的交 互，采用Json格式的数据传输方式。组件通过Js和html的之间的构建类完成相互的结合。整理以上问题内容，应设计组件开发内容清单和适用的开发环境情况，以及交互方式制定 一套具体的开发标准和开发规范。根据不同的内容可以组合成不同的页面。对现有汽车企业对浏览器的应用分析得出结论：正8+的浏览器支持，已内网访问位主局部 有外网访问，部署环境系统涉及li
11、nux/windows/slorais操作系统。随着时代的进步对界面的要 求也从单纯的功能性操作提高到界面美观的高度。4设计与实现对于前端组件化框架的设计，思想如下：1）列出工程中高频涉及的功能组件和业务组件进行封装，让其可以单独使用运行，组件 与组件直接无直接联系。组件的复用性和可移植性能提高组件在不同场景下使用,解耦合是软 件开发的性能提升的关键，所以组件化开发每个组件都可以单独运行，不受其他组件的影响这 样在后期的拼装过程中才能更好地应用。根据组件的功能列出相应的Dem。案例可以参考，同 时配有文字性注释辅助开发人员的使用。2）列出系统开发的基本框架所包含的模块，根据模块内容指定可以应用
12、的组件信息，也 模块的功能也提现约束组件的特性，如大小、展示形式、加载方式等等。每个模块都可以称之 为一个系统，模块和模块之间通过协议和数据进行链接，它们之间没有必要的联系，分开后可 以使用在不同的系统中，合并在一起又能组成不同的模块。根据不同的组成方式又需要不同组 件去填充。3）拼装组合组件，根据组件的使用说明和模块的性质完成组件的拼装。通过快速的组件 拼装最后形成一个完整的页面，通过页面的充实完成整个系统的开发。首先，统一框架根据企业应用场景的分析，我们采用Jquery的开发框架进行前端开发，采 用webpack的方式进行前端构建和打包压缩等。采用Ajax的Json传输方式，通过Nginx
13、的应 用辅助进行页面的跳转和图片等的处理。对页面的样式标准参考多个流行中UI规范制定了有 自己特色的UI设计规范内容，并制定了三套主题分别是以蓝色为主、绿色、暗色为辅的页面 主题参考标准。其次，构建一套特有的组件库，包括功能性组件和业务性组件，通过组件库的内容可快速 拼装出的页面。实际应用中代码如下：样式引入方式：脚本引入方式：页面中应用：角色名称：再次，根据Ajax的使用进行前后台的数据交互，判断数据交互的结果是否正确，验证数 据的真实性，根据返回的结果展示不同的页面信息。Sajax (url ： addr + /api/sys/user ? _ts=+ new Data () .getTi
14、ine (),type ： POST,data ： JSON.stringify (params),contcntTypc ： application/json ； charsct=UTF-8,success ： function (response) if (response.ok) refresh Data ()；laycr.closcAll ()；layer.msg (成功! ,)； else layer.msg (response.message)；).error ： function (response) layer.closeAll ()；layer.msg (失败! ,)；)；最
15、后，根据前端规范通过JsLini的应用对代码进行扫描，当全部通过后再进行代码压缩打 包工作。代码打包通过WebPack工具进行打包处理，在最后的部署环境下运用的合并压缩后 的打包程序，减少页面的请求提高加载速度。根据汽车企业在公司内部规定使用的内部网络， 缺少外网链接在此组件化开发框架中并没有使用CDN方式加载页面引入信息。此组件化开发 框架面向的是汽车企业的内部管理系统的开发和应用，同时也适用于其他行业的开发，在后期 继续完善组件开发功能下，我们还将致力于可视化组件的研究更好的完善此框架的内容。5总结目前前端模块化和组件化的标准只是停留在初步阶段，由于缺少官方标准，各大公司的主 流框架都用自
16、己的方式实现组件化|3。我们也尝试在根据汽车企业行业的特殊性，开发出自 己的一套前端组件化框架应用。根据其兼容性的要求我们采用jQucry框架作为辅助开发框 架，在开始使用jQuery之前，必须将上(9库添加到工程中4。这是我们在使用中必须要注 意的应用规范。我们将组件化根据模块划分又形成了局部的业务组件，组件化的开发在实际应 用中，真实地提高了我们开发效率，运用组件化开发是现在前端开展的趋势，同时在完善组件 化开发的基础上，我们也进一步地将框架其提升为组件化可视化的操作，企业及开发更简便， 更快捷。一定程度上降低开发本钱提高开发效率，提高软件产品的利润。参考文献：肖慧明.网站前端模块化开发策略研究IJI.数字技术与应用，2018. 36 (3).2黄江宁.基于Webcomponenis标准的前端工程组件化的改进研究J.电子技术与软件工 程，2016 (22).3刘汀.基于jQuery的Web前端组件的应用研究J.无线互联科技，2017 (21).【通联编辑：朱珍贵】