我想在下面了解这种语法:(这是三个.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
它应该创建一个新元素。
这是一种名为Mixin的 JavaScript 设计模式,其主要目的是使用通常称为选项的新属性和值扩展对象。
它用于大多数JavaScript库,如Three.js
,Vue.js
,jQuery
,dojo
...它在定义模块时有很大帮助,它允许我们扩展或覆盖模块中的默认选项。
你可以从The Mixin 模式中看到:
在 JavaScript 中,我们可以将继承 Mixins 视为通过扩展收集功能的一种手段。我们定义的每个新对象都有一个原型,它可以从中继承更多属性。原型可以从其他对象原型继承,但更重要的是,可以为任意数量的对象实例定义属性。我们可以利用这一事实来促进功能重用。
Mixins 允许对象从它们那里借用(或继承)功能 以最小的复杂性。由于该模式适用于 JavaScripts对象原型,它为我们提供了一种相当灵活的方式来 共享的功能不仅来自一个 Mixin,而且实际上来自多个 通过多重继承。
即在以下示例中:
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
我们正在为实例对象的color
选项设置一个新值。
如需进一步阅读,您可以查看 dojo.mixin()、JavaScript Mixins: Beyond Simple Object Extension 和Mixins、Forwarding 和 Deployment文章。
但是,我如何使用这个?
溶液:
在你的情况下,你可以使用 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
});
>({ color: 0x00ff00 })
的只是一个对象,它被传递给正在创建的对象的构造函数,它用于设置该对象的属性,大多数人选择传入配置对象而不是拥有多个参数,因为它解决了"如果某些参数是可选的怎么办"的问题,并且看起来更整洁。
但是,除非您有其他属性要传入,否则传入对象没有实际用处,因为您必须检查这些属性是否存在于对象上,否则会出现错误,因此您可以执行此操作。
元素存在
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>