基于Web components标准的前端工程组件化的改进研究

摘 要

随着互联网的普及，网速的提升，浏览器性能的提高，前端技术的迅速发展，出现了各式各样的前端组件，在这样的环境下，W3C提出了Web components 标准。本文首先对W3C的Web components标准进行了阐述，并对前端工程的组件化发展问题进行了分析，最后应用Web components 标准提出了一种新的前端工程组件化方案，提高了前端的开发效率，增强了Web应用的可维护性和扩展性。

【关键词】Web components标准 前端工程 组件化

互联网的发展给我们的生活带来了翻天覆地的变化，无论是购物、娱乐、学习还是办公，人们对互联网的依赖性越来越大。目前前端模块化和组件化的标准只是停留在初步阶段，由于缺少官方标准，各大公司的主流框架都用自己的方式实现组件化。但是每个框架之间实现的方式不同，就导致框架之间的组件不能复用，如何制定一个通用的组件化标准并将其应用是整个前端工程发展的一个难题。W3C提出的Web components 标准为解决这一问题提供了良好的契机。

1 Web components 标准及其发展

Web组件实际上是一种可被重用的构件，它是由谷歌工程师开发，在生产标准和W3C规范下，可以在Web程序和文档中创建它。其核心目标就是将Web应用程序的开发进行革新，使之以软件工程模式来进行组件开发。在该组件中可进行封装，同时也能够对HTML元素进行操作。另外Firefox等浏览器则可以通过手工设置来对Web组件技术给予支持。而IE浏览器对Web组件技术的支持度方面则相对较低。Web组件的核心就是将有关UI元素进行组件封装，也就是将JS、HTML以及CSS等进行封装。在应用时只需要调用这个组件对象就可以实现，而不需要导出粘贴相应的源码。通常，这个组件实际上就是一种模板，所涉及到的元素包括了模板（template），Shadow DOM，导入以及自定义元素。

2 目前前端工程的发展与问题

2.1 前端工程初期

1994年在PHP技术出现之后，可以将数据转化成HTML模板，并进行渲染。两年后，W3C组织正式推出CSS1.0规范。在此规范下，可以支持开发者能够利用外联文件模式对之前的HTML样式进行修改，而之前要进行修改，需要在对应的HTML网页上进行修改，这样维护就变得简单，页面也会更加简洁，此时HTML和CSS以及模板语言这三个技术的融合开始得到广泛应用。在技术的支持下，一些后台也能够通过HTML来实现。之前的Web也从最初的展示工具蜕变成Web App，此后利用脚本语言进行Web开发已经成为趋势。

2.2 Web2.0时期

2005年之后，异步的Java Script与XML技术（ajax）的出现彻底改变了javascript的地位。在ajax出现之前，前端后端之间的沟通需要提交表单，并且网页需要跳转。ajax通过javascript就可以在浏览器内随时与后端进行连接，用户基本上感觉不到页面的变化。不仅浏览器和服务器的交流大大降低，客户端也可以更快速的响应并且返回数据。

2.3 工程化前端时期

在这个阶段，前台和后台的功能开始变得十分明确，它们之间的交互主要是基于相应的接口来实现，只要对接口的规格进行规范，就能够将前台和后台进行分离。在前台，可以通过字段来研发相应的接口，确保录入的数据具有正确性。当后台开发成功之后，就能够进行统一测试。然而随着网络业务的丰富，所需的功能也开始增多，这种开发模式的优势就很难体现，即使是一个单页面程序，在复杂交互环境下，代码也变得十分的庞大。为了改变这种境况，在前台开始出现了基于MVC架构设计的前端框架，在此框架的支持下，前台的功能可以变得更加丰富，代码规模也以几何倍数进行增长。于是对应的模块化概念开始出现，当时AMD和CMD这两个模块化规范较为成熟，它们的关键思想就在于在开发前台代码时，引入模块化的设计思路。

3 基于Web components标准的前端工程组件化的改进

3.1 改进的组件化框架介绍

目前改进框架的方式有两种：

（1）提前自定义组件命名规范，然后再结合该规范进行开发。在框架渲染环节，所匹配的标签也要根据之前定义的命名规范进行，如果匹配成功就可以进行渲染。

