Front-end Development Practice: Writing Maintainable, Efficient, and Elegant Code

introduction

Front-end development is a rapidly developing field, and as various new technologies and tools continue to emerge, it becomes increasingly important to keep the code maintainable, efficient, and elegant. This article will detail some of the best practices and disciplines of front-end development and how to implement them through code examples.

Table of contents

• coding style
• Directory Structure
• Naming conventions
• Notes and documentation
• Modularity and componentization
• Performance optimization
• version control
• test
• Summarize

coding style

Indentation and spaces

Use 2 or 4 spaces for indentation, do not use tabs.

// 好的
function goodExample() {
    
    
  let x = 1;
  if (x > 0) {
    
    
    console.log("Positive");
  }
}
// 不好的
function badExample() {
    
    
	let x = 1;
	if (x > 0) {
    
    
		console.log("Positive");
	}
}

brackets and semicolons

Always add a semicolon at the end of a statement and a space before the opening parenthesis.

// 好的
if (condition) {
    
    
  // code
}
// 不好的
if(condition){
    
    
  // code
}

Directory Structure

A clear directory structure improves code readability and maintainability.

my-app/
|-- src/
|   |-- components/
|   |-- containers/
|   |-- utils/
|-- public/
|-- package.json
|-- README.md

Naming conventions

Variable naming

Use camelCasenomenclature.

// 好的
let myVariable = 1;
// 不好的
let my_variable = 1;

Function naming

Use a verb + noun combination.

// 好的
function fetchData() {
    
    
  // code
}
// 不好的
function data() {
    
    
  // code
}

Notes and documentation

Single line comments

Use //for single line comments.

// 这是一个单行注释

Multi-line comments

Use /* */to make multi-line comments.

/*
这是一个多行注释
*/

Modularity and componentization

Use ES6 modules or CommonJS modules for code organization.

// utils.js
export function add(a, b) {
    
    
  return a + b;
}
// main.js
import {
    
     add } from './utils';

Performance optimization

Lazy loading of images

Use IntersectionObserverlazy loading of images.

const observer = new IntersectionObserver((entries) => {
    
    
  entries.forEach((entry) => {
    
    
    if (entry.isIntersecting) {
    
    
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img').forEach((img) => {
    
    
  observer.observe(img);
});

version control

Use Git for version control and follow Git Flowworkflows.

# 创建一个新分支
git checkout -b feature/new-feature
# 提交更改
git add .
git commit -m "Add new feature"
# 推送到远程仓库
git push origin feature/new-feature

test

Use Jest or Mocha for unit testing.

// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
    
    
  expect(sum(1, 2)).toBe(3);
});

Summarize

Following front-end development specifications can not only improve the maintainability and readability of the code, but also improve the efficiency of team collaboration. I hope this article provides you with useful information and guidance.

---

Thank you for reading and if you have any questions or suggestions please feel free to contact me.