Chapter 1 General

The first entry

Front-end development is a collection of tools and processes ，This specification aims to improve the quality of front-end code ， Provide comprehensive guidance on front-end development ， unify coding standards, improve readability, and reduce maintenance costs ， to achieve efficient and sustainable workflow.

Article 2 Scope

This standard applies to all Web applications and App development.

Chapter 2 Development Specifications

Article 3 General Specifications

Universal rules applied to HTML, CSS, Javascript, etc.

3.1 General Specifications

3.1.1 Technical Selection

The front-end is a developing technology ， Standards, frameworks, etc. are updated quickly and have a large adjustment range ， When selecting technology, you should take into account the various possibilities applicable to the current project in open source technology， xff0c;Investigate and compare from multiple angles，and select a stable version of the framework from which，when the technical reserve is sufficient，should take into account the relatively cutting-edge technology.

3.1.2 Directory structure

The standardized file directory structure helps to improve the rationality of the project’s logical structure，Yes Application scaling and collaboration， and team development are beneficial.
The application’s core framework, static resources, script modules, uploaded files, etc. should be divided into different files ，strictly follow the requirements of modular development，try to be standardized. Files that do not need to be directly exposed to users，should be placed in a directory that cannot be accessed by the web server，to avoid leaking configuration information.

3.1.3 File Resource Naming

1). Project names are all lowercase ，separated by underscore &#xff1b ;
2). Use camel case to name the file name and the folder where the file is located ， for unified configuration；
3). Make sure that the file name always starts with a letter instead of a number ， xff1b;

3.1.4 Encoding format

By declaring an explicit character encoding，let the browser quickly determine the appropriate Rendering method ， is usually specified as ‘UTF-8’.

3.1.5 Text indentation

Use four spaces or tabs for indentation，Do not mix them.

3.1.6 Code Comments

Comments are explanations of code that cannot be explained by themselves，Comments can improve the reliability of code Maintainability, readability & # xff0c; Developers should add spec-compliant comments when necessary. Comments should at least include the author/maintainer ， description ， access parameters ， example and maintenance date of the method and function. Comments must be added for the following scenarios ：

1). Core code and more obscure parts.
2). Error-prone code segments.
3). Browser special HACK code.
4). Business logic strongly related code.

3.1.7 Code Check

For Javascript, a weakly typed programming language，strictly follow coding standards and formatting Style is very important. Front-end developers need to strictly follow development specifications & # xff0c; and use automatic code checking tools (such as ESLint) to reduce syntax errors & # xff0c; to ensure correct code execution.
ESLint is a tool for checking whether JS code is standardized ， is used to check the standardization of JS code. It provides a configuration method ， to check for errors that do not conform to the development specification， and supports ES6 syntax.

3.2 HTML specification

3.2.1 Document type

Use HTML5's doctype declaration ：.


3.2.2 Script Loading

For performance reasons ， scripts should be loaded asynchronously. The script reference is written before the body end tag ， and with the async attribute ， to avoid blocking CSSOM execution.

3.2.3 Semantic

Using appropriate HTML elements ， can improve code rendering efficiency， Yes Helps improve SEO，It is of great significance for accessibility, code reuse, and code efficiency.

3.2.4 Separation of Concerns

Separation of structure, performance, and behavior is the best practice for front-end development engineering&#xff0c ;In order to keep the code clean and maintainable，reduce code coupling，and carry out engineering，should strictly follow the specification requirements of the separation of the three.

3.3 CSS specification

3.3.1 Selector

1). Clear, accurate, and semantic class names should be used when building selectors.
2). The design of the selector should be as precise as possible ， Avoid using label selectors ， Use class names instead of elements ， This is easier to maintain.
3). Reduce the length of the selector ， The length of each combined selector should be controlled within 3.

3.3.2 Attributes

css provides various abbreviated attributes ， such as font, transition, animation, etc.& #xff0c;Use shorthand attribute ���，Two-way data binding，Support TypeScript，Object-oriented, etc.，However, the efficiency of dirty checking will decrease significantly when there are more watchers；
Vue& #xff1a; Lightweight ， two-way data binding ， gentle learning curve ， has greater advantages in small and medium-sized simple applications.

The above description of the current mainstream framework is only a general reference for technology selection & # xff0c; subject to contingency & # xff0c;

Chapter 3 Engineering Specifications

Article 4 Performance Optimization

When developing a complete web application ， the front end will face many engineering problems ， such as ： multi-function, multi-system, multi-person cooperation ， high performance CDN deployment, cache control, on-demand loading, first-screen rendering, server-side push, etc. The basic requirements of these issues are component-based development and resource management.
According to different optimization goals ，should adopt at least ：

There are many details in the field of engineering management of front-end development that are worth digging and exploring ， The analysis and research of performance optimization are also of great benefit to the accumulation and development of front-end team technology， This should be fully considered in project development.

Article 5 web security

The purpose of this chapter is to let developers know the common attack methods of various web security threats Have a basic understanding， so that we can quickly locate the vulnerability code and eliminate security risks.
XSS： Attackers use the application’s dynamic data display function， to embed malicious codes in html pages. The embedded html malicious code is executed when the user browses the page. The main hazards include stealing user COOKIEs to forge identities, downloading viruses and Trojan horses, phishing, and worm attacks.
FLASH：Using flash in security configuration and file encoding issues & #xff0c; bypassing the browser’s same-origin policy to initiate cross-domain requests， such as CSRF attacks, phishing .
Injection attack：Including SQL injection, code injection, XML injection, etc. ， such as SQL injection， When the program splices the content entered by the user into SQL together When submitted to the database for execution， it will generate SQL injection threats. The solution is to escape user input.
File operation ： When the application processes the file uploaded by the user ， does not judge whether the extension of the file is in the white list， allowing the attacker to upload any Files and even script Trojan horses directly control the server on the server. The solution is to filter the file extension ， in the code of the user’s upload file request and ensure that the directory of the uploaded file must not be directly accessible by the http request.
Access Control： Because the application does not have permission control or the permission control is too simple，The attacker can access by guessing the URL of the administrator page，to achieve privilege escalation Attack ， proposes to use a mature permission framework to solve the problem.
Session Management：To prevent XSS vulnerabilities from causing user COOKIE to be stolen，should set COOKIE to httponly, Secure， and set a timeout period.
Cryptographic Algorithm Security： Sensitive information involved in the project cannot be encrypted with a simple algorithm, otherwise when the attacker obtains enough samples， will be able to deduce the decryption algorithm ，thus disclosing important information. Others such as base64, escape, urlencode, etc. are just encoding formats ， cannot be used as cryptographic algorithms. A cryptographic algorithm ， such as SHA-256 that complies with industry security strength standards must be used.

Chapter 4 Supplementary Provisions

Article 6

This specification serves as a general reference for web developers， as of the date of publication.