JavaScript如何用Proxy实现数据验证

function createValidatedObject(target) {
    const validator = {
        set(obj, prop, value) {
            // 示例：验证age必须是大于0的数字
            if (prop === 'age') {
                if (typeof value !== 'number' || value <= 0) {
                    console.error(`Validation Error: ${prop} must be a positive number. Received: ${value}`);
                    // 阻止赋值，或者抛出错误
                    // return false; // 在严格模式下，返回false会抛出TypeError
                    throw new TypeError(`Age must be a positive number.`);
                }
            }
            // 示例：验证name不能为空字符串
            if (prop === 'name') {
                if (typeof value !== 'string' || value.trim() === '') {
                    console.error(`Validation Error: ${prop} cannot be empty. Received: '${value}'`);
                    throw new Error(`Name cannot be empty.`);
                }
            }
            // 如果所有验证通过，将值赋给原始对象
            // 使用Reflect.set是推荐的做法，它能保持正确的this上下文
            return Reflect.set(obj, prop, value);
        },
        // 也可以添加get陷阱进行读取验证，比如确保敏感信息不被直接读取
        // get(obj, prop) {
        //     if (prop === 'password') {
        //         console.warn("Accessing password directly!");
        //     }
        //     return Reflect.get(obj, prop);
        // }
    };

    return new Proxy(target, validator);
}

// 使用示例
const user = {
    name: 'Alice',
    age: 30,
    email: 'alice@example.com'
};

const validatedUser = createValidatedObject(user);

console.log("--- 尝试有效赋值 ---");
try {
    validatedUser.age = 31; // 成功
    console.log("User age set to:", validatedUser.age);
    validatedUser.name = "Bob Smith"; // 成功
    console.log("User name set to:", validatedUser.name);
} catch (e) {
    console.error("Caught error:", e.message);
}

console.log("\n--- 尝试无效赋值 ---");
try {
    validatedUser.age = -5; // 失败，抛出错误
} catch (e) {
    console.error("Caught error for age:", e.message);
}

try {
    validatedUser.name = ""; // 失败，抛出错误
} catch (e) {
    console.error("Caught error for name:", e.message);
}

try {
    validatedUser.age = "twenty"; // 失败，抛出错误
} catch (e) {
    console.error("Caught error for age type:", e.message);
}

// 注意：未被代理的属性赋值不受影响
validatedUser.email = "bob.smith@example.com";
console.log("User email (unvalidated) set to:", validatedUser.email);

// 简单日志记录示例
function createLoggingProxy(obj, name = 'Object') {
    return new Proxy(obj, {
        get(target, prop, receiver) {
            console.log(`[${name} Log] Accessing property: ${String(prop)}`);
            return Reflect.get(target, prop, receiver);
        },
        set(target, prop, value, receiver) {
            console.log(`[${name} Log] Setting property: ${String(prop)} to`, value);
            return Reflect.set(target, prop, value, receiver);
        },
        apply(target, thisArg, argumentsList) {
            console.log(`[${name} Log] Calling function with args:`, argumentsList);
            return Reflect.apply(target, thisArg, argumentsList);
        }
    });
}

const myConfig = createLoggingProxy({
    debugMode: false,
    apiUrl: '/api/v1'
}, 'Config');

myConfig.debugMode = true; // 会输出日志
console.log(myConfig.apiUrl); // 会输出日志

const myFunc = createLoggingProxy(() => console.log('Function executed!'), 'MyFunction');
myFunc(); // 会输出日志

// 延续之前的 createValidatedObject 函数
try {
    validatedUser.age = "invalid";
} catch (error) {
    console.error("数据验证失败:", error.message);
    // 在这里可以触发用户界面的反馈机制
    displayValidationError('age', error.message);
}

function displayValidationError(field, message) {
    // 假设你有一个DOM元素来显示错误信息
    const errorElement = document.getElementById(`${field}-error`);
    if (errorElement) {
        errorElement.textContent = message;
        errorElement.style.color = 'red';
    }
    // 或者使用一个更通用的通知系统
    alert(`Error for ${field}: ${message}`);
}

class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = "ValidationError";
        this.field = field;
    }
}

// 在Proxy的set陷阱中
if (prop === 'age') {
    if (typeof value !== 'number' || value <= 0) {
        throw new ValidationError("年龄必须是正数", "age");
    }
}

// 在捕获错误时
try {
    validatedUser.age = -1;
} catch (e) {
    if (e instanceof ValidationError) {
        console.error(`字段 ${e.field} 验证失败: ${e.message}`);
        // 针对特定字段的UI反馈
    } else {
        console.error("未知错误:", e.message);
    }
}