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

  // ...
};

@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