【问题标题】：Creating and passing a JavaScript Object with parameters/settings/options使用参数/设置/选项创建和传递 JavaScript 对象
【发布时间】：2018-09-07 15:08:53
【问题描述】：

我正在尝试将一些参数/设置/选项传递给我的外部脚本。这些参数需要在 HTML 文档中出现的脚本标记中。我希望将默认设置包含在外部脚本中，但如果传递的 person 对象具有更新的设置，则会被覆盖。对此的任何建议将不胜感激！

$(document).ready(function() {
// Default settings to be overwritten
var def_person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

var person = Object.assign({}, def_person, newPerson);
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + ". He is " + person.age + " years old!";

});

<!DOCTYPE html>
<html>
<head>
<!-- Will not work if included in head -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<p>Creating and passing a JavaScript Object.</p>

<p id="demo"></p>

<script>
  newPerson = { 
  	firstName : 'Mr.',
  	lastName : 'Livingston',
  	age : 42
}
</script>


</body>
</html>

【问题讨论】：

$("#demo").person({ 说你对 jQuery 做了一个扩展......
因此了解模板框架，您可以在其中更改数据时更新 UI。
@epascarello，感谢您的回复。我正在尝试将更新的参数传递给我的外部脚本，以便它影响我的 JavaScript 对象的设置。我正在尝试实施一种类似于 FancyBox 的干净解决方案。

标签： javascript html parameters javascript-objects

【解决方案1】：

使用Object.assign 或扩展运算符合并值，并通过导出函数传递输入。

var def_person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

function updatePerson(newPerson) {
  var person = Object.assign({}, def_person, newPerson)
  // or {...def_person, ...newPerson}
  document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + ". He is " + person.age + " years old!";
}


function init() {
  updatePerson({})
}

// Testing
init()
updatePerson({
  firstName: 'Mr.'
})

&lt;div id='demo'&gt;&lt;/div&gt;

通过全局传递给脚本

如果您想将参数传递给脚本，而不是在脚本加载后调用函数，请将它们定义为内联脚本中的全局变量，并让您的外部脚本读取它们。

在本例中，aScript.js 将使用窗口中定义的newPerson。

<script>
   newPerson = {firstName:'Mike'}
</script>

<script src='aScript.js'></script>

然后，您将在外部脚本中检查 newPerson 并根据需要合并。

【讨论】：

或者我们也可以使用扩展运算符。 var person = {...def_person, ...newPerson} console.log(person)
@samee 这是真的，亲爱的，但仍然是真的。将更新答案！
@StevenSpungin，感谢您的建议。我已经用您的编辑更新了我的代码。我看到你正在尝试做的事情，这就是我所设想的。但是，在 HTML 中传递更新的参数与在外部 JavaScript 文件中接受这些新参数之间似乎存在脱节。还有什么想法吗？
@Peter 您必须在脚本中设置附加值。需要注意的是，您也必须等待 DOM 加载。我将添加一个 init 方法来显示这一点。
@Peter 我添加了一个设置默认值的初始化函数和一个更新函数。您的脚本可以等待 DOM 加载，然后调用 init。您的消费者也可以在加载后调用更新函数。

【解决方案2】：

也许通过window 对象？

window.person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

window 是您当前浏览器标签的全局对象，因此您可以通过它传递一些东西。但这是一种 hacky 解决方案。

然后你可以通过window.person阅读它

【讨论】：