DataManager.js:45 Uncaught SyntaxError: Unexpected token '{' (at DataManager.js:45:10)/**
* 数据管理器类，负责与后端API通信并管理数据
*/
class DataManager {
constructor(baseUrl) {
this.baseUrl = baseUrl;
this.data = {
bancais: [],
dingdans: [],
mupis: [],
chanpins: [],
kucuns: [],
dingdan_chanpin_zujians: [],
chanpin_zujians: [],
zujians: [],
caizhis: [],
dingdan_chanpins: [],
users: []
};
this.isSyncing = false;
this.lastSync = null;
// 回调注册表
this.callbacks = {
// 全局回调
all: [],
// 按实体类型分类的回调
bancais: [],
dingdan: [],
mupi: [],
chanpin: [],
kucun: [],
dingdan_chanpin_zujian: [],
chanpin_zujian: [],
zujian: [],
caizhi: [],
dingdan_chanpin: [],
user: []
// ...其他实体
};
}
export { DataManager };
/**
* 获取所有数据
* @returns {Promise<boolean>} 是否成功
*/
async fetchAll() {
try {
const response = await fetch(`${this.baseUrl}/app/all`);
if (!response.ok) throw new Error('Network response was not ok');
const result = await response.json();
if (result.status !== 200) throw new Error(result.text || 'API error');
// 更新本地数据
Object.keys(this.data).forEach(key => {
if (result.data[key]) {
this.data[key] = result.data[key];
}
});
this.lastSync = new Date();
return true;
} catch (error) {
console.error('Fetch error:', error);
return false;
}
}
/**
* 注册回调函数
* @param {string} entity - 实体类型（如'bancai'）或'all'表示全局回调
* @param {Function} callback - 回调函数，参数为(operation, data)
*/
registerCallback(entity, callback) {
if (!this.callbacks[entity]) {
this.callbacks[entity] = [];
}
this.callbacks[entity].push(callback);
}
/**
* 移除回调函数
* @param {string} entity - 实体类型
* @param {Function} callback - 要移除的回调函数
*/
unregisterCallback(entity, callback) {
if (!this.callbacks[entity]) return;
const index = this.callbacks[entity].indexOf(callback);
if (index !== -1) {
this.callbacks[entity].splice(index, 1);
}
}
/**
* 触发回调
* @param {string} operation - 操作类型（'add', 'update', 'delete'）
* @param {string} entity - 实体类型
* @param {Object} data - 相关数据
*/
triggerCallbacks(operation, entity, data) {
// 触发全局回调
this.callbacks.all.forEach(cb => cb(operation, entity, data));
// 触发特定实体回调
if (this.callbacks[entity]) {
this.callbacks[entity].forEach(cb => cb(operation, data));
}
}
/**
* 执行CRUD操作并触发回调
*/
async crudOperation(operation, entity, data) {
try {
const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
if (!response.ok) throw new Error('Network response was not ok');
const result = await response.json();
if (result.status !== 200) throw new Error(result.text || 'API error');
// 触发操作成功的回调
this.triggerCallbacks(operation, entity, data);
// 自动同步数据
this.syncData();
return result;
} catch (error) {
console.error('CRUD error:', error);
// 触发操作失败的回调
this.triggerCallbacks(`${operation}_error`, entity, {
data,
error: error.message
});
throw error;
}
}
/**
* 执行CRUD操作
* @param {string} operation - 'add', 'delete', 'update'
* @param {string} entity - 实体名称（小写）
* @param {Object} data - 要发送的数据
* @returns {Promise<Object>} 响应结果
*/
async crudOperation(operation, entity, data) {
try {
const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
if (!response.ok) throw new Error('Network response was not ok');
const result = await response.json();
if (result.status !== 200) throw new Error(result.text || 'API error');
// 触发操作成功的回调
this.triggerCallbacks(operation, entity, data);
// 自动同步数据
this.syncData();
return result;
} catch (error) {
console.error('CRUD error:', error);
// 触发操作失败的回调
this.triggerCallbacks(`${operation}_error`, entity, {
data,
error: error.message
});
throw error;
}
}
/**
* 自动同步数据（防止频繁请求）
*/
async syncData() {
if (this.isSyncing) return;
// 距离上次同步超过5秒才执行新同步
if (this.lastSync && new Date() - this.lastSync < 5000) {
setTimeout(() => this.syncData(), 5000 - (new Date() - this.lastSync));
return;
}
this.isSyncing = true;
try {
await this.fetchAll();
} finally {
this.isSyncing = false;
}
}
/**
* 添加实体
* @param {string} entity - 实体名称
* @param {Object} data - 实体数据
*/
async addEntity(entity, data) {
return this.crudOperation('add', entity, data);
}
/**
* 更新实体
* @param {string} entity - 实体名称
* @param {Object} data - 实体数据（必须包含id）
*/
async updateEntity(entity, data) {
return this.crudOperation('update', entity, data);
}
/**
* 删除实体
* @param {string} entity - 实体名称
* @param {number} id - 实体ID
*/
async deleteEntity(entity, id) {
return this.crudOperation('delete', entity, {id});
}
}
// 创建单例实例
const dataManager = new DataManager('http://your-backend-url.com');
// 初始化时获取所有数据
dataManager.fetchAll().then(() => {
console.log('Initial data loaded');
});
// 导出数据对象，外部可以直接访问 data.bancais, data.dingdans 等
export const data = dataManager.data;
// 导出操作方法
export const addEntity = dataManager.addEntity.bind(dataManager);
export const updateEntity = dataManager.updateEntity.bind(dataManager);
export const deleteEntity = dataManager.deleteEntity.bind(dataManager);
export const fetchAll = dataManager.fetchAll.bind(dataManager);
本文讨论了在项目中遇到的onkeydown()函数重写问题，并对比了两种实现方式的区别，寻求专家解答。
扫一扫
1347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
