如何实现js复用
使用函数封装复用逻辑
将重复代码封装成函数，通过参数传递差异化部分。例如表单验证逻辑可抽象为通用验证函数：
function validateInput(input, rules) {
return rules.every(rule => rule.test(input.value));
}采用模块化开发
使用ES6模块化拆分功能，通过import/export实现复用：
// utils.js
export function formatDate(date) {
return new Date(date).toLocaleString();
}
// app.js
import { formatDate } from './utils.js';创建自定义Hooks（React）
在React中提取状态逻辑为可复用的Hook：
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}设计高阶组件
通过高阶组件包装通用功能，如权限校验：
const withAuth = (WrappedComponent) => {
return (props) => {
return isLogin ? <WrappedComponent {...props} /> : <Redirect to="/login" />;
};
};使用Mixin模式（Vue）
Vue2中可通过mixin共享组件选项：
const logMixin = {
created() {
console.log(`Component ${this.$options.name} created`);
}
};
Vue.component('example', {
mixins: [logMixin],
// ...
});构建工具类库
将通用工具方法集中管理：
class StringUtils {
static trimExtraSpaces(str) {
return str.replace(/\s+/g, ' ').trim();
}
}应用设计模式
使用工厂模式创建相似对象：
class DialogFactory {
static create(type) {
switch(type) {
case 'alert': return new AlertDialog();
case 'confirm': return new ConfirmDialog();
}
}
}服务化共享逻辑
将数据获取等逻辑封装为服务：
const UserService = {
getUsers: () => axios.get('/api/users'),
createUser: (data) => axios.post('/api/users', data)
};
