Tencent cloud technology community – Jane book home page continues to present cloud computing technology articles, welcome your attention!

Author: Mo Zhuoying

The preface

I believe that many programmers will experience two things: the first thing is to work overtime day and night coding; The second thing is that I was scolded by my boss for not finding bugs in the program I wrote in time.

I don’t know if you have considered to solve the above two problems from the perspective of tools or architecture, and those who have not, this series of articles will focus on the whole front-end development process to solve these two problems, to help you improve product quality and development efficiency.

Article navigation chart

Front-end development can be roughly divided into five stages: development, joint commissioning, testing, online, monitoring and maintenance. This series of articles will select the points that affect efficiency and quality in each stage to describe in detail. In this chapter, we will start from the development stage and consider what can be done to improve efficiency?

Page structure inheritance

Letter many students will use JS or CSS imperfect inheritance chenghua project implementation function or style of reuse, don’t know whether you have considered page structure or data also can use similar way of inheritance to achieve structure and data reuse, let’s look at an example in order to better explore the effects of HTML inheritance, the diagram below:

Suppose student A and student B develop page A and page B. These two pages are characterized by the same header, footer and common resources, with the only difference being the content part (i.e., the body). After discovering this feature, student B wisely developed only the content part, and student A copied the same code after developing the other parts. The red box for the same part is shown below, and the yellow box for different parts is shown below:

However, student A was quite reliable. His program often had bugs, so student B needed to be informed every time he modified the header and footer, and then he needed to paste the part that needed to be modified into the code. There are two obvious problems with this approach: (1) it is difficult to make changes that need to be synchronized multiple times, and (2) it is difficult to maintain large amounts of the same code. So B thought of another way, extract the common part into a separate file, and then use the inline mode, as shown in the figure below:

The meta, common CSS, functional header, common footer and common script of the two pages are extracted into a single file. I believe many students use similar structure to design Html, but I wonder if any students have considered the disadvantage of this method: it can not be granular structure expansion and modification. For example, in embedded head.html, if a module has much of the same content from page to page, but a few parts are different, do we need to use a lot of if and else in that module? Using this approach would quickly make the code unmaintainable. Therefore, an ideal architecture would be to have HTML with inheritance structure. Put common structure and data in base.html, and all pages inherit from the base class (parent class), as shown in the figure below:

Let’s start by looking at what the generic base.html(parent class) defined means

, as shown in the figure above, we define common attributes in the common parent class (shown in the blue box), believing that in a product line, The parts that are consistent across all pages include common common styles (reset.css, etc.), common script libraries (jquery, etc.), ICOs, and certain meta’s. For those that don’t change, you don’t need to define attribute keys until you need to. The page may include meta, title, header, footer, etc., and the attribute key can be defined in advance, as shown in the blue box in the figure above. After defining the Base class, our page can be simplified as shown in the figure below:

HTML, unlike a dynamic language, is inline and inherits. How to achieve this function is very simple. The build tool iterates through all the HTML documents during compilation, finds all the base classes, and reads all the subclasses. To override the attributes of the subclass to the parent class, the pseudocode is shown below:

conclusion

Page structure inheritance has been implemented in dynamic language templates, such as Smarty and Velocity, because it can more effectively manage templates and improve development efficiency, but in HTML does not support a similar way, resulting in few students using similar structure implementation, resulting in no DIFFICULTIES in HTML maintenance. Through learning in this paper, HTML inheritance can be easily implemented to achieve reuse purposes. The next document will explain how modularity can be implemented to improve development efficiency.

The original link: http://ivweb.io/topic/5773c1a9af96c5e776f1f5c0

Introduction to the Front-end development framework: Angular and React is a 99 line JS process framework

This article has been published by Tencent Cloud technology community authorized by the author. Please indicate the source of the article when reprinted. For more cloud computing technology dry goods, please go to Tencent cloud technology community