A piece of ordinary boilerplate JavaScript code (original.js) rewritten using proposed moustache syntax (moustache.fixed.js) and class syntax as implemented in Traceur (moustache.class.js)

moustache.class.js

class Channel {
  constructor (opts) {
    /* ... */
  }

  load () {
    var widget = document.createElement("iframe");

    widget.{
      style.{
        width = "100%";
        border = "none";
        overflow = "hidden";
        display = "none";
      };

      dataset.{
        disqusUid = this.uid;
      };

      allowTransparency = true; // < IE8 iframe transparency
      frameBorder = 0;
      width = "100%";
      id = "dsq" + this.uid;
      src = this.target + "#" + this.uid;
    };
  }
};

moustache.fixed.js

var Channel = function (opts) { /* ... */ };

Channel.prototype.load = function () {
  var widget = document.createElement("iframe");

  widget.{
    style.{
      width    = "100%";
      border   = "none";
      overflow = "hidden";
      display  = "none";
    };

    dataset.{
      disqusUid = this.uid;
    };

    allowTransparency = true; // < IE8 iframe transparency
    frameBorder = 0;
    width = "100%";
    id = "dsq" + this.uid;
    src = this.target + "#" + this.uid;
  };
};

moustache.js

var Channel = function (opts) { /* ... */ };

Channel.prototype.load = function () {
  var widget = document.createElement("iframe");

  widget.{
    style.{
      width    = "100%";
      border   = "none";
      overflow = "hidden";
      display  = "none";
    };

    allowTransparency = true; // < IE8 iframe transparency
    frameBorder = 0;
    width = "100%";
    id = "dsq" + this.uid;
    data-disqus-uid = this.uid
    src = this.target + "#" + this.uid;
  };
};

original.js

var Channel = function (opts) { /* ... */ };

Channel.prototype.load = function () {
  var widget = document.createElement('iframe');

  widget.setAttribute('style', 'width:100%; border:none; overflow:hidden; display:none');
  widget.setAttribute('allowTransparency', 'true'); // < IE8 iframe transparency
  widget.setAttribute('frameBorder', '0');
  widget.setAttribute('width', '100%');
  widget.setAttribute('id', 'dsq' + this.uid);
  widget.setAttribute('data-disqus-uid', this.uid);
  widget.setAttribute('src', this.target + '#' + this.uid);

  // ...
};

Given the proliferation of subtly different Object.extend implementations, I think this would be a good thing for the ES spec to lay down a decision on. In node, we eventually just removed util.extend entirely, because it was too complicated to satisfy everyone's desires for it to be all things, handling getters and deeply nested objects and so on. New syntax for this is silly, though.

@dherman If I understand you properly, then, Object.update would deep-copy, and Object.set would shallow-copy?

So:

var a = { b: { c: 'd', e: Object.create(Object.prototype, {f: { get: function () { throw 'no can get!' }, configurable: false }}) } }
var b = Object.update({x: 'y'}, a)
var c = Object.set({x: 'y'}, a)

In this example, then, c.b === a.b, b.b !== a.b, and b.b.e is an evil getter?

I have no strong opinions about the method names. set and update are fine. But it is a bad idea to introduce new syntax for this, even though it is cute.

@izs: agree on syntax being bad (premature, unjustified, impossible to polyfill, etc.).

@dherman: first, I wonder if we shouldn't just try to standardize Object.extend as the shallow thing, and make it match prototype but handle enumerable accessors too.

Second thought: naming. The set vs. update names do not connote shallow vs. deep. No name that I know of does, so the boring but clear way is Object.deepExtend. Too long? It's not the common case going by existing libraries I know of.

/be