Appearance
关于方法调用时的回调说明
回调机制概述
异步方法调用
由于Linux环境下的浏览器基本是非IE内核,所有和服务器交互的方法都是异步的。所以增加了异步方法完成的回调事件。
回调事件特点
所有增加的事件都有三个返回值:
- 处理类型:表示操作的类型
- 服务器返回代码:表示操作的结果状态
- 服务器输出的内容:包含服务器返回的详细信息
回调事件使用方式
基本语法
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
width='1000' height='600'
ForOn[方法名]='[回调函数名]'>
</object>
回调函数格式
javascript
function [回调函数名](type, code, html) {
// type: 处理类型
// code: 服务器返回代码
// html: 服务器输出的内容
}
常用回调事件
AddTemplateFromURL 回调
事件绑定
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
width='1000' height='600'
ForOnAddTemplateFromURL='OnAddTemplateFromURL'>
</object>
回调函数
javascript
function OnAddTemplateFromURL(type, code, html) {
console.log("AddTemplateFromURL执行之后触发");
console.log("处理类型:", type);
console.log("返回代码:", code);
console.log("输出内容:", html);
// 根据返回代码处理结果
if (code === 0) {
console.log("模板加载成功");
handleTemplateLoadSuccess(html);
} else {
console.error("模板加载失败,错误代码:", code);
handleTemplateLoadError(code, html);
}
}
// 处理模板加载成功
function handleTemplateLoadSuccess(content) {
console.log("模板内容:", content);
// 执行模板加载成功后的操作
initializeTemplate();
updateUI();
}
// 处理模板加载失败
function handleTemplateLoadError(errorCode, errorMessage) {
console.error("模板加载失败:", errorCode, errorMessage);
// 显示错误信息
showErrorMessage("模板加载失败:" + errorMessage);
// 执行错误处理
handleError(errorCode);
}
SaveToURL 回调
事件绑定
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
width='1000' height='600'
ForOnSaveToURL='OnSaveToURL'>
</object>
回调函数
javascript
function OnSaveToURL(type, code, html) {
console.log("SaveToURL执行之后触发");
console.log("处理类型:", type);
console.log("返回代码:", code);
console.log("输出内容:", html);
// 根据返回代码处理结果
if (code === 0) {
console.log("文档保存成功");
handleSaveSuccess(html);
} else {
console.error("文档保存失败,错误代码:", code);
handleSaveError(code, html);
}
}
// 处理保存成功
function handleSaveSuccess(content) {
console.log("保存结果:", content);
// 更新文档状态
updateDocumentStatus("已保存");
// 显示成功消息
showSuccessMessage("文档保存成功");
// 记录保存日志
logSaveOperation(content);
}
// 处理保存失败
function handleSaveError(errorCode, errorMessage) {
console.error("保存失败:", errorCode, errorMessage);
// 显示错误信息
showErrorMessage("文档保存失败:" + errorMessage);
// 执行错误处理
handleSaveError(errorCode);
}
OpenFromURL 回调
事件绑定
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
width='1000' height='600'
ForOnOpenFromURL='OnOpenFromURL'>
</object>
回调函数
javascript
function OnOpenFromURL(type, code, html) {
console.log("OpenFromURL执行之后触发");
console.log("处理类型:", type);
console.log("返回代码:", code);
console.log("输出内容:", html);
// 根据返回代码处理结果
if (code === 0) {
console.log("文档打开成功");
handleOpenSuccess(html);
} else {
console.error("文档打开失败,错误代码:", code);
handleOpenError(code, html);
}
}
// 处理打开成功
function handleOpenSuccess(content) {
console.log("打开结果:", content);
// 更新文档状态
updateDocumentStatus("已打开");
// 显示成功消息
showSuccessMessage("文档打开成功");
// 初始化文档
initializeDocument();
}
// 处理打开失败
function handleOpenError(errorCode, errorMessage) {
console.error("打开失败:", errorCode, errorMessage);
// 显示错误信息
showErrorMessage("文档打开失败:" + errorMessage);
// 执行错误处理
handleOpenError(errorCode);
}
回调事件管理器
回调事件管理器类
javascript
// 回调事件管理器
class CallbackEventManager {
constructor() {
this.callbacks = new Map();
this.errorHandlers = new Map();
this.successHandlers = new Map();
}
// 注册回调函数
registerCallback(methodName, callback) {
this.callbacks.set(methodName, callback);
}
// 注册错误处理器
registerErrorHandler(methodName, handler) {
this.errorHandlers.set(methodName, handler);
}
// 注册成功处理器
registerSuccessHandler(methodName, handler) {
this.successHandlers.set(methodName, handler);
}
// 处理回调事件
handleCallback(methodName, type, code, html) {
console.log("处理回调事件:", methodName);
console.log("处理类型:", type);
console.log("返回代码:", code);
console.log("输出内容:", html);
// 执行回调函数
if (this.callbacks.has(methodName)) {
try {
this.callbacks.get(methodName)(type, code, html);
} catch (error) {
console.error("回调函数执行失败:", error);
}
}
// 根据返回代码处理结果
if (code === 0) {
this.handleSuccess(methodName, html);
} else {
this.handleError(methodName, code, html);
}
}
// 处理成功
handleSuccess(methodName, content) {
console.log("操作成功:", methodName);
if (this.successHandlers.has(methodName)) {
try {
this.successHandlers.get(methodName)(content);
} catch (error) {
console.error("成功处理器执行失败:", error);
}
}
}
// 处理错误
handleError(methodName, errorCode, errorMessage) {
console.error("操作失败:", methodName, errorCode, errorMessage);
if (this.errorHandlers.has(methodName)) {
try {
this.errorHandlers.get(methodName)(errorCode, errorMessage);
} catch (error) {
console.error("错误处理器执行失败:", error);
}
}
}
}
// 创建回调事件管理器实例
const callbackEventManager = new CallbackEventManager();
// 注册回调函数
callbackEventManager.registerCallback('AddTemplateFromURL', function(type, code, html) {
console.log("AddTemplateFromURL回调:", type, code, html);
});
callbackEventManager.registerCallback('SaveToURL', function(type, code, html) {
console.log("SaveToURL回调:", type, code, html);
});
callbackEventManager.registerCallback('OpenFromURL', function(type, code, html) {
console.log("OpenFromURL回调:", type, code, html);
});
// 注册成功处理器
callbackEventManager.registerSuccessHandler('AddTemplateFromURL', function(content) {
console.log("模板加载成功:", content);
// 执行成功后的操作
});
callbackEventManager.registerSuccessHandler('SaveToURL', function(content) {
console.log("文档保存成功:", content);
// 执行成功后的操作
});
callbackEventManager.registerSuccessHandler('OpenFromURL', function(content) {
console.log("文档打开成功:", content);
// 执行成功后的操作
});
// 注册错误处理器
callbackEventManager.registerErrorHandler('AddTemplateFromURL', function(errorCode, errorMessage) {
console.error("模板加载失败:", errorCode, errorMessage);
// 执行错误处理
});
callbackEventManager.registerErrorHandler('SaveToURL', function(errorCode, errorMessage) {
console.error("文档保存失败:", errorCode, errorMessage);
// 执行错误处理
});
callbackEventManager.registerErrorHandler('OpenFromURL', function(errorCode, errorMessage) {
console.error("文档打开失败:", errorCode, errorMessage);
// 执行错误处理
});
回调事件工具函数
javascript
// 回调事件工具函数
class CallbackUtils {
// 创建回调函数
static createCallback(methodName, successHandler, errorHandler) {
return function(type, code, html) {
console.log("回调事件:", methodName, type, code, html);
if (code === 0) {
if (successHandler) {
successHandler(html);
}
} else {
if (errorHandler) {
errorHandler(code, html);
}
}
};
}
// 创建成功处理器
static createSuccessHandler(message, action) {
return function(content) {
console.log("操作成功:", message);
if (action) {
action(content);
}
};
}
// 创建错误处理器
static createErrorHandler(message, action) {
return function(errorCode, errorMessage) {
console.error("操作失败:", message, errorCode, errorMessage);
if (action) {
action(errorCode, errorMessage);
}
};
}
// 批量创建回调函数
static createBatchCallbacks(methods) {
var callbacks = {};
methods.forEach(function(method) {
callbacks[method.name] = CallbackUtils.createCallback(
method.name,
method.successHandler,
method.errorHandler
);
});
return callbacks;
}
}
// 使用示例
var methods = [
{
name: 'AddTemplateFromURL',
successHandler: function(content) {
console.log("模板加载成功:", content);
},
errorHandler: function(errorCode, errorMessage) {
console.error("模板加载失败:", errorCode, errorMessage);
}
},
{
name: 'SaveToURL',
successHandler: function(content) {
console.log("文档保存成功:", content);
},
errorHandler: function(errorCode, errorMessage) {
console.error("文档保存失败:", errorCode, errorMessage);
}
}
];
var callbacks = CallbackUtils.createBatchCallbacks(methods);
完整示例
文档操作回调处理
javascript
// 文档操作回调处理
class DocumentOperationCallbacks {
constructor() {
this.operations = new Map();
this.initOperations();
}
// 初始化操作
initOperations() {
this.operations.set('AddTemplateFromURL', {
success: this.handleTemplateLoadSuccess,
error: this.handleTemplateLoadError
});
this.operations.set('SaveToURL', {
success: this.handleSaveSuccess,
error: this.handleSaveError
});
this.operations.set('OpenFromURL', {
success: this.handleOpenSuccess,
error: this.handleOpenError
});
}
// 处理模板加载成功
handleTemplateLoadSuccess(content) {
console.log("模板加载成功:", content);
// 更新UI状态
updateUIState('templateLoaded');
// 显示成功消息
showSuccessMessage("模板加载成功");
// 初始化模板
initializeTemplate();
}
// 处理模板加载失败
handleTemplateLoadError(errorCode, errorMessage) {
console.error("模板加载失败:", errorCode, errorMessage);
// 显示错误消息
showErrorMessage("模板加载失败:" + errorMessage);
// 重置UI状态
resetUIState();
}
// 处理保存成功
handleSaveSuccess(content) {
console.log("文档保存成功:", content);
// 更新文档状态
updateDocumentStatus('saved');
// 显示成功消息
showSuccessMessage("文档保存成功");
// 记录保存日志
logSaveOperation(content);
}
// 处理保存失败
handleSaveError(errorCode, errorMessage) {
console.error("文档保存失败:", errorCode, errorMessage);
// 显示错误消息
showErrorMessage("文档保存失败:" + errorMessage);
// 恢复文档状态
restoreDocumentState();
}
// 处理打开成功
handleOpenSuccess(content) {
console.log("文档打开成功:", content);
// 更新文档状态
updateDocumentStatus('opened');
// 显示成功消息
showSuccessMessage("文档打开成功");
// 初始化文档
initializeDocument();
}
// 处理打开失败
handleOpenError(errorCode, errorMessage) {
console.error("文档打开失败:", errorCode, errorMessage);
// 显示错误消息
showErrorMessage("文档打开失败:" + errorMessage);
// 重置文档状态
resetDocumentState();
}
}
// 创建文档操作回调处理实例
const documentOperationCallbacks = new DocumentOperationCallbacks();
// 全局回调函数
function OnAddTemplateFromURL(type, code, html) {
if (code === 0) {
documentOperationCallbacks.handleTemplateLoadSuccess(html);
} else {
documentOperationCallbacks.handleTemplateLoadError(code, html);
}
}
function OnSaveToURL(type, code, html) {
if (code === 0) {
documentOperationCallbacks.handleSaveSuccess(html);
} else {
documentOperationCallbacks.handleSaveError(code, html);
}
}
function OnOpenFromURL(type, code, html) {
if (code === 0) {
documentOperationCallbacks.handleOpenSuccess(html);
} else {
documentOperationCallbacks.handleOpenError(code, html);
}
}
注意事项
事件绑定:
- 确保在HTML中正确绑定回调事件
- 事件函数名要与HTML中的属性值一致
- 注意大小写和拼写
参数处理:
- 检查参数的有效性
- 处理可选参数的情况
- 注意参数的数据类型
异步操作:
- 理解异步操作的特点
- 避免在回调函数中执行同步操作
- 合理使用异步处理
错误处理:
- 检查返回代码
- 处理操作失败的情况
- 提供用户友好的错误信息
性能优化:
- 避免在回调函数中执行耗时操作
- 合理使用异步操作
- 避免重复处理
用户体验:
- 提供及时的状态反馈
- 显示操作进度
- 处理用户交互
兼容性:
- 考虑不同浏览器的兼容性
- 处理不同版本的差异
- 测试各种场景
调试和测试:
- 记录回调事件日志
- 测试各种回调场景
- 验证回调功能完整性