set property value when instance new object in javascript

Question

I want to learn about this syntax below: (this is the three.js library)

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

What is ( { color: 0x00ff00 } ) ?

I know: ( { property: value } )

but, How I use this?

I want to create a function that creates a new div, but, only creates if the property is null. example:

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>

If I set the container value to oldDiv the script should not create a new element, if I set container to null it should create a new element.

cнŝdk · Answer 1 · 2017-06-28T19:59:44.727

This is a JavaScript design pattern called Mixin its main purpose is to extend an object with new properties and values generally referred to as options.

It is used in most of JavaScript librairies such as Three.js, Vue.js, jQuery, dojo ... It helps a lot when defining modules it allow us to extend or override the default options in our module.

You can see from the The Mixin Pattern that:

In JavaScript, we can look at inheriting from Mixins as a means of collecting functionality through extension. Each new object we define has a prototype from which it can inherit further properties. Prototypes can inherit from other object prototypes but, even more importantly, can define properties for any number of object instances. We can leverage this fact to promote function re-use.

Mixins allow objects to borrow (or inherit) functionality from them with a minimal amount of complexity. As the pattern works well with JavaScripts object prototypes, it gives us a fairly flexible way to share functionality from not just one Mixin, but effectively many through multiple inheritance.

i.e in the following example:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

We are setting a new value for the color option of our instance object.

For further reading you can check dojo .mixin(), JavaScript Mixins: Beyond Simple Object Extension and Mixins, Forwarding, and Delegation articles.

but, How I use this?

Solution:

In your case you can use jQuery .extend() to implement it.

This is how should be your code:

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);
    }
  }
};

This will allow you to use the following syntax to extend your default options and override it:

var oldDiv = document.getElementById("old");

var myViewport = new dot.Viewport({
  container: oldDiv
});

I have no idea what that was! You showed me the way! Thanks! — tom_so, Jun 28 '17 at 16:10
@JailtonSilva Yes JavaScript is rich an have many exciting features, we always learn. You are welcome. — cнŝdk, Jun 28 '17 at 16:15

George · Accepted Answer · 2017-06-28T08:43:04.153

All that ({ color: 0x00ff00 }) is, is an object that's being passed to the constructor function of the object that's being created, it used to set the properties of that object, most people opt for passing in a configuration object instead of having multiple parameters as it gets around the issue of "what if some of the parameters are optional" and it looks tidier.

But unless you have other properties to pass in, there's no real use in passing in an object as you'll have to check that those properties exist on the object or you'll get an error, so you can do this

Element Exists

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>

Element Doesn't Exists

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>

If you really want to use an object you can do this

Element Exists

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>

Element Doesn't Exists

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>

set property value when instance new object in javascript

2 Answers2

Element Exists

Element Doesn't Exists

Element Exists

Element Doesn't Exists