通过全局变量传递脚本

Question

我正在尝试将一些参数/设置/选项传递给我的外部脚本。这些参数需要在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>

Answer 1

也许通过window对象？

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

窗口是当前浏览器标签的全局对象，因此您可以通过它进行传递。但这是一种骇人听闻的解决方案。

然后您可以通过window.person

进行阅读

Answer 2

使用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.'
})

<div id='demo'></div>

通过全局变量传递脚本

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

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

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

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

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

使用参数/设置/选项创建和传递JavaScript对象

2 个答案:

通过全局变量传递脚本