腾讯IVWEB团队：如何搭建高质量、高效率的前端工程体系 页面结构继承

腾讯云技术社区-简书主页持续为你们呈现云计算技术文章，欢迎你们关注！

---

做者：莫卓颖

序言

相信不少程序员都会经历两件事：第一件事情是没日没夜加班撸代码；第二件事情是写的程序出现bug没有及时发现而被老板骂。

不知道你们有木有考虑从工具或者架构的角度出发去解决以上两个问题，木有考虑的同窗也木有关系，本系列文章将会将会围绕整个前端的开发流程出发解决这两个问题，帮助你们提升产品质量以及开发效率。

文章导航图

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

页面结构继承化

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

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

可是A同窗至关靠谱，他的程序常常出bug，致使每一次修改页头和页脚都须要通知B同窗，而后B同窗须要把须要修改部分黏贴覆盖到代码中。这种方式很明显会带来两个问题：一、修改困难，同一个修改须要同步屡次, 二、维护困难，须要维护大量相同的代码。因而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继承已达到重用的目的。下篇文件将会阐述若是实现模块化以便提高开发效率。

原文连接：http://ivweb.io/topic/5773c1a9af96c5e776f1f5c0

相关阅读： 打造前端工程测试体系（1） 前端开发框架简介:angular和react 一个只有99行代码的JS流程框架

---

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处，获取更多云计算技术干货，可请前往腾讯云技术社区