命名规范

在前端项目中有一些通用的命名规范，这些规范可以帮助我们编写更清晰、更易于理解的代码。以下是一些常见的命名规范：

变量命名：变量名应该是小写的，多个单词之间使用下划线（snake_case）或者驼峰式（camelCase）连接。例如：my_variable 或 myVariable。
常量命名：常量名应该全部大写，多个单词之间使用下划线连接。例如：MY_CONSTANT。
函数命名：函数名应该使用动词或者动词短语，多个单词之间使用驼峰式连接。例如：getData 或 saveData。
类命名：类名应该使用名词，多个单词之间使用驼峰式连接，首字母大写。例如：MyClass。
组件命名：React组件的命名应该使用名词，多个单词之间使用驼峰式连接，首字母大写。例如：MyComponent。
文件命名：文件名应该全部小写，多个单词之间使用短横线（kebab-case）连接。例如：my-component.js。
布尔变量命名：布尔变量应该使用is、has、can等前缀，以表明它们是布尔类型。例如：isReady、hasItems。

以上是一些常见的命名规范，但具体规范可能会根据项目、团队或者个人的喜好有所不同。在一个项目中，最重要的是保持命名规范的一致性。

JS

可读性

使用有意义的变量名和函数名：

// Bad
let a = 10; // 不清楚a代表什么
function b() {} // 不清楚b函数的作用

// Good
let age = 10; // age代表年龄
function calculateSum() {} // calculateSum函数用于计算总和

避免过长的函数和组件：

// Bad
function doManyThings() {
  // 处理逻辑1
  // 处理逻辑2
  // 处理逻辑3
  // ...
}

// Good
function doThing1() {
  // 处理逻辑1
}

function doThing2() {
  // 处理逻辑2
}

function doThing3() {
  // 处理逻辑3
}

使用注释：

// Bad
let x = 10; // 设置x为10

// Good
// 使用Fibonacci算法计算第n个数
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

保持一致的代码风格：你可以使用一些工具来帮助你维护代码的统一性，如 ESLint

// Bad
let myVariable = 10;
let my_other_variable = 20;

// Good
let myVariable = 10;
let anotherVariable = 20;

避免复杂的逻辑和深层次的嵌套：比如，使用 early return 避免深层嵌套：

// Bad
if (condition1) {
  if (condition2) {
    if (condition3) {
      // 代码
    }
  }
}

// Good
if (!condition1) return;
if (!condition2) return;
if (!condition3) return;
// 代码

使用解构赋值：

// Bad
const user = getUser();
const name = user.name;
const age = user.age;

// Good
const { name, age } = getUser();

性能优化

避免全局变量：全局变量可能会导致意料之外的副作用，应尽量避免使用。可以使用模块化的方式来组织代码。

// Bad
var globalVar = "I'm global!";

// Good
(function() {
    var notGlobalVar = "I'm not global!";
})();

避免使用==，应使用===：==会进行类型转换，可能会导致一些意料之外的结果。===则不会进行类型转换。

// Bad
if (myVariable == "5") { }

// Good
if (myVariable === "5") { }

使用解构赋值：解构赋值可以使代码更清晰，更易于理解。

// Bad
const user = getUser();
const name = user.name;
const age = user.age;

// Good
const { name, age } = getUser();

优化循环：在循环中，应避免不必要的计算。例如，应将数组的长度缓存起来，而不是在每次迭代时都计算它。

// Bad
for (let i = 0; i < array.length; i++) { }

// Good
for (let i = 0, len = array.length; i < len; i++) { }

处理错误：应使用try...catch来处理可能会抛出错误的代码。

try {
    riskyOperation();
} catch (e) {
    console.error(e);
}

使用函数和模块来组织代码：将代码分割成独立的函数和模块，可以提高代码的可读性和可维护性。

// Bad
function doManyThings() {
  // 处理逻辑1
  // 处理逻辑2
  // 处理逻辑3
  // ...
}

// Good
function doThing1() {
  // 处理逻辑1
}

function doThing2() {
  // 处理逻辑2
}

function doThing3() {
  // 处理逻辑3
}

代码复用

公共函数封装：将重复的代码块封装成函数，然后在需要的地方调用这个函数。这样可以减少代码的重复，提高代码的可读性和可维护性。

function calculateSum(a, b) {
  return a + b;
}

let sum1 = calculateSum(1, 2);
let sum2 = calculateSum(3, 4);

模块化：将相关的函数和变量封装在一个模块中，然后在需要的地方导入这个模块。这样可以提高代码的组织性，使代码更易于理解和维护。

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './math.js';

let sum = add(1, 2);
let difference = subtract(3, 4);

使用高阶函数：高阶函数是接受函数作为参数或返回函数的函数。它们可以用来创建可复用的逻辑。

function greaterThan(n) {
  return m => m > n;
}

let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11)); // true

使用设计模式：设计模式是解决特定问题的优秀解决方案。例如，工厂模式可以用来创建具有相同接口的对象，策略模式可以用来封装一系列可互换的算法等。

// 工厂模式
function createPerson(name, age) {
  return { name, age };
}

let person1 = createPerson('Alice', 25);
let person2 = createPerson('Bob', 30);

React

组件化：将UI划分为一系列的可重用的组件，每个组件都应该有自己的职责和关注点。
单一职责原则：每个组件或函数应该只做一件事情。如果一个组件或函数变得过于复杂，那么应该考虑将其拆分为更小的部分。
使用函数组件和Hooks：React团队推荐使用函数组件和Hooks，因为它们可以使代码更简洁，更易于理解和测试。

4.自定义Hooks：自定义Hooks是React的特性，它们是一种可以让你将组件逻辑提取到可重用函数的方式。自定义Hooks可以让你在不增加组件的情况下重用状态逻辑。此外，自定义Hooks可以让你在不改变组件结构的情况下复用一些状态逻辑，使得这些逻辑更易于测试和理解。自定义Hooks可以使用其他React Hooks，如useState，useEffect等。

import { useState } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return { count, increment, decrement };
}

不可变性：避免直接修改状态，而是使用setState或useReducer来创建新的状态。
类型检查：使用PropTypes或TypeScript进行类型检查，可以帮助捕获类型相关的错误。
性能优化：避免不必要的渲染，使用useMemo和useCallback进行性能优化。
错误处理：使用错误边界（Error Boundaries）来捕获和处理组件树中的错误。错误边界是一种React组件，它可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且，它会渲染出备用UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

以下是一个基本的错误边界组件的示例：

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

你可以将其作为一个常规组件来使用。将其子组件树中的任何可能出错的部分用它来包裹起来，错误边界会捕获下面组件树中的任何未捕获错误，并显示出备用UI。

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

在这个例子中，如果MyComponent组件抛出错误，那么ErrorBoundary组件会捕获到这个错误，并渲染出备用UI，而不是让整个应用崩溃。

以下是一个遵循上述最佳实践的React函数组件示例：

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';

// 使用函数组件和Hooks
const Counter = ({ initialCount }) => {
  // 使用useState来管理状态
  const [count, setCount] = useState(initialCount);

  // 使用useCallback来避免在每次渲染时创建新的函数
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1); // 不直接修改状态
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
};

// 使用PropTypes进行类型检查
Counter.propTypes = {
  initialCount: PropTypes.number,
};

Counter.defaultProps = {
  initialCount: 0,
};

export default Counter;

原文链接：https://juejin.cn/post/7341720847881043995 作者：荷包蛋卷

前端代码规范

命名规范

JS

可读性

性能优化

代码复用

React

发表回复

前端代码规范

命名规范

JS

可读性

性能优化

代码复用

React

相关推荐

发表回复