当前位置：首页 > JavaScript

如何实现js复用

2026-03-15 23:29:59JavaScript

实现 JavaScript 复用的方法

模块化开发（ES6 Modules）

使用 ES6 的 import 和 export 语法将代码拆分为多个模块，按需引入功能。
示例：

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

// main.js
import { add } from './utils.js';
console.log(add(1, 2)); // 输出 3

函数封装

将重复逻辑封装为函数，通过参数实现动态调用。
示例：

function formatDate(timestamp, format = 'YYYY-MM-DD') {
  // 格式化日期逻辑
  return formattedDate;
}
// 多处调用
formatDate(1625097600000, 'YYYY/MM/DD');

类与继承（OOP）

通过类继承实现代码复用，共享属性和方法。
示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    super.speak(); // 复用父类方法
    console.log(`${this.name} barks.`);
  }
}

高阶函数

接收或返回函数的函数，用于抽象通用逻辑。
示例：

function withLogging(fn) {
  return function(...args) {
    console.log('函数调用开始');
    const result = fn(...args);
    console.log('函数调用结束');
    return result;
  };
}
const loggedAdd = withLogging(add);

工具库与第三方包

利用 Lodash、Ramda 等工具库减少重复代码。
示例：

import _ from 'lodash';
const debouncedFn = _.debounce(() => {
  console.log('防抖执行');
}, 300);

设计模式

采用单例、工厂等设计模式复用对象或逻辑。
单例模式示例：

class Logger {
  constructor() {
    if (!Logger.instance) {
      Logger.instance = this;
    }
    return Logger.instance;
  }
  log(message) {
    console.log(message);
  }
}
const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true

Web Components

通过自定义元素封装可复用的 UI 组件。
示例：

如何实现js复用

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>自定义按钮</button>`;
  }
}
customElements.define('my-button', MyButton);
// HTML 中直接使用 <my-button></my-button>