（2）不限制标签名称，开发人员能够结合自身所需将标签名改成自己熟悉的样式，比如分割线、驼峰等。不过这些标签需要有一个自定义环节，也就是将其自定义成相应的组件。综合对比上述两种方式可知，在自定义组件的优化方面，这两种方式存在着各自的利弊，都没有充分遵循W3C模式。这就意味着需要开发一套能够融合这两种方案优势的一种新框架。目前Web组件标准虽然能够提供相应的接口，可在浏览器上支持用户自定义的一些元素，然而依然存在着一定的兼容性问题。Polymer通过Polyfill技术对老旧浏览器进行的修补，通过这些修补使之能够支持新浏览器的特性。而Polymer在运行时，一旦涉及到element解析共组，就会对整体性能产生负面影响，另外对浏览器的支持，尤其是手机的支持都存在很大缺陷，在某些品牌的手机上，甚至不能够使用。而本次通过对框架进行优化设计，可为设计者提供一些自定义的元素，从而更好的解决上述的一些兼容性问题。本文利用W3C所提供的标准规范，以及使用JS算法在底层对该组件进行封装，然后利用标签来引入框架并在容器中创建相应的Dom元素。

3.2 改进的组件化框架工作原理

此优化之后的框架实际上就是一种MVVC结构程序，整个程序从最上层分为两部分：

（1）全局设计。主要涉及到全局性接口以及默认参数等；

（2）元素实例。涉及到实例的初始化和各种接口的设计。

如图1所示，在实例化时，其核心就是将模型和视图进行融合，该思路显然和MVVC框架设计思路一致，主要工作包括：第一，对data进行监听，可通过Obsever来实现，能实施察觉数据项的变化。第二，将Template进行解析处理，使之成为Document Fragment，接着在对directive进行解析，并获取依赖它的一些数据项和更新策略。第三，基于Watcher将上述两个环节进行融合，就能够获得依赖Directive的数据项变化情况，一旦有数据变化，那么Observer就能侦测到，然后触发视图更新，进而实现关联性。

在此框架中涉及到的流程则是元素的加载、注册、更新和销毁。

（1）加载：通过对class进行遍历，查看相应的element元素，然后调用create方法，将子元素和标签类型等参数传入。

（2）注册：执行createElementClass方法，于是就能够产生elementClass，该元素可备用。

（3）更新：当数据和模型产生变化时，能够迅速的从视图中进行反馈，此时可以对DOM进行操作，而它的频繁操作也会对最终的性能产生负面影响。

（4）销毁：只需要从根节点上切断需要删除的元素实例即可。

3.3 改进的组件化框架编译原理

框架并不可独立运行，只有在编译之后，形成相应的构造函数才能够运行。通过编译工具，可以很好的提升前台程序的性能，并能够很好的进行资源加载，这里的加载内容涉及到同步、异步和预加载以及合并、内嵌等，另外还包括规范的开发、代码的部署和模块化、自动化工具的开发等。在编译框架时，首先要对html文件进行分析，查看是否存在着自定义Element，如果发现了存在着这些元素，就需要从对应文件中提取template和style以及script等。然后对style部分进行封装处理，或者进行less编译，生成新的样式文件。对template文件进行分析，查看它是否存在着依赖元素，然后将其转换成js代码。而在Script环节，则可以将之前模板中编译出来的function append文件进行装载。如果没有发现element，那么该文件就是一个依赖link 的文件，并将其进行标记。

4 结论

本文从W3C的Web components标准入手，设计了一种高性能，敏捷开发，易维护的开发方案。这个方案封装了Web components标准，但不是单纯的封装，而是将浏览器的兼容性以及虚拟DOM渲染的性能考虑在内，实现了一种浏览器兼容性更强，书写方式和代码结构更加标准，数据绑定视图和模型的前端框架。

参考文献

[1]王政.Web前端开发技术以及优化研究[J].电脑知识与技术，2013（22）.

[2]魏娜.Web前端开发技术研究[J].现代计算机（专业版），2011（29）.

[3]Yukui Fei，Jijun Zhang，Hongmei Zhu.Research on Self-Adaptation of Web components Based on Interface Automata.ShanDong Agri.Univ.TaiAn 271018；P.R.China Proceedings of 2007 International Symposium on Distributed Computing and Applications to Business， Engineering and Science（Volume Ⅱ），2010（07）.

作者简介

黄江宁（1989-），男，江苏省人。现为同济大学在读硕士。主要研究方向为软件工程Web开发。

作者单位

同济大学 上海市 201804