Question

我有一个HTML和JS文件。如果用户想覆盖外部JS文件中声明的默认设置，他们要做的就是将以下内容作为内联脚本包括在内：

<script>
    userControls = { 
        transition : 'fade',
        nextText : 'Next'
    }
</script>

我面临的问题是我的外部脚本未使用用户设置，而是将所有内容都设置为默认设置。

var defControls = {
        transition : 'default',
        nextText : 'Next &raquo;'
    };
    var userControls = {};    
    
    // CHECKS FOR userControls
    if (Object.getOwnPropertyNames(userControls).length > 0) {
        var controls = Object.assign({}, defControls, userControls);
    } else {
        controls = defControls;
    }

    console.log(userControls);
    console.log(controls);
    console.log(defControls);

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script>
userControls = { 
	transition : 'fade',
	nextText : 'Next'
}
</script>


</body>
</html>

Answer 1

这是因为您在加载js文件后插入了用户选择。首先要通过以下控制

if (Object.getOwnPropertyNames(userControls).length > 0)

，因此它将始终计算为false。这就是为什么您不断获得默认值的原因。您应该先插入用户选择脚本，或者在js文件中插入一些异步功能。

Answer 2

您的代码有四个半错误：

您必须在外部JS文件之前编写代码为var userControls = {transition: 'fade', nextText: 'Next'};的内联脚本。并且不要忘了;最后（这是半个错误）。
外部JS文件中的行var userControls = {}; 已覆盖内联脚本中的userControls 中的设置。我想您想改写var controls = {};。
您必须在var controls = {};语句之前编写if...else。
您编写的是console.log(userControls);而不是console.log(JSON.stringify(userControls));，您的代码只能从IE的开发人员控制台中写入[object Object]。但是在Chrome中，它还不错。

具有更正代码的解决方案

<!DOCTYPE html>
<html><head>
<!-- 
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 -->
<!-- SENDS THE NEW PARAMETERS TO script.js -->
<script type="text/javascript">
var userControls =
{ 
    transition : 'fade',
    nextText : 'Next'
};
</script>

<!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS
 src="script.js" -->
<script type="text/javascript">
var defControls =
{
    transition : 'default',
    nextText : 'Next &raquo;'
};
//THIS WAS THE MISTAKE: var userControls = {}; this line has overwrited the settings

var controls = {};

// CHECKS FOR userControls
if(Object.getOwnPropertyNames(userControls).length > 0)
{
    controls = Object.assign({}, defControls, userControls);
}
else
{
    controls = defControls;
}

console.log('userControls =\n' + JSON.stringify(userControls, null, '\t'));
console.log('controls =\n' + JSON.stringify(controls, null, '\t'));
console.log('defControls =\n' + JSON.stringify(defControls, null, '\t'));
</script>
</head>
<body></body>
</html>

为什么外部JS文件中的默认属性没有被对象中用户定义的属性覆盖？

2 个答案: