作为一名有8年经验的前端老司机，我见过太多因为缺乏设计思维而变得难以维护的项目。今天就想和大家聊聊，如何用设计模式让我们的前端代码变得更优雅、更健壮。
设计模式不是摆设，而是解决问题的工具
刚开始接触设计模式时，我也觉得这些概念很抽象。直到接手一个大型电商项目，发现组件间通信乱成一团，状态管理像意大利面条一样纠缠不清，这才意识到设计模式的重要性。
设计模式不是用来炫技的，它们是被无数开发者验证过的解决方案。就像乐高积木有标准接口一样，设计模式为我们提供了标准的代码组织方式。
三个最实用的前端设计模式
观察者模式：组件通信的救星
你一定遇到过这样的场景：一个组件的状态变化需要通知多个无关组件。用props层层传递？太麻烦！用全局状态管理？杀鸡用牛刀！
这时观察者模式就是最佳选择。我在最近的项目中实现了一个简单的事件中心：
class EventCenter {
constructor() {
this.events = {};
}
on(event, fn) {
this.events[event] = this.events[event] || [];
this.events[event].push(fn);
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(fn => fn(data));
}
}
}
这样，任何组件都可以订阅感兴趣的事件，完全解耦了组件间的直接依赖。在用户登录状态变化时，我只需要eventCenter.emit('login', userInfo)，所有关心登录状态的组件都会自动更新。
策略模式：让代码更灵活
表单验证是策略模式的经典应用场景。以前我们项目中的验证逻辑是这样的：
function validate(value, type) {
if (type === 'email') {
return /^w+@w+.w+$/.test(value);
} else if (type === 'phone') {
return /^1[3-9]d{9}$/.test(value);
}
// 更多if else...
}
这种写法不仅难以维护，每次新增验证规则都要修改原函数。用策略模式重构后：
const strategies = {
email: value => /^w+@w+.w+$/.test(value),
phone: value => /^1[3-9]d{9}$/.test(value),
password: value => value.length >= 8
};
function validate(value, type) {
return strategies[type]?.(value) ?? false;
}
现在要新增验证规则，只需要在strategies对象中添加新策略，完全符合开闭原则。
装饰器模式：不修改原代码增强功能
在React项目中，我们经常需要给组件添加相同的逻辑，比如日志记录、权限校验等。高阶组件就是装饰器模式的典型实现：
function withLogging(WrappedComponent) {
return function(props) {
console.log(`渲染组件: ${WrappedComponent.name}`);
return <WrappedComponent {...props} />;
};
}
这样，任何组件只需要export default withLogging(MyComponent)就能自动获得日志功能，而不需要修改原组件代码。
框架中的设计模式实践
React中的复合组件模式
React的Context API完美诠释了复合组件模式。我在开发设计系统时，经常用这种方式实现主题切换：
const ThemeContext = createContext('light');
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
// 使用
function ThemedButton() {
const { theme } = useContext(ThemeContext);
return <button className={`btn-${theme}`}>按钮</button>;
}
Vue中的组合式函数
Vue 3的组合式API让代码复用变得异常简单。我封装了一个获取数据的hook：
export function useFetch(url) {
const data = ref(null);
const error = ref(null);
const fetchData = async () => {
try {
const res = await axios.get(url);
data.value = res.data;
} catch (err) {
error.value = err;
}
};
onMounted(fetchData);
return { data, error };
}
现在任何组件需要获取数据，只需要三行代码：
const { data, error } = useFetch('/api/data');
设计模式使用的三个原则
- 不要为了用而用：发现代码有坏味道时才考虑引入模式
- 保持简单：能用一个模式解决的问题不要用两个
- 团队共识：确保团队成员都理解所用的模式
如何学习设计模式
我推荐的学习路径是：
- 先写几年代码，积累痛点
- 学习《Head First设计模式》
- 在项目中刻意练习
- 参与开源项目学习他人实践
记住，设计模式是手段不是目的。真正优秀的代码不是用了多少设计模式，而是用最简单的方式解决了问题。当你发现自己在重复解决相似问题时，不妨看看是否有现成的设计模式可以借鉴。
