在前端开发中，我们经常需要处理数据的备份和恢复操作。今天分享一个实际案例的优化过程，展示如何让代码更加优雅和可维护。
原始代码的问题
假设我们有一个用于同步用户配置的类：
class ConfigSync {
async restore(token: string) {
const cloudData = await fetchCloudData(token);
if (cloudData.theme) {
themeManager.set(cloudData.theme);
}
if (cloudData.layout) {
layoutManager.set(cloudData.layout);
}
if (cloudData.preferences) {
preferencesManager.set(cloudData.preferences);
}
// 存储本地配置
if (cloudData.fontSize) {
localStorage.setItem('app.fontSize', JSON.stringify(cloudData.fontSize));
}
if (cloudData.language) {
localStorage.setItem('app.language', JSON.stringify(cloudData.language));
}
if (cloudData.darkMode) {
localStorage.setItem('app.darkMode', JSON.stringify(cloudData.darkMode));
}
// ... 更多类似的代码
}
}
这段代码存在以下问题：
-
重复的条件判断
-
代码结构松散
-
错误处理不完善
-
可维护性差
class ConfigSync {
async restore(token: string) {
if (!token) return;
try {
const cloudData = await fetchCloudData(token);
if (!cloudData) return;
// 统一管理器配置
const managers = {
theme: themeManager,
layout: layoutManager,
preferences: preferencesManager,
};
// 批量处理管理器数据
Object.entries(managers).forEach(([key, manager]) => {
if (cloudData[key]) {
manager.set(cloudData[key]);
}
});
// 本地存储配置项
const localStorageKeys = [
'app.fontSize',
'app.language',
'app.darkMode',
];
// 批量处理本地存储
localStorageKeys.forEach(key => {
const configKey = key.split('.')[1];
if (cloudData[configKey]) {
localStorage.setItem(key, JSON.stringify(cloudData[configKey]));
}
});
} catch (error) {
console.error('Failed to restore config:', error);
}
}
}
优化要点
- 早期返回：通过早期返回避免不必要的处理逻辑
if (!token) return;
- 对象映射：使用对象统一管理相关配置
const managers = {
theme: themeManager,
layout: layoutManager,
// ...
};
- 批量处理：使用数组和循环替代重复代码
localStorageKeys.forEach(key => {
// 批量处理逻辑
});
-
错误处理：添加 try-catch 确保代码健壮性
try {
// 主要逻辑
} catch (error) {
console.error('Error:', error);
}
总结
通过以上优化，我们实现了：
-
代码更加简洁和可维护
-
减少了重复代码
-
提高了代码的可读性
-
增强了错误处理能力
这些优化原则不仅适用于配置同步，也可以应用到其他类似的数据处理场景中。记住，好的代码不仅要实现功能，更要易于维护和扩展。
