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

基于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组件标准