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

本文作者: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继承已达到重用的目的。下篇文件将会阐述如果实现模块化以便提升开发效率。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeTest质量开放平台团队的专栏

iOS微信内存监控

目前iOS主流的内存监控工具是Instruments的Allocations,但只能用于开发阶段。本文介绍如何实现离线化的内存监控工具,用于App上线后发现内存...

2345
来自专栏王鹤的专栏

Vue.js前后端同构方案之准备篇:代码优化

目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技...

3.9K2
来自专栏喵了个咪的博客空间

phalcon-进阶篇1(过滤与清理)

#phalcon-进阶篇1(过滤与清理)# ? 本教程基于phalcon2.0.9版本 ##前言## 先在这里感谢各位phalcon技术爱好者,我们提供这样一个...

3068
来自专栏Grace development

电商系统设计之商品接口

我应该是少数在文章中直接展示接口文档的人。本篇我思考了很久到底要不要解析下商品接口开发的注意点。

1691
来自专栏企鹅号快讯

Java程序员修炼之路线程篇之终篇

Java程序员修炼之路线程篇之终篇 在头条上撰写了20多篇关于java线程的文章,收获了很多读者的肯定和鼓励,在此表示感谢!特别感谢持续关注我,转发我的文章并给...

2058
来自专栏花叔的专栏

这是一个聚集了各路大神思路的小程序

楼主是个热衷技术的小伙伴,偶尔会做一下小玩意,今天给大家说说我做的第一个小程序 该小程序名字叫Nodes,顾名思义就是Node(节点)的聚合,就是思维的集合,首...

3926
来自专栏守候书阁

用vue一个计算属性,实现一个常见表单交互效果

vue.js是现在用的非常火热的一个前端框架,表单又是网站基本不会缺少的一环。用vue操作表单。表单的操作方式也是多种多样。今天我说的,就是我项目那里做的这一种...

961
来自专栏小程序之家

如何在小程序中实现拍照功能

在小程序使用的过程中,难免会用到相机组件,本文将教大家配置入门小程序camera组件的使用,并自己制作一个小程序相机的demo出来。

2.4K4
来自专栏美团技术团队

基于 Appium 的 Android UI 自动化测试

自动化测试是研发人员进行质量保障的重要一环,良好的自动化测试机制能够让开发者及早发现编码中的逻辑缺陷,将风险前置。日常研发中,由于快速迭代的原因,我们经常需要在...

5624
来自专栏13blog.site

文件上传那些事儿:多图上传、大文件上传、断点续传功能实现与分析

看了不少的教程,在系统整合搭建的过程中一般写到文件上传这一节时,基本上实现一个文件上传功能就不再继续拓展,而是就此截止转而去讲解其他的内容了,因为企业级应用开发...

1912

扫码关注云+社区

领取腾讯云代金券