Web前端工程组件化分析与改进

马康

中煤航测遥感集团有限公司,陕西,西安,710199

【摘要】随着互联网的普及、网速的不断提高及web环境的发展和更新，人们对前端的要求不再仅满足于页面数据的展示，对于页面美观度、功能性以及页面性能等方面的考量也有了更高的要求。随着web应用场景的丰富、前后端分离的web工程开发模式的逐渐兴起、Nodejs的诞生及在工程中的逐步应用，前端工程的开发形式发生了翻天覆地的变化，其中以webpack为代表的Nodejs工作流工具尤为突出。近年来VUE、React、Angular等前端框架诞生并普及应用，前端开发人员的目标不再是还原一个页面的设计图，对于质量与效率也有了更高的追求，于是衍生出了前端工程化的思想，这一思想的具体实现便是前端模块化、工程组件化。

【关键词】：前端模块化、工程组件化、web component

1.引言

前端工程化就是通过应用工程的思维模式来设计和开发软件项目。所谓工程化思想就是将若干个模块、组件或其他静态资源通过有秩序有规范的组织，最终形成一个完善稳定的应用。模块化、组件化的概念最初应用于机械和硬件等生产流水线中，从零件生产、组装到拼装成完整的产品，这种生产模式是生产制造业等行业的高效生产模板。软件产品的开发也在寻找类似的开发方式。开发者通过将软件产品进行解耦划分成不同的业务模块，完整的业务模块拆分成不同的功能实现，其中能够达到相同目的或实现的部分便可视作生产流水线中的零件。将这些功能通过化简封装成为独立的组件，当系统需要实现对应功能时，即使是处于不同的场景或模块中也可以进行组件的组装引用[1]。

2.Web组件化的必要性

组件化是将页面视为一个容器，页面上各个独立的部分视为独立的组件，如：头部、banner、导航、表格、侧边栏、底部等等。组件之间是可以自由组合的，不同的页面可以根据不同的需求选取对应的组件进行拼装。组件具有良好的复用性和可维护性，可以在不同的页面中反复使用，当组件面临更改或调整时也只需调整组件本身即可完成整个系统中组件应用的更新。组件化的形成需要进行产品解耦、前后台分离、统一开发标准及检测标准，这些都使软件产品的质量与生产效率整体提升，同时也使得软件产品的质量更好度量。

3.Web component标准

Web component是由谷歌推动的浏览器原生组件，相比第三方框架，原生组件更为简单直接，且代码量小、轻便灵活，不用加载其他外部模块。针对于引入一类组件后可能会对页面其他代码或样式产生影响的问题，该组件为其提供了解决方案。如当页面中某个元素的类恰巧与引入第三方组件库elementUI的样式库有重合，这个元素便会受到组件库的影响。而Webcomponent通过一种标准化的、非侵入的方式对组件进行封装，该组件可以在不干扰其他功能代码的情况下组织好自身的HTML结构、css样式、javaScript代码，以达到组件的正常应用。

Web component主要包含custom elements、shadow DOM、html templates部分。其中custom elements用于注册自定义元素，shadow DOM 接口为自定义元素的样式和脚本提供一个隔离环境，template和slot用于编写自定义元素的结构模板。开发者可以通过shadow DOM在文档流中创建一些完全独立于其他元素的子DOM树（sub-DOM trees），shadow DOM和标准的DOM一样可以设置它的样式或通javaScript操纵他的行为。主文档流和基于shadow DOM创建的独立组件之间互不干扰，组件的复用也就变得简单方便。

Web component除了是一个独立的组件外，还可以跨语言、跨框架使用，自主封装的组件也可以完美融合在VUE、Angular、React等框架中。

4.web component组件化分析与改进

组件化框架的改进方式有两种，第一种是提前定义好一个自定义组件的命名规范，之后按照这个规范进行开发。在框架进行页面渲染的时候进行标签匹配，符合命名规范的标签即可进行渲染。另一种方式则对标签的命名没有限制，开发者可以任意定义标签的命名格式，如：驼峰、下划线、分割线等格式，但是这些标签使用时需要进行对应的自定义组件声明。

两种方式各有利弊，第一种的优点是开发者在语义上更易区分哪些是自定义组件，在定义组件的过程中也可以更接近于web component标准，但是对于不同的组件开发者来说，在组件庞杂的工程中记住各种组件的定义方式是比较困难的，这也增加了开发者在项目前期的学习成本。第二种方式相对于第一种来说定义方式更加随意，开发者不需要记住组件本身的规范，可按照自身习惯进行声明，但在实际开发过程中不同的框架都有各自的定义方式，没有可遵循的规律及标准，这点违背了标准化的原则[2]。

两种方式在优化自定义组件的过程中都存在优缺点，都没有充分遵循

W3C模式。因此，需要一套结合两种方式优点的新框架。虽然目前web component提供了相应的接口，但在支持用户自定义元素方面浏览器仍存在着兼容性问题。Polymer通过polyfill技术对老旧浏览器进行修补使其可以支持新浏览器的特性。但当Polymer在运行到涉及element解析时就会对整体的性能产生负面影响，并且由于对移动端的支持不够，部分手机可能会出现不支持的情况。为了更好的解决以上问题，通过结合W3C的标准规范以及javaScript对组件的底层封装，以实现在容器中通过标签引入框架生成对应的DOM元素。

框架实质上是一个MVVC结构程序，程序上包含了全局设计和元素实例两部分。其中全局设计进行全局性接口设计及参数的默认配置。元素实例则是对涉及到的实例进行初始化和接口设计。在实例化的过程中，分别通过observer对data模型进行监听实现对数据项变化的监控，以及将template解析成Document Fragment并对directive进行解析获取依赖他的数据项及更新策略。最后通过watcher获取依赖directive的变化情况并及时更新视图渲染到页面上，实现数据模型与视图的关联性[3]。

框架的整个生命周期包括加载、注册、更新和销毁。框架在加载过程中通过class类对DOM进行遍历，获取相应的element元素创建在对应的容器中，并将dom对应的属性参数一并传入。在注册阶段通过调用createElementClass方法产生elementClass。在更新阶段中，框架实时监听数据模型的状态，当数据模型发生变化时迅速得到反馈更新对应视图。当从根节点移除element时完成组件销毁工作。

5.结论

通过更接近于web component标准的应用与封装，完善了浏览器对组件的兼容性及对虚拟DOM渲染性能的优化，通过对代码的标准化、结构化及语义化要求的提升，最终形成了具有强兼容性及数据双向绑定的前端框架。对于开发效率的提高及系统标准化、结构化有着积极的影响。

参考文献

[1]曹刘阳.编写高质量代码——web 前端开发修炼之道[J]. Web 开发, 2010.

[2]王政.Web前端开发技术以及优化研究[J].电脑知识与技术,2013,9(22):5037-5038.

[3]魏娜.Web前端开发技术研究[J].现代计算机(专业版),2011(29):50-52.