@danielkalen/simplybind
Version:
Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.
506 lines (495 loc) • 15 kB
JavaScript
new TestSuite({
'title': 'Input Update',
'subtitle': 'Update the value of an input field 10,000 times',
'measureMethod': 'sync',
'warmUps': 100,
'timesToRun': 10000,
'setupFn': function(container$) {
var _, component, currentValue;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <input type='text' ng-model='obj.prop' /> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
return angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Input x100 Update',
'subtitle': 'Update the value of 100 input fields 1,000 times',
'measureMethod': 'sync',
'timesToRun': 1000,
'setupFn': function(container$) {
var _, component, currentValue, i;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> </div> </div>";
container$.html(component);
container$.find('div[ng-app="ANGULAR"]').html((function() {
var j, results;
results = [];
for (i = j = 1; j <= 100; i = ++j) {
results.push("<input type='text' ng-model='obj.prop' />");
}
return results;
})());
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
return angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Input Transform',
'subtitle': 'Update the value of an input field 10,000 times and apply a transform function',
'measureMethod': 'sync',
'warmUps': 100,
'timesToRun': 10000,
'setupFn': function(container$) {
var _, component, currentValue;
_ = this;
this.obj = {
'prop': 'value'
};
currentValue = 0;
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.transform = function(value) {
return value.toUpperCase();
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.transform(_this.getNewValue());
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <input type='text' ng-model='obj.prop' /> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
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 _, component, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div ng-bind-html='obj.prop'></div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).config(function($sceProvider) {
return $sceProvider.enabled(false);
}).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
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$) {
var _, component, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = 'value';
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div ng-bind-html='obj.prop'></div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).config(function($sceProvider) {
return $sceProvider.enabled(false);
}).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Div HTML Placeholder',
'subtitle': 'Update a placeholder in the content of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, component, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div ng-bind-html='\"Current \"+obj.prop+\" Works.\"'></div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).config(function($sceProvider) {
return $sceProvider.enabled(false);
}).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
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 _, component, currentValue, value;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
value = 'obj.prop+\" \"+'.repeat(250);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div ng-bind-html='" + value + "\"\"'></div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).config(function($sceProvider) {
return $sceProvider.enabled(false);
}).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Div Text Update',
'subtitle': 'Update the textContent of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, component, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div>{{obj.prop}}</div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Div Text Placeholder',
'subtitle': 'Update a placeholder in the textContent of a div 10,000 times',
'measureMethod': 'sync',
'timesToRun': 10000,
'setupFn': function(container$) {
var _, component, currentValue;
_ = this;
currentValue = 0;
this.obj = {
'prop': 'value'
};
this.getNewValue = function() {
return "value" + (currentValue++);
};
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = _this.getNewValue();
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div>Current {{obj.prop}} Works.</div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
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$) {
var _, component;
this.obj = {
'divs': []
};
this.offset = 0;
_ = this;
this.updateValue = (function(_this) {
return function() {
var i;
_this.obj.divs = (function() {
var j, results;
results = [];
for (i = j = 1; j <= 1000; i = ++j) {
results.push(i + this.offset);
}
return results;
}).call(_this);
_this.offset += 1000;
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> <div ng-repeat='value in obj.divs'>{{value}}</div> </div> </div>";
container$.html(component);
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});
new TestSuite({
'title': 'Update 1k DOM Els',
'subtitle': 'Update 1000 existing elements 100 times',
'measureMethod': 'sync',
'timesToRun': 100,
'setupFn': function(container$) {
var _, component, i;
this.obj = {
'prop': 'value'
};
_ = this;
this.updateValue = (function(_this) {
return function() {
return _this.obj.prop = value;
};
})(this);
component = "<div> <div ng-app='ANGULAR' ng-controller='CONTROLLER'> </div> </div>";
container$.html(component);
container$.find('div[ng-app="ANGULAR"]').html((function() {
var j, results;
results = [];
for (i = j = 1; j <= 1000; i = ++j) {
results.push("<div>{{obj.prop}}</div>");
}
return results;
})());
this.app = angular.module('ANGULAR', []).controller('CONTROLLER', (function(_this) {
return function($scope) {
$scope.obj = _this.obj;
return _this.appScope = $scope;
};
})(this));
angular.bootstrap(container$.children()[0], ['ANGULAR']);
},
'teardownFn': function(container$) {
this.appScope.$destroy();
container$.empty();
delete this.obj;
delete this.app;
delete this.appScope;
return delete this.getNewValue;
},
'testFn': function() {
return this.appScope.$apply(this.updateValue);
}
});