JavaScript 开发优秀实践 TOP 25+-每日运维

本文将分享一些基本的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（Immediately Invoked Function Expression）中，以避免全局命名空间污染。

示例：

// 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而不是内联样式操作类。

示例：


Click Me


Click Me

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.使用事件代理

将事件侦听器附加到父元素，并利用事件代理来处理动态添加的元素上的事件。

示例：


  


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.对异步操作使用Promise或Async/Await

避免对异步操作使用嵌套回调，而是使用promise或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);
  }
})();

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.对事件处理程序使用Debounce或Throttle

在处理可能频繁触发的事件（例如，调整大小或滚动）时，可以使用debounce或throttle手段来减少函数调用的次数并提高性能。

使用Lodash的debounce函数的示例：

import { debounce } from 'lodash';

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

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

15.使用语义HTML

编写语义HTML帮助提高可访问性、SEO和可维护性。

示例：



  My Website




  My Website

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 = '';
const element = document.getElementById('myElement');
element.innerHTML = text; // This will execute the script

// Good: Using textContent
const text = '';
const element = document.getElementById('myElement');
element.textContent = text; // Treats it as plain text, no script execution

22.使用addEventListene代替内联事件处理程序

与其在HTML中使用内联事件处理程序（例如，onclick=“myFunction()”），不如在JavaScript中使用addEventListener来更好地分离关注点。

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

Click Me

function handleClick() {
  // Event handling logic
}

示例（好 - addEventListener）：

Click Me

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

function handleClick() {
  // Event handling logic
}

23.使用const和let代替var

对于变量声明，首选const和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操作方法。

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

document.write('Hello World');

26.使用classList管理CSS类

与其直接操作className，不如使用classList方法（如add()、remove()、toggle()和contains()来管理CSS类。

示例：

Content

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），因为可能会阻塞主线程，从而导致用户体验不佳。

相反，可以将异步请求与promise、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);
  }
})();

JavaScript 开发优秀实践 TOP 25+

1.模块化

2.使用const和let

3.避免全局变量

4.使用箭头函数

5.避免污染全局命名空间

6.使用现代ES6+功能

7.避免内联样式并使用CSS类

8.优化DOM操作

9.使用事件代理

10.优化资源加载

11.错误处理

12.对异步操作使用Promise或Async/Await

13.避免直接在循环中操作DOM

14.对事件处理程序使用Debounce或Throttle

15.使用语义HTML

16.使用ES6模块取代全局脚本

17.避免嵌套的三元运算符

18.避免过度注释

19.使用对象速记

20.避免使用eval()

21.使用textContent取代innerHTML

22.使用addEventListene代替内联事件处理程序

23.使用const和let代替var

24.使用map()、filter()和reduce()进行数组操作

25.避免document.write()

26.使用classList管理CSS类

27.使用requestAnimationFrame()实现平滑动画

28.避免同步AJAX请求

相关文章

发布评论取消回复

共饮一杯

Oracle回收DBA权限注意事项

MongoDB 入门教学贴从术语到操作（约束怎么建立内部培训贴）

RisingWave 1.10 发布！新增用户自定义聚合函数

JavaScript 开发优秀实践 TOP 25+

1.模块化

2.使用const和let

3.避免全局变量

4.使用箭头函数

5.避免污染全局命名空间

6.使用现代ES6+功能

7.避免内联样式并使用CSS类

8.优化DOM操作

9.使用事件代理

10.优化资源加载

11.错误处理

12.对异步操作使用Promise或Async/Await

13.避免直接在循环中操作DOM

14.对事件处理程序使用Debounce或Throttle

15.使用语义HTML

16.使用ES6模块取代全局脚本

17.避免嵌套的三元运算符

18.避免过度注释

19.使用对象速记

20.避免使用eval()

21.使用textContent取代innerHTML

22.使用addEventListene代替内联事件处理程序

23.使用const和let代替var

24.使用map()、filter()和reduce()进行数组操作

25.避免document.write()

26.使用classList管理CSS类

27.使用requestAnimationFrame()实现平滑动画

28.避免同步AJAX请求

相关文章

发布评论 取消回复

共饮一杯

Oracle回收DBA权限注意事项

MongoDB 入门教学贴 从术语到操作 （约束怎么建立 内部培训贴）

RisingWave 1.10 发布！新增用户自定义聚合函数

发布评论取消回复

MongoDB 入门教学贴从术语到操作（约束怎么建立内部培训贴）