javascript闭包怎样实现模板方法

function createOperationTemplate(customHooks = {}) {
    // 默认的钩子实现，如果外部没有提供，就用这些
    const defaultHooks = {
        stepOne: () => console.log("默认步骤一：准备数据"),
        stepTwo: (data) => console.log(`默认步骤二：处理数据 - ${data}`),
        stepThree: (result) => console.log(`默认步骤三：完成并输出结果 - ${result}`),
        // 这是一个可选的钩子，不强制实现
        optionalStep: () => console.log("默认可选步骤：执行额外操作")
    };

    // 合并外部传入的钩子，覆盖默认的
    const hooks = { ...defaultHooks, ...customHooks };

    // 返回主要的模板函数
    return function executeTemplate(initialData) {
        console.log("--- 模板操作开始 ---");

        hooks.stepOne();
        const processedData = hooks.stepTwo(initialData); // 假设stepTwo会返回处理后的数据

        // 逻辑跳跃：这里可以根据processedData的某些特性，决定是否执行可选步骤
        if (typeof hooks.optionalStep === 'function') { // 确保钩子存在且是函数
            hooks.optionalStep();
        } else {
            console.log("可选步骤未提供或不可用，跳过。");
        }

        hooks.stepThree(processedData || initialData); // 如果stepTwo没返回，就用原始数据

        console.log("--- 模板操作结束 ---");
        return processedData; // 或者其他最终结果
    };
}

// 示例使用
const mySpecificOperation = createOperationTemplate({
    stepOne: () => console.log("我的自定义步骤一：从API获取最新数据"),
    stepTwo: (data) => {
        console.log(`我的自定义步骤二：对数据 "${data}" 进行复杂计算`);
        return data.toUpperCase(); // 返回一个处理后的数据
    },
    // 没有提供stepThree，将使用默认的
    optionalStep: () => console.log("我的自定义可选步骤：记录日志到服务器")
});

mySpecificOperation("hello world");

console.log("\n--- 另一个操作，只定制部分 ---");
const anotherOperation = createOperationTemplate({
    stepOne: () => console.log("另一个操作：读取本地缓存"),
    // 不提供stepTwo, stepThree, optionalStep，使用默认的
});

anotherOperation("cached_data_123");

createOperationTemplate

defaultHooks

hooks

stepTwo

defaultHooks

function createFormSubmitTemplate(config = {}) {
    const defaultProcessors = {
        getFormData: (formId) => { /* 默认实现：从DOM获取数据 */ return {}; },
        preprocessData: (data) => data, // 默认：不做处理
        validateData: (data) => { /* 默认：简单验证 */ return { isValid: true, errors: [] }; },
        sendApiRequest: async (data) => { /* 默认：模拟API请求 */ return { success: true, message: "模拟提交成功" }; },
        handleSuccess: (response) => console.log("默认成功处理:", response.message),
        handleError: (error) => console.error("默认错误处理:", error.message || error)
    };

    const processors = { ...defaultProcessors, ...config };

    return async function submitForm(formId, additionalData = {}) {
        try {
            console.log(`--- 表单 ${formId} 提交开始 ---`);
            let formData = processors.getFormData(formId);
            formData = { ...formData, ...additionalData }; // 允许额外数据传入

            const processedData = processors.preprocessData(formData);
            console.log("预处理后数据:", processedData);

            const validationResult = processors.validateData(processedData);
            if (!validationResult.isValid) {
                console.warn("数据验证失败:", validationResult.errors);
                processors.handleError({ message: "验证失败", details: validationResult.errors });
                return false; // 中断流程
            }
            console.log("数据验证通过。");

            const apiResponse = await processors.sendApiRequest(processedData);
            if (apiResponse.success) {
                processors.handleSuccess(apiResponse);
            } else {
                processors.handleError(apiResponse);
            }
            console.log(`--- 表单 ${formId} 提交结束 ---`);
            return apiResponse.success;

        } catch (error) {
            console.error("提交过程中发生意外错误:", error);
            processors.handleError(error);
            return false;
        }
    };
}

// 针对用户注册表单的定制
const registerFormSubmitter = createFormSubmitTemplate({
    getFormData: (formId) => {
        const formElement = document.getElementById(formId);
        return {
            username: formElement.querySelector('#username').value,
            email: formElement.querySelector('#email').value,
            password: formElement.querySelector('#password').value
        };
    },
    preprocessData: (data) => {
        data.email = data.email.toLowerCase().trim();
        return data;
    },
    validateData: (data) => {
        const errors = [];
        if (!data.username) errors.push("用户名不能为空");
        if (!data.email.includes('@')) errors.push("邮箱格式不正确");
        if (data.password.length < 6) errors.push("密码至少6位");
        return { isValid: errors.length === 0, errors };
    },
    sendApiRequest: async (data) => {
        console.log("发送注册请求到后端:", data);
        // 实际中会是 fetch('/api/register', { method: 'POST', body: JSON.stringify(data) })
        return new Promise(resolve => setTimeout(() => {
            if (data.username === "admin") { // 模拟后端验证失败
                resolve({ success: false, message: "用户名 'admin' 已存在" });
            } else {
                resolve({ success: true, message: "注册成功！" });
            }
        }, 1000));
    },
    handleSuccess: (response) => alert(`注册成功: ${response.message}`),
    handleError: (error) => alert(`注册失败: ${error.message || JSON.stringify(error)}`)
});

// 假设页面上有 <form id="registerForm"> 和相应的输入框
// registerFormSubmitter('registerForm'); // 在实际事件监听器中调用

createFormSubmitTemplate

submitForm

createFormSubmitTemplate

validateData

createFormSubmitTemplate