@danielkalen/simplybind/comparison/dist/SimplyBind@1.2.1/test.js

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

new TestSuite({
  'title': 'Object Update',
  'subtitle': 'Update the value of an object property 10,000 times',
  'measureMethod': 'sync',
  'nonSharedTest': true,
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.objA = {
      'prop': 'value'
    };
    this.objB = {
      'prop': 'value'
    };
    currentValue = 0;
    SimplyBind('prop').of(this.objA).to('prop').of(this.objB);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.objA, true);
    SimplyBind.unBindAll(this.objB, true);
    delete this.objA;
    delete this.objB;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.objA.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Input Update',
  'subtitle': 'Update the value of an input field 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.input$ = $('<input type="text">');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('value').of(this.input$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.input$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.input$, true);
    delete this.obj;
    delete this.input$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Input x100 Update',
  'subtitle': 'Update the value of 100 input fields 1,000 times',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var currentValue, i, input, inputs, j, len, ref;
    this.obj = {
      'prop': 'value'
    };
    currentValue = 0;
    inputs = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 100; i = ++j) {
        results.push('<input type="text">');
      }
      return results;
    })();
    this.inputs$ = $(inputs.join(''));
    ref = this.inputs$;
    for (j = 0, len = ref.length; j < len; j++) {
      input = ref[j];
      SimplyBind('prop').of(this.obj).to('value').of(input);
    }
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.inputs$);
  },
  'teardownFn': function(container$) {
    var input, j, len, ref;
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    ref = this.inputs$;
    for (j = 0, len = ref.length; j < len; j++) {
      input = ref[j];
      SimplyBind.unBindAll(input, true);
    }
    delete this.obj;
    delete this.inputs$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Input Transform',
  'subtitle': 'Update the value of an input field 10,000 times and apply a transform function',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.input$ = $('<input type="text">');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('value').of(this.input$).transform(function(value) {
      return value.toUpperCase();
    });
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.input$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.input$, true);
    delete this.obj;
    delete this.input$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Div HTML Update',
  'subtitle': 'Update the content of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $('<div />');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('innerHTML').of(this.div$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Div HTML Same Update',
  'subtitle': 'Update the content of a div with the same value 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $('<div />');
    SimplyBind('prop').of(this.obj).to('innerHTML').of(this.div$);
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = 'value';
  }
});

new TestSuite({
  'title': 'Div HTML Placeholder',
  'subtitle': 'Update a placeholder in the content of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $('<div>Content {{value}} works.</div>');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('innerHTML.value').of(this.div$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Div HTML 250 Placeholders',
  'subtitle': 'Update 250 placeholders in the content of a div 1,000 times',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $("<div>" + ('{{value}} '.repeat(250)) + "</div>");
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('innerHTML.value').of(this.div$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Div Text Update',
  'subtitle': 'Update the textContent of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $('<div />');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('textContent').of(this.div$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Div Text Placeholder',
  'subtitle': 'Update a placeholder in the textContent of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var currentValue;
    this.obj = {
      'prop': 'value'
    };
    this.div$ = $('<div>Content {{value}} works.</div>');
    currentValue = 0;
    SimplyBind('prop').of(this.obj).to('textContent.value').of(this.div$);
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.append(this.div$);
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    SimplyBind.unBindAll(this.div$, true);
    delete this.obj;
    delete this.div$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Create 1k DOM Els',
  'subtitle': 'Create 1000 elements from array & insert into a div',
  'measureMethod': 'sync',
  'warmUps': 10,
  'timesToRun': 10,
  'setupFn': function(container$) {
    this.obj = {
      'divs': []
    };
    SimplyBind('divs').of(this.obj).to('innerHTML').of(container$).transform(function(divs) {
      var j, len, output, value;
      output = '';
      for (j = 0, len = divs.length; j < len; j++) {
        value = divs[j];
        output += "<div>" + value + "</div>";
      }
      return output;
    });
  },
  'teardownFn': function(container$) {
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    delete this.obj.divs;
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var i;
    this.obj.divs = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push(i);
      }
      return results;
    })();
  }
});

