在 JavaScript 中实例化新对象时设置属性值



我想在下面了解这种语法:(这是三个.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.jsVue.jsjQuerydojo...它在定义模块时有很大帮助,它允许我们扩展或覆盖模块中的默认选项。

你可以从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>


相关内容

  • 没有找到相关文章

最新更新