代码之家 › 专栏 › 技术社区 › Peter

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

javascript-objects html javascript

Peter · 技术社区 · 8 年前

<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>

2 回复 | 直到 8 年前

Bharata colxi 8 年前

您的代码中有四个半错误:

必须用代码编写内联脚本: var userControls = {transition: 'fade', nextText: 'Next'}; 在外部JS文件之前。别忘了 ; 最后(这是一半的错误)。
线路 var userControls = {}; 在外部JS文件中 已覆盖中的设置 userControls . 我想你想改写 var controls = {}; .
这个 var控制={}; 你得先写 if...else 声明。
你在写什么 console.log(userControls); console.log(JSON.stringify(userControls)); 你的代码只写 [object Object] 在IE的开发者控制台中,但在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>

Ertan Kara 8 年前

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

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

false

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前