new TestSuite({
  'title': 'Update 1k DOM Els',
  'subtitle': 'Update 1000 existing elements 100 times',
  'measureMethod': 'sync',
  'timesToRun': 100,
  'setupFn': function(container$) {
    var currentValue, div, divs, i, j, len, ref;
    this.obj = {
      'prop': 'value'
    };
    currentValue = 0;
    divs = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push('<div />');
      }
      return results;
    })();
    this.divs$ = $(divs.join(''));
    ref = this.divs$;
    for (j = 0, len = ref.length; j < len; j++) {
      div = ref[j];
      SimplyBind('prop').of(this.obj).to('textContent').of(div);
    }
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html(this.divs$);
  },
  'teardownFn': function(container$) {
    var div, j, len, ref;
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    ref = this.divs$;
    for (j = 0, len = ref.length; j < len; j++) {
      div = ref[j];
      SimplyBind.unBindAll(div, true);
    }
    delete this.obj;
    delete this.divs$;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop = this.getNewValue();
  }
});

new TestSuite({
  'title': 'Create DOM Bindings',
  'subtitle': 'Create 1000 bindings to DOM elements',
  'measureMethod': 'sync',
  'nonSharedTest': true,
  'timesToRun': 1,
  'setupFn': function(container$) {
    var divs, i;
    this.obj = {
      'prop': 'value'
    };
    divs = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push('<div />');
      }
      return results;
    })();
    this.divs$ = $(divs.join(''));
    this.container$ = container$;
  },
  'teardownFn': function(container$) {
    var div, j, len, ref;
    container$.empty();
    SimplyBind.unBindAll(this.obj, true);
    ref = this.divs$;
    for (j = 0, len = ref.length; j < len; j++) {
      div = ref[j];
      SimplyBind.unBindAll(div, true);
    }
    delete this.obj;
    delete this.div;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var div, j, len, ref;
    ref = this.divs$;
    for (j = 0, len = ref.length; j < len; j++) {
      div = ref[j];
      SimplyBind('prop').of(this.obj).to('textContent').of(div);
    }
    this.container$.append(this.divs$);
  }
});

new TestSuite({
  'title': 'Create Object Bindings',
  'subtitle': 'Create 1000 bindings to objects',
  'measureMethod': 'sync',
  'nonSharedTest': true,
  'manualTiming': true,
  'timesToRun': 1,
  'setupFn': function() {
    var i;
    this.obj = {
      'prop': 'value'
    };
    this.objects = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push({
          'prop': null
        });
      }
      return results;
    })();
  },
  'teardownFn': function(container$) {
    SimplyBind.unBindAll(this.obj, true);
    delete this.obj;
    delete this.objects;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var beginTime, end, j, len, object, ref, start, totalTime;
    beginTime = performance.now();
    totalTime = 0;
    ref = this.objects;
    for (j = 0, len = ref.length; j < len; j++) {
      object = ref[j];
      start = performance.now();
      SimplyBind('prop').of(this.obj).to('prop').of(object);
      end = performance.now();
      totalTime += end - start;
    }
    return {
      'startTime': beginTime,
      'endTime': beginTime + totalTime
    };
  }
});

new TestSuite({
  'title': 'Rebind existing bindings',
  'subtitle': 'Create 1000 bindings to objects',
  'measureMethod': 'sync',
  'nonSharedTest': true,
  'manualTiming': true,
  'timesToRun': 1,
  'setupFn': function() {
    var i, j, len, object, ref;
    this.obj = {
      'prop': 'value'
    };
    this.objects = (function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push({
          'prop': null
        });
      }
      return results;
    })();
    ref = this.objects;
    for (j = 0, len = ref.length; j < len; j++) {
      object = ref[j];
      SimplyBind('prop').of(this.obj).to('prop').of(object);
    }
  },
  'teardownFn': function(container$) {
    SimplyBind.unBindAll(this.obj, true);
    delete this.obj;
    delete this.objects;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var beginTime, end, j, len, object, ref, start, totalTime;
    beginTime = performance.now();
    totalTime = 0;
    ref = this.objects;
    for (j = 0, len = ref.length; j < len; j++) {
      object = ref[j];
      start = performance.now();
      SimplyBind('prop').of(this.obj).to('prop').of(object);
      end = performance.now();
      totalTime += end - start;
    }
    return {
      'startTime': beginTime,
      'endTime': beginTime + totalTime
    };
  }
});