前端实践：25+ 最佳 JavaScript 代码开发实践

29. 享受编程的乐趣

在上一篇文章中，我介绍了 CSS/SCSS 的前端最佳实践。本文将分享 JavaScript 开发的基本最佳实践。

JavaScript 前端开发涉及创建用户界面和处理 Web 应用程序的表示层。以下是一些最佳实践以及示例，可确保代码库简洁易维护：

1.模块化：将代码分解成更小、可重用的模块。这可以增强代码的可读性，并使依赖关系的管理更加容易。

例子：

// users.js (module)
export function getUsers() {
  // Fetch users from the API or data source
}

// main.js (entry point)
import { getUsers } from './users.js';

getUsers();

2.使用 const 和 let：优先const用于不会被重新分配的变量和let会改变的变量。

例子：

const PI = 3.14159;
let count = 0;

count = 10; // Valid
PI = 3; // Error

3.避免使用全局变量：尽量减少使用全局变量，以防止污染全局范围和潜在的冲突。

例子：

// Avoid this
let globalVar = 'I am global';

function someFunction() {
  // ...
}

// Use this instead
(function() {
  let localVar = 'I am local';

  function someFunction() {
    // ...
  }
})();

4.使用箭头函数：箭头函数提供简洁的语法并保持词汇this值，减少了对的需要bind()。

例子：

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

5.避免污染全局命名空间：将代码封装在模块或IIFE（立即调用函数表达式）中，以避免全局命名空间污染。

例子：

// Instead of
function myFunction() {
  // ...
}

// Use this
(function() {
  function myFunction() {
    // ...
  }

  // Call the function or attach it to the desired scope
  myFunction();
})();

6.使用现代 ES6+ 功能：采用 ES6+ 功能，如解构、扩展语法和模板文字，以编写更简洁、更具表现力的代码。

例子：

// Destructuring
const { firstName, lastName } = user;

// Spread syntax
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];

// Template literals
const name = `My name is ${firstName} ${lastName}.`;

7.避免使用内联样式，使用 CSS 类：保持 HTML 和 JavaScript 代码分离。使用 CSS 类进行样式设置，并使用 JavaScript 操作类，而不是内联样式。

例子：

<!-- Bad: Inline style -->
<button style="background-color: #007bff; color: #fff;">Click Me</button>

<!-- Good: CSS class -->
<button class="primary-btn">Click Me</button>

8.优化 DOM 操作：尽量减少直接 DOM 操作，并使用有效的方法，如模板文字或有效更新 DOM 的库/框架。

示例（使用模板文字）：

const data = ['Item 1', 'Item 2', 'Item 3'];

function renderList(data) {
  const list = document.getElementById('list');
  list.innerHTML = '';

  data.forEach(item => {
    const listItem = document.createElement('li');
    listItem.textContent = item;
    list.appendChild(listItem);
  });
}

renderList(data);

9.使用事件委托：将事件监听器附加到父元素并利用事件委托处理动态添加的元素上的事件。

例子：

<ul id="list">
  <!-- List items will be added dynamically -->
</ul>

document.getElementById('list').addEventListener('click', event => {
  if (event.target.nodeName === 'LI') {
    // Handle click on list item
    console.log(event.target.textContent);
  }
});

10.优化资产加载：最小化 HTTP 请求的数量，并使用捆绑和最小化等技术来优化资产加载。

11.错误处理：始终妥善处理错误，以避免应用程序意外崩溃并改善用户体验。

例子：

function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero is not allowed.');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error('An error occurred:', error.message);
}

12.使用Promises或Async/Await进行异步操作：避免对异步操作使用嵌套回调，并使用Promises或Async/Await来提高代码的可读性和可维护性。

使用 Promises 的示例：

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

使用 Async/Await 的示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('Error fetching data:', error);
  }
}

(async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
})();

13.避免在循环中直接操作 DOM：在循环内执行 DOM 操作时，批量更改或使用 DocumentFragment 来最大限度地减少布局抖动并提高性能。

例子：

// Bad: Directly manipulating DOM in a loop
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const listItem = document.createElement('li');
  listItem.textContent = `Item ${i}`;
  list.appendChild(listItem);
}

// Good: Batch changes using DocumentFragment
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const listItem = document.createElement('li');
  listItem.textContent = `Item ${i}`;
  fragment.appendChild(listItem);
}
list.appendChild(fragment);

14.对事件处理程序使用去抖动或节流：处理可能频繁触发的事件（例如调整大小或滚动）时，使用去抖动或节流技术来减少函数调用次数并提高性能。

使用 Lodashdebounce函数的示例：

import { debounce } from 'lodash';

function handleResize() {
  // Code to handle window resize
}

window.addEventListener('resize', debounce(handleResize, 200));

15.使用语义 HTML：编写有意义且语义的 HTML 以提高可访问性、SEO 和可维护性。

例子：

<!-- Bad: Using generic divs -->
<div class="header">
  <div class="title">My Website</div>
</div>

<!-- Good: Using semantic HTML -->
<header>
  <h1>My Website</h1>
</header>

