如何实现js复用
实现JavaScript复用的方法
JavaScript复用可以通过多种方式实现，包括模块化、函数封装、设计模式等。以下是几种常见的方法：
模块化开发
使用ES6模块化语法可以将代码分割成多个文件，便于复用和维护。通过export导出模块，import导入模块。
// 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(date) {
return new Date(date).toLocaleDateString();
}
console.log(formatDate('2023-10-01')); // 输出本地化日期格式高阶函数
高阶函数接收函数作为参数或返回函数，可以用于抽象通用逻辑。
function withLogging(fn) {
return function(...args) {
console.log('函数调用开始');
const result = fn(...args);
console.log('函数调用结束');
return result;
};
}
const loggedAdd = withLogging(add);
loggedAdd(1, 2);设计模式
使用设计模式如工厂模式、单例模式等，可以提升代码复用性和可维护性。
// 单例模式
const Singleton = (function() {
let instance;
function createInstance() {
return {
name: 'Singleton',
log: function() { console.log(this.name); }
};
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
const instance1 = Singleton.getInstance();
instance1.log(); // 输出Singleton继承与组合
通过类继承或对象组合实现代码复用。ES6的class语法支持继承。
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.`);
}
}
const dog = new Dog('Rex');
dog.speak();工具库与第三方库
使用Lodash、Ramda等工具库，或React、Vue等框架提供的复用机制（如组件、Hooks）。
import _ from 'lodash';
const array = [1, 2, 3];
const reversed = _.reverse(array); // [3, 2, 1]自定义Hooks（React）
在React中，自定义Hooks可以封装逻辑并在多个组件中复用。
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => setData(data));
}, [url]);
return data;
}
// 在组件中使用
const data = useFetch('https://api.example.com/data');通过以上方法，可以有效实现JavaScript代码的复用，提升开发效率和代码质量。
