如何在Javascript中将对象作为参数传递？

Question

我看到一些与我问题相关的帖子，但并没有找到我想要的答案。我想要做一些类似于jQuery经常做的事情，类似于这样：

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

我尝试了以下方法来达到我的目的，但它并没有起作用：

var prop = {
    media: '',
    type: ''
};

function createCSS(href, prop) {
    var anchor = document.createElement("link");
    anchor.setAttribute("href", href);
    anchor.setAttribute("media", prop.media);
    anchor.setAttribute("type", prop.type);

    if(typeof anchor != "undefined") {
        document.getElementsByTagName("head")[0].appendChild( anchor );
    }
}

我知道我可以只创建单个多参数，例如createCSS("mystyle.css", "screen", "text/css"); 但我不喜欢这样做，另一种方式看起来更酷。

我对javascript很陌生，所以非常感谢任何帮助！

- ModernDesigner

---

你尝试过只是删除 var prop = { ... } 声明吗？然后测试其他所有功能是否正常... - gustavodidomenico

Answer 1

您不必声明/初始化var prop。您的函数看起来很好，只需调用它并将一个对象作为prop传递，就像您自己的示例中一样：

createCSS("mystyle.css", {
    media: "screen",
    type: "text/css"
});

如果使用 var prop 的意图是避免将 undefined 分配给属性，那么你需要在函数内部进行一些微调：

function createCSS(href, prop) {
    prop = (typeof prop !== "object") ? {} : prop;
    prop.media = prop.media || 'screen';  // default media will be screen
    prop.href = prop.href || 'text/css';  // default type will be text/css
    // rest of code
}

我提供一些小改进建议:

• 你的变量anchor没有包含锚点(<a>)元素。为什么不称其为link？
• 你似乎不需要if(typeof anchor != "undefined")条件语句。由于你在几行代码之前创建了该元素，所以该变量永远不会是未定义的。你可以跳过这个if并直接使用appendChild。

- bfavaretto

---

哦，哇。好的。我认为 prop.media 和 prop.type 会呈现未定义。谢谢！ - ModernDesigner

你可以预先定义 prop，但在这种情况下不要忘记将其包含在调用中：createCSS（“mystyle.css”，prop）。 - kms

你已经有它了，只是不知道而已 :). 另外，我刚刚添加了一些建议，可能会帮助你改进你的代码。 - bfavaretto

@Bfavaretto 哇！谢谢。我喜欢它。还有感谢您让我知道不必要的条件语句。我在网上搜索时发现了它，但实际上并不喜欢它的外观。您提供的建议也很好。 - ModernDesigner

Answer 2

我尝试了这个方法来实现我的目标，但它没有起作用。

你传递对象的方式是正确的。虽然函数中有一些有趣的选择，但它确实能做到你所要求的功能。但是，你检查过创建的链接吗？它缺少rel指令，这是一个必需的。

你可能想把你的函数改成这样：

function createCSS(href, prop) {
 var anchor = document.createElement("link");
 anchor.setAttribute("href", href);
 anchor.setAttribute("media", prop.media);
 anchor.setAttribute("type", prop.type);
 anchor.setAttribute("rel", prop.rel);
 document.getElementsByTagName("head")[0].appendChild( anchor );
}

var prop = { 
 media: "screen",
 type: "text/css",
 rel: "stylesheet"
}

createCSS( "mystyle.css", prop );

- Travis J

---

@TravisJ 谢谢！实际上我花了大约10分钟才弄清楚为什么“test.css”不起作用，原因是“rel”。+1 - ModernDesigner