16.使用 ES6 模块代替全局脚本：将您的 JavaScript 代码组织到单独的模块中，并使用 ES6import和export语句代替在全局范围内加载多个脚本。

示例（模块 1）：

// module1.js
export function foo() {
  // ...
}

示例（模块 2）：

// module2.js
export function bar() {
  // ...
}

示例（主脚本）：

// main.js
import { foo } from './module1.js';
import { bar } from './module2.js';

foo();
bar();

17. 避免嵌套三元运算符：虽然三元运算符对于简洁的表达式很有用，但嵌套它们会导致代码难以阅读和理解。对于复杂的条件，请使用常规的 if-else 语句。

例子：

// Bad: Nested ternary
const result = condition1
  ? value1
  : condition2
  ? value2
  : condition3
  ? value3
  : defaultValue;

// Good: Using if-else
let result;
if (condition1) {
  result = value1;
} else if (condition2) {
  result = value2;
} else if (condition3) {
  result = value3;
} else {
  result = defaultValue;
}

18.避免过多的注释：注释对于代码文档至关重要，但要避免过度注释那些自解释的代码。尽可能让代码自己说话。

例子：

// Bad: Excessive comments
function add(a, b) {
  // This function adds two numbers and returns the result
  return a + b; // Return the sum
}

// Good: Minimal, self-explanatory comments
function add(a, b) {
  return a + b;
}

19.使用对象简写：当创建具有与变量同名的属性的对象文字时，使用对象简写可以使代码更简洁。

例子：

// Bad: Repetitive code
const firstName = 'John';
const lastName = 'Doe';

const user = {
  firstName: firstName,
  lastName: lastName,
};

// Good: Object shorthand
const firstName = 'John';
const lastName = 'Doe';

const user = {
  firstName,
  lastName,
};

20.避免使用 eval()：该eval()函数可以执行任意代码，通常被认为是不安全的，也是不好的做法。请寻找不使用的替代解决方案来实现您的目标eval()。

示例（不好 - 避免eval()）：

const expression = '10 + 20';
const result = eval(expression);
console.log(result); // Output: 30

21. textContent使用代替innerHTML：处理纯文本内容时，优先使用textContent代替innerHTML以防止潜在的安全漏洞（例如，跨站点脚本 - XSS）。

例子：

// Bad: Using innerHTML for plain text
const text = '<script>alert("Hello XSS!");</script>';
const element = document.getElementById('myElement');
element.innerHTML = text; // This will execute the script

// Good: Using textContent
const text = '<script>alert("Hello XSS!");</script>';
const element = document.getElementById('myElement');
element.textContent = text; // Treats it as plain text, no script execution

22. addEventListener使用内联事件处理程序：不要使用 HTML 中的内联事件处理程序（例如onclick="myFunction()"），而是addEventListener在 JavaScript 中使用，以便更好地分离关注点。

示例（不好 - 内联事件处理程序）：

<button onclick="handleClick()">Click Me</button>

function handleClick() {
  // Event handling logic
}

示例（良好 - addEventListener）：

<button id="myButton">Click Me</button>

document.getElementById('myButton').addEventListener('click', handleClick);

function handleClick() {
  // Event handling logic
}

23. const使用 andlet代替var：优先使用constandlet进行var变量声明，以避免提升和块作用域问题。

例子：

// Bad: Using var
var x = 10;

// Good: Using const or let
const x = 10;
let y = 20;

24. map()使用、、filter()和reduce()进行数组操作：利用高阶数组方法（如map()、、filter()和）reduce()以函数式和声明式的方式对数组执行操作。

使用示例map()：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

使用示例filter()：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

使用示例reduce()：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

25.避免 document.write()：document.write()如果在页面加载完成后使用，可能会导致意外行为并覆盖整个文档。请改用 DOM 操作方法。

示例（不好 - 避免document.write()）：

document.write('<h1>Hello World</h1>');

26. classList用于管理 CSS 类：不要直接操作className，而是使用、、和等classList方法来管理 CSS 类。add()remove()toggle()contains()

例子：

<div id="myDiv" class="container">Content</div>

const element = document.getElementById('myDiv');

// Adding a class
element.classList.add('highlight');

// Removing a class
element.classList.remove('container');

// Checking if a class exists
if (element.classList.contains('highlight')) {
  // Do something
}

// Toggling a class
element.classList.toggle('active');

27. requestAnimationFrame()用于流畅的动画：创建动画时，使用requestAnimationFrame()以确保以最佳帧速率运行的动画流畅高效。

例子：

function animate() {
  // Code to update the animation

  requestAnimationFrame(animate);
}

// Start the animation
animate();

28.避免使用同步 AJAX 请求：避免使用同步 XMLHttpRequest (XHR)，因为它可能会阻塞主线程，导致用户体验不佳。建议使用 Promises、async/await回调等异步请求。

使用 Promises 的示例：

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

使用示例async/await：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('Error fetching data:', error);
  }
}

(async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
})();

感谢阅读:)

前端实践：25+ 最佳 JavaScript 代码开发实践 29. 享受编程的乐趣

前端实践：25+ 最佳 JavaScript 代码开发实践

29. 享受编程的乐趣

热门文章