BindTo instance vs literal

Benchmark created by Derick Bailey on


Description

Checking the performance of object instances vs object literals as mixins, with some Backbone.Marionette code

Preparation HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script>
var vent = _.extend({}, Backbone.Events);

var Marionette = {};

Marionette.BindTo = {

  // Store the event binding in array so it can be unbound
  // easily, at a later point in time.
  bindTo: function (obj, eventName, callback, context) {
    context = context || this;
    obj.on(eventName, callback, context);

    if (!this.bindings) { this.bindings = []; }

    var binding = { 
      obj: obj, 
      eventName: eventName, 
      callback: callback, 
      context: context 
    }

    this.bindings.push(binding);

    return binding;
  },

  // Unbind from a single binding object. Binding objects are
  // returned from the `bindTo` method call. 
  unbindFrom: function(binding){
    binding.obj.off(binding.eventName, binding.callback, binding.context);
    this.bindings = _.reject(this.bindings, function(bind){return bind === binding});
  },

  // Unbind all of the events that we have stored.
  unbindAll: function () {
    var that = this;

    // The `unbindFrom` call removes elements from the array
    // while it is being iterated, so clone it first.
    var bindings = _.map(this.bindings, _.identity);
    _.each(bindings, function (binding, index) {
      that.unbindFrom(binding);
    });
  }
};

Marionette.EventBinder = function(){};
_.extend(Marionette.EventBinder.prototype, Marionette.BindTo);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Object Literal As Mixin
var binder = _.extend({}, Marionette.BindTo);

binder.bindTo(vent, "foo", function(){});
vent.trigger("foo");
binder.unbindAll();
ready
Object Literal As Prototype
var binder = Object.create(Marionette.BindTo);

binder.bindTo(vent, "foo", function(){});
vent.trigger("foo");
binder.unbindAll();
ready
Object Instances
var binder = new Marionette.EventBinder();

binder.bindTo(vent, "foo", function(){});
vent.trigger("foo");
binder.unbindAll();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Derick Bailey on