25+ Javascript 代码开发最佳实践🔥
站长
· 阅读数 15
使用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来提高代码的可读性和可维护性。
使用 Promise 的示例：
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 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 来提高可访问性、搜索引擎优化和可维护性。
例子：
<!-- 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 中使用以更好地分离关注点。
示例（Bad - 内联事件处理程序）：
<button onclick="handleClick()">Click Me</button>
function handleClick() {
// Event handling logic
}
示例（Good - addEventListener）：
<button id="myButton">Click Me</button>
document.getElementById('myButton').addEventListener('click', handleClick);
function handleClick() {
// Event handling logic
}
23.使用 constandlet代替var：
在变量声明中优先使用constand let以避免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 操作方法。
示例（Bad - 避免document.write()）：
document.write('<h1>Hello World</h1>');
26. 使用classList用于管理 CSS 类：
不要直接操作className，而是使用add()、remove()、toggle() 和contains() 等classList方法来管理 CSS 类。
例子：
<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回调或回调的异步请求。
使用 Promise 的示例：
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);
}
})();