如何改写JavaScript代码将硬编码值替换为动态值？

我有一段JavaScript函数代码：

window.registerWebAuthn = function () {
    const publicKeyCredentialCreationOptions = {
        challenge: new Uint8Array(26),
        rp: {
            name: "Example",
            id  : "localhost"
        },
        user: {
            id: new Uint8Array(26),
            name: "xyz@test.com",
            displayName: "Foo Bar"
        }
    };
};

其中rp.id、rp.name，以及user.name、user.displayName都是硬编码的字符串，我想改成使用动态值，该怎么实现？

方案1：给函数传入动态参数 #

最直接的方式是让函数接收参数，把需要动态的值作为参数传入：

window.registerWebAuthn = function (rpConfig, userConfig) {
    const publicKeyCredentialCreationOptions = {
        challenge: new Uint8Array(26),
        rp: {
            name: rpConfig.name,
            id: rpConfig.id
        },
        user: {
            id: new Uint8Array(26),
            name: userConfig.name,
            displayName: userConfig.displayName
        }
    };
    // 后续的WebAuthn注册逻辑...
};

// 调用示例
registerWebAuthn(
    { name: "My App", id: "myapp.com" },
    { name: "user@myapp.com", displayName: "John Doe" }
);

方案2：使用外部变量/全局配置 #

如果动态值来自全局配置或其他模块的变量，可以直接引用：

// 假设这是外部定义的动态配置
const appConfig = {
    rp: { name: "My Dynamic App", id: "dynamic.example.com" },
    currentUser: { name: "current.user@example.com", displayName: "Current User" }
};

window.registerWebAuthn = function () {
    const publicKeyCredentialCreationOptions = {
        challenge: new Uint8Array(26),
        rp: {
            name: appConfig.rp.name,
            id: appConfig.rp.id
        },
        user: {
            id: new Uint8Array(26),
            name: appConfig.currentUser.name,
            displayName: appConfig.currentUser.displayName
        }
    };
    // 后续的WebAuthn注册逻辑...
};

方案3：从DOM元素获取值 #

如果值来自页面表单或其他DOM元素，可直接读取：

window.registerWebAuthn = function () {
    // 从DOM获取动态值
    const rpName = document.getElementById("rp-name").value;
    const rpId = document.getElementById("rp-id").value;
    const userName = document.getElementById("user-email").value;
    const userDisplayName = document.getElementById("user-display-name").value;

    const publicKeyCredentialCreationOptions = {
        challenge: new Uint8Array(26),
        rp: {
            name: rpName,
            id: rpId
        },
        user: {
            id: new Uint8Array(26),
            name: userName,
            displayName: userDisplayName
        }
    };
    // 后续的WebAuthn注册逻辑...
};

方案4：异步从API获取动态配置 #

如果值需要从后端接口获取，用异步函数实现：

window.registerWebAuthn = async function () {
    // 从API获取动态配置
    const response = await fetch("/api/webauthn/config");
    const dynamicConfig = await response.json();

    const publicKeyCredentialCreationOptions = {
        challenge: new Uint8Array(26),
        rp: {
            name: dynamicConfig.rp.name,
            id: dynamicConfig.rp.id
        },
        user: {
            id: new Uint8Array(26),
            name: dynamicConfig.user.name,
            displayName: dynamicConfig.user.displayName
        }
    };
    // 后续的WebAuthn注册逻辑...
};

内容的提问来源于stack exchange，提问作者user2379123