Skip to content

关于方法调用时的回调说明

回调机制概述

异步方法调用

由于Linux环境下的浏览器基本是非IE内核,所有和服务器交互的方法都是异步的。所以增加了异步方法完成的回调事件。

回调事件特点

所有增加的事件都有三个返回值:

  1. 处理类型:表示操作的类型
  2. 服务器返回代码:表示操作的结果状态
  3. 服务器输出的内容:包含服务器返回的详细信息

回调事件使用方式

基本语法

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);
    }
}

注意事项

  1. 事件绑定

    • 确保在HTML中正确绑定回调事件
    • 事件函数名要与HTML中的属性值一致
    • 注意大小写和拼写
  2. 参数处理

    • 检查参数的有效性
    • 处理可选参数的情况
    • 注意参数的数据类型
  3. 异步操作

    • 理解异步操作的特点
    • 避免在回调函数中执行同步操作
    • 合理使用异步处理
  4. 错误处理

    • 检查返回代码
    • 处理操作失败的情况
    • 提供用户友好的错误信息
  5. 性能优化

    • 避免在回调函数中执行耗时操作
    • 合理使用异步操作
    • 避免重复处理
  6. 用户体验

    • 提供及时的状态反馈
    • 显示操作进度
    • 处理用户交互
  7. 兼容性

    • 考虑不同浏览器的兼容性
    • 处理不同版本的差异
    • 测试各种场景
  8. 调试和测试

    • 记录回调事件日志
    • 测试各种回调场景
    • 验证回调功能完整性