如何搭建高质量、高效率的前端工程体系--页面结构继承

本文作者：IMWeb 莫卓颖 原文出处：IMWeb社区 未经同意，禁止转载

{{tags: 工具建设 开发模式}}

序言

相信很多程序员都会经历两件事：第一件事情是没日没夜加班撸代码；第二件事情是写的程序出现bug没有及时发现而被老板骂。不知道大家有木有考虑从工具或者架构的角度出发去解决以上两个问题，木有考虑的同学也木有关系，本系列文章将会将会围绕整个前端的开发流程出发解决这两个问题，帮助大家提高产品质量以及开发效率。

文章导航图

对于前端开发来说大致分为5个阶段：开发、联调、测试、上线、监控维护，本系列文章将会选取每个阶段比较影响效率以及质量的点进行详细描述。这一章我们先来从开发阶段出发考虑有哪些方面可以做效率提升？

页面结构继承化

信很多同学都会利用JS或css不完美的继承成化方案实现功能或样式的重用，不知道大家是否有考虑过页面结构或者数据也可利用类似的继承方式以便达到结构以及数据重用，我们先来看一个例子以便更好了解HTML继承的作用，如下图：

假设A同学和B同学分别开发页面A和B，这两个页面的特点是页头、页脚和公共资源都是一样的，唯一不同的就是内容部分（即是body）。B同学发现这个特点后，聪明的只开发内容部分，其它相同等A同学开发后把相同的代码拷贝过来便可。相同部分如下图红框，不同部分如下图黄框：

但是A同学相当靠谱，他的程序经常出bug，导致每一次修改页头和页脚都需要通知B同学，然后B同学需要把需要修改部分黏贴覆盖到代码中。这种方式很明显会带来两个问题：1、修改困难，同一个修改需要同步多次, 2、维护困难，需要维护大量相同的代码。于是B同学想到了另外一种方式，把公共部分分别抽取为单独的一个文件，然后用inline的方式引入，方式如下图所示：

把两个页面相同的meta,公共的css,功能的页头，公共的页脚，公共的脚本统一抽取成一个文件，相信很多同学都是使用类似的架构来设计Html,但是不知道有木有同学考虑过这种方式的缺点：无法进行颗粒度化的结构扩展以及修改。举个例子，比如嵌入的head.html，如果说每个页面某个模块大部分内容一样，但是有一小部分都不一样，我们是否需要在这个模块中使用大量的if else,使用这种方式很快会使得代码无法维护。因此更加理想的架构方式是让HTML也具有继承结构，把通用结构、数据放到base.html中，所有的页面均继承此base类（父类），继承结构如下图所示：

我们先来看看定义的通用base.html(父类)的含义

,如上图，我们在通用父类中定义通用的属性(如蓝色框所示),相信在一个产品线中，所有页面一致的部分包括通用的公共样式（reset.css等）、通用的脚本库（jquery等）、ico和某些meta,对于不变的无需定义属性key,等有需要的时候再定义便可。页面有可能不变的包括meta、title、header、footer等，可提前定义属性key,见上图的蓝色框，定义好base类后，我们的页面便可简化为如下图所示：

对于这些我们相信到这很多同学会产生疑问，html不像动态语言，具有inline以及继承功能，怎么样才能达到上述功能，实现原理很简单，借助构建工具在编译的过程中遍历所有HTML文档，找出所有的基类，然后读取所有的子类，把子类的属性覆盖到父类便可，伪代码如下图：

总结

页面结构继承早已经在动态语言模板smarty,velocity等实现，因为它可以更加有效的管理模板以及提高开发效率，但是在html不支持类似的方式导致很少同学使用类似的结构实现导致木有html维护的困难，通过本文学习，可简单的实现HTML继承已达到重用的目的。下篇文件将会阐述如果实现模块化以便提升开发效率。