如何搭建高质量、高效率的前端工程体系--页面结构继承
推荐理由:
推荐理由:
程序员在我们的印象中,就是不停的敲代码;而写的程序如何确保不出现bug,而且还能及时发现问题,下面我推荐的这篇文章,围绕整个前端的开发流程出发解决这两个问题,帮助大家提高产品质量以及开发效率。希望对大家有用。
以下为文章原文
作者:莫卓颖
序言
相信很多程序员都会经历两件事:第一件事情是没日没夜加班撸代码;第二件事情是写的程序出现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继承已达到重用的目的。下篇文件将会阐述如果实现模块化以便提升开发效率。
原文链接:http://ivweb.io/topic/5773c1a9af96c5e776f1f5c0
相关推荐
- 打造前端工程测试体系(1)
- 前端开发框架简介:angular和react
文章出自腾讯云技术社区
(埋文字链https://www.qcloud.com/community/article/657153001489391652)
推荐大家关注腾讯云技术社区微信公众号:QcloudCommunity
转载于:https://my.oschina.net/u/3352643/blog/873765
如何搭建高质量、高效率的前端工程体系--页面结构继承相关推荐
- 腾讯IVWEB团队:如何搭建高质量、高效率的前端工程体系 页面结构继承
腾讯云技术社区-简书主页持续为大家呈现云计算技术文章,欢迎大家关注! 作者:莫卓颖 序言 相信很多程序员都会经历两件事:第一件事情是没日没夜加班撸代码:第二件事情是写的程序出现bug没有及时发现而被老 ...
- 读书笔记:编写高质量代码--web前端开发修炼之道(二:5章)
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- 神策数据司沛:加速车企数字化转型,搭建高质量用户数据平台实战
本文根据神策数据高级售前解决方案顾问司沛<加速车企数字化转型,搭建高质量用户数据平台(CDP)实战>的直播内容整理而成.主要包括: 车企数字化转型之瓶颈以及应对思路 神策数据为车企打造的用 ...
- 如何搭建高质量的 B 端产品帮助体系?
在B2B市场中,产品的质量和支持服务对于企业的成功至关重要.帮助中心是B2B企业提供优质支持服务的重要组成部分.那么,如何搭建高质量的B端产品帮助体系呢?本文将为大家介绍一些关键的步骤和方法. 一.了 ...
- 询问ChatGPT的高质量答案艺术——提示工程指南
目录 前言 一.提示工程简介 二.提示技巧 2-1.生成法律文件 2-2.添加提示技巧 三.角色扮演 3-1.智能手机产品描述 3-2.添加角色扮演 四.标准提示 4-1.写一篇有关于新智能手机的评论 ...
- 编写高质量代码 Web前端开发修炼之道 读书笔记
2019独角兽企业重金招聘Python工程师标准>>> 第五章 高质量的JavaScript 5.1 养成良好的编程习惯 5.1.1 团队合作-如何避免JS冲突 使用匿名函数控制变量 ...
- 编写高质量代码:Web前端开发修炼之道(三)
第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...
- 如何搭建高质量在线网校平台
如今每天都有数不清的在线网校平台出现在市面上,但是也有数不清的网校平台被市场所淘汰,成为了使用寿命非常短的网校平台.这是为什么呢?我们在利用网校源码搭建在线网校平台时,如何做才能延长使用寿命呢?我们来 ...
- 前端绘图开源组件_推荐10款常用的高质量的Web前端UI开源框架,必收藏
Web前端领域最近几年发展的特别迅速,可以说是百家争鸣.Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队).对于现在的开发者来说,都向着全栈方向发展, ...
最新文章
- 【Linux】34. shell脚本判断当前年份是否正确
- 协方差 之 随机变量间的协方差及向量之间的协方差之间的微妙的区别
- python打开csv文件、计算总成绩_实现读取csv文件,文件里面是有限个百分数成绩(99.6、76.8等等...
- 7.深度学习练习:Regularization
- 今天要查一下,如果没有密保手机的号码在使用,怎么更换qq的密保手机
- 5.1作业5 四则运算 测试与封装
- 利用ajax查询数据库显示在前台,ajax动态查询数据库数据并显示在前台的方法
- 计算机房设计规范2008,电子计算机房设计规范.doc
- 数据库缓存一致性解决方案
- 中国 移动短消息中心号码大全
- Hive3.1.2 on spark
- VUE3 使用 Ant Design Vue的icon图标
- 斑马打印机Zebra 105SL每次开机就出纸
- 泰坦尼克号数据挖掘项目实战——Task7 模型融合
- 微信小程序 vant-weapp 实现多选标签
- 简单工厂、工厂方法、抽象工厂
- Bootstrap3 带边框的表格样式
- Oracle存储架构
- 怎样批量、快速、一次性删除QQ好友
- yum Failed to initialize NSS library恢复
热门文章
- MYSQL(mysqld --initialize --console初始化的时候报错:Can‘t create directory ‘C:\web\mysql-8.0.11\data\‘)
- 时间序列预测框架--Darts--快速开始(下)
- ERROR: No matching distribution found for xxx
- java 迷宫代码_老鼠走迷宫代码 JAVA
- springboot 结合 ice(飞冰) 实现上传功能
- windows10环境下iceworks(飞冰)安装
- 源码看JAVA【五】Byte
- 计算机原理课堂,计算机原理课堂测验题集.ppt
- ESP32系列:Unhandled debug exception 、Doubled exception错误
- 计算机网安全模式,电脑安全模式有什么用?