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

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

您的代码有四个半错误：

您必须使用以下代码编写内联脚本： var userControls = {transition: 'fade', nextText: 'Next'}; 在外部JS文件之前。 并且不要忘记; 最后（这是半个错误）。
行var userControls = {}; 外部JS文件 中的脚本已覆盖嵌入式脚本中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 个解决方案

解决方案1
0 2018-09-07 22:22:41

解决方案2
0 已采纳 2018-09-08 21:09:07

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

问题描述

2 个解决方案

解决方案1 0 2018-09-07 22:22:41

解决方案2 0 已采纳 2018-09-08 21:09:07

解决方案1
0 2018-09-07 22:22:41

解决方案2
0 已采纳 2018-09-08 21:09:07