我想了解下面的语法:(这是three.js库）
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
什么是( { color: 0x00ff00 } )？
我知道：( { property: value } )
但是，我如何使用它？
我想创建一个创建新div的函数，但只有在属性为null时才会创建。例如：
var dot = {
Viewport: function() {
this.container;
if (this.container == null) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
var oldDiv = document.getElementById("old");
var myViewport = new dot.Viewport({
container: oldDiv
});<div id="old">old div</div>
如果我将container值设置为oldDiv，则脚本不应创建新元素，如果我将container设置为null，则应创建新元素。< / p>
答案 0 :(得分：0)
这是一个名为Mixin的JavaScript设计模式，其主要目的是使用通常称为 options 的新属性和值扩展对象。
它在大多数JavaScript库中使用，例如Three.js，Vue.js，jQuery，dojo ......在定义允许我们使用的模块时，它有很多帮助扩展或覆盖我们模块中的默认选项。
您可以从The Mixin Pattern看到：
在JavaScript中，我们可以看一下从Mixins继承作为通过扩展来收集功能的方法。我们定义的每个新对象都有一个原型，可以从中继承其他属性。原型可以继承自其他对象原型，但更重要的是，可以为任意数量的对象实例定义属性。我们可以利用这一事实来促进功能的重复使用。
Mixins允许对象借用（或继承）它们的功能 具有最小的复杂性。由于模式适用于 JavaScripts对象原型，它为我们提供了一种相当灵活的方式 不只是一个Mixin共享功能，但实际上很多 通过多重继承。
，即以下示例：
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
我们正在为实例对象的color选项设置一个新值。
如需进一步阅读，您可以查看dojo .mixin()，JavaScript Mixins: Beyond Simple Object Extension和Mixins, Forwarding, and Delegation条款。
但是，我如何使用它？
<强>解决方案：
在您的情况下，您可以使用jQuery .extend()来实现它。
这应该是你的代码：
var dot = {
Viewport: function(arguments) {
var defaults = {
container: null
};
this.settings = $.extend({}, defaults, arguments);
if (!this.settings.container) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
这将允许您使用以下语法扩展默认选项并覆盖它：
var oldDiv = document.getElementById("old");
var myViewport = new dot.Viewport({
container: oldDiv
});
答案 1 :(得分：-1)
所有({ color: 0x00ff00 })是一个对象，它被传递给正在创建的对象的构造函数，它用于设置该对象的属性，大多数人选择传递一个configuration object而不是有多个参数，因为它解决了问题＆＃34;如果某些参数是可选的＆＃34;它看起来更整洁。
但除非你有其他属性可以传入，否则在传递对象时没有实际用途，因为你必须检查对象上是否存在这些属性，否则你将得到一个错误，所以你可以这样做
var dot = {
Viewport: function(container) {
this.container = container
if (this.container == null) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
var oldDiv = document.getElementById("old");
var myViewport = new dot.Viewport(oldDiv);<div id="old">old div</div>
var dot = {
Viewport: function(container) {
this.container = container
if (this.container == null) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
var myViewport = new dot.Viewport(null);<div id="old">old div</div>
如果 真的 想要使用对象，则可以执行此操作
var dot = {
Viewport: function(obj) {
this.container;
if (obj && obj.hasOwnProperty("container")) {
this.container = obj.container;
}
if (this.container == null) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
var oldDiv = document.getElementById("old");
var myViewport = new dot.Viewport({
container: oldDiv
});<div id="old">old div</div>
var dot = {
Viewport: function(obj) {
this.container;
if (obj && obj.hasOwnProperty("container")) {
this.container = obj.container;
}
if (this.container == null) {
var newContainer = document.createElement("div");
newContainer.style.width = window.innerWidth + "px";
newContainer.style.height = window.innerHeight + "px";
newContainer.style.backgroundColor = "red"
document.body.appendChild(newContainer);
}
}
};
var myViewport = new dot.Viewport({
container: null
});
//Or you can do new dot.Viewport() or new dot.Viewport(null)<div id="old">old div</div>