为什么外部JS文件中的默认属性没有被对象中用户定义的属性覆盖？
[英]Why default properties in external JS file were not overwritten with user defined properties in object?
问题描述
I have an HTML and JS file. 
我有一个HTML和JS文件。 Should the user want to overwrite the default settings that are declared in the external JS file all they have to do is include the following as an inline script: 如果用户想覆盖外部JS文件中声明的默认设置，他们要做的就是将以下内容作为内联脚本包括在内：
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
The problem I am facing is that my external script is not picking up the user settings and is setting everything as default. 我面临的问题是我的外部脚本未使用用户设置，而是将所有内容都设置为默认设置。
var defControls = { transition : 'default', nextText : 'Next »' }; 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>
2 个解决方案
解决方案1
0 2018-09-07 22:22:41
It's because that you inserted the user choice after your js file loads. 这是因为您在加载js文件后插入了用户选择。 It goes through the following control first 首先通过以下控制
if (Object.getOwnPropertyNames(userControls).length > 0)
so this will always evaluate to false . 因此，这将始终为false 。 That's why you keep getting default values. 这就是为什么您不断获得默认值的原因。 You should either insert the user choice script first or some async functionality in the js file. 您应该先插入用户选择脚本，或者在js文件中插入一些异步功能。
解决方案2
0 已采纳 2018-09-08 21:09:07
You have four and half mistakes in your code: 您的代码有四个半错误：
- You have to write inline script with code:
var userControls = {transition: 'fade', nextText: 'Next'};您必须使用以下代码编写内联脚本： var userControls = {transition: 'fade', nextText: 'Next'};before external JS file.在外部JS文件之前。 And do not forget ;并且不要忘记;on the end (it is the half mistake).最后（这是半个错误）。 - The line
var userControls = {};行var userControls = {};in external JS file has overwrited the settings inuserControlsin inline script .外部JS文件 中的脚本已覆盖嵌入式脚本中userControls中的设置。 I think you wanted to write insteadvar controls = {};我想您想改写var controls = {};.。 - The
var controls = {};var controls = {};you have to write beforeif...elsestatement.您必须在if...else语句之前写。 - You write
console.log(userControls);您编写console.log(userControls);instead ofconsole.log(JSON.stringify(userControls));而不是console.log(JSON.stringify(userControls));Your code writes only[object Object]in developer console from IE.您的代码只能从IE在开发人员控制台中写入[object Object]。 But in Chrome it is okey.但是在Chrome中，它是不错的选择。
Solution with corrected code 具有更正代码的解决方案
<!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 »' }; //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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.