Skip to content

Instantly share code, notes, and snippets.

@leeoniya

leeoniya/new-factory2.html

Created December 17, 2016 15:27
Show Gist options
  • Save leeoniya/ab54e7e1a392eb1f4fa3e81d4774c966 to your computer and use it in GitHub Desktop.
Save leeoniya/ab54e7e1a392eb1f4fa3e81d4774c966 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
new-factory2.html
<!doctype html>
<html>
<head></head>
<body>
<ul id='cycleResults'></ul>
<div id="result"></div>
<br>
<button id="btn">Run Tests</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.2/benchmark.min.js"></script>
<script>
var Types = {
NODE: 1,
EMPTY: 2
};
function Shape(val, key, props, children) {
this.val = val;
this.children = children;
this.dom = null;
this.key = key;
this.ref = null;
this.props = props;
this.instance = null;
this.type = Types.NODE;
}
function isArray(o) {
return Array.isArray(o);
}
Shape.prototype.mount = function () {
this.val = this.val * 2;
this.dom = [1 ,2 ,3];
var children = this.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
children[i].mount();
}
} else {
children.mount();
}
}
};
Shape.prototype.patch = function (o2) {
this.val = this.val / 2;
o2.val = o2.val / 2;
o2.dom = this.dom;
var children = this.children;
var children2 = o2.children;
if (children && children2) {
if (isArray(children) && isArray(children2)) {
for (var i = 0; i < children.length; i++) {
children[i].patch(children2[i]);
}
} else {
children.patch(children2);
}
}
};
Shape.prototype.unmount = function () {
this.val * 2;
var children = this.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
children[i].unmount();
}
} else {
children.unmount();
}
}
};
Shape.prototype.hydrate = function () {
this.val / 2;
var children = this.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
children[i].hydrate();
}
} else {
children.hydrate();
}
}
};
function createShape(val, key, props, children) {
return new Shape(val, key, props, children);
}
function mount(o1) {
o1.val = o1.val * 2;
o1.dom = [1 ,2 ,3];
var children = o1.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
mount(children[i]);
}
} else {
mount(children);
}
}
}
function patch(o1, o2) {
o1.val = o1.val / 2;
o2.val = o2.val / 2;
o2.dom = o1.dom;
var children = o1.children;
var children2 = o2.children;
if (children && children2) {
if (isArray(children) && isArray(children2)) {
for (var i = 0; i < children.length; i++) {
patch(children[i], children2[i]);
}
} else {
patch(children, children2);
}
}
}
function unmount(o1) {
o1.val = o1.val * 2;
var children = o1.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
unmount(children[i]);
}
} else {
unmount(children);
}
}
}
function hydrate(o1) {
o1.val = o1.val / 2;
var children = o1.children;
if (children) {
if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
hydrate(children[i]);
}
} else {
hydrate(children);
}
}
}
function createShape2(val, key, props, children) {
return {
val: val,
children: children,
dom: null,
key: key,
ref: null,
props: props,
instance: null,
type: Types.NODE
};
}
// currently how Inferno kind of works
function Shape3(val, key, props, children) {
this.val = val;
this.children = children;
this.dom = null;
this.key = key;
this.ref = null;
this.props = props;
this.instance = null;
this.type = Types.NODE;
}
class Shape4 {
constructor(val, key, props, children) {
this.val = val;
this.children = children;
this.dom = null;
this.key = key;
this.ref = null;
this.props = props;
this.instance = null;
this.type = Types.NODE;
}
}
function createShape3(val, key, props, children) {
return new Shape3(val, key, props, children);
}
function createShape4(val, key, props, children) {
return new Shape4(val, key, props, children);
}
var items = [];
for (var i = 0; i < 100; i++) {
items.push(Math.round(Math.random() * 100));
}
function createShape5(val) {
return {
val: val,
children: null,
dom: null,
key: null,
ref: null,
props: null,
instance: null,
type: Types.NODE
};
}
function addChildren(node, children) {
node.children = children;
return node;
}
function addProps(node, props) {
node.props = props;
return node;
}
function addKey(node, key) {
node.key = key;
return node;
}
function shape6Factory(hasProps, hasKey, hasChildren) {
if (hasProps && hasKey && hasChildren) {
return function(val, key, props, children) {
return createShape2(val, key, props, children);
};
} else if (hasProps && !hasKey && hasChildren) {
return function(val, props, children) {
return createShape2(val, null, props, children);
};
} else if (hasProps && hasKey && !hasChildren) {
return function(val, key, props) {
return createShape2(val, key, props, null);
};
} else if (!hasProps && !hasKey && !hasChildren) {
return function(val) {
return createShape2(val, null, null, null);
};
} else if (!hasProps && !hasKey && hasChildren) {
return function(val, children) {
return createShape2(val, null, null, children);
};
} else if (!hasProps && hasKey && !hasChildren) {
return function(val, key) {
return createShape2(val, key, null, null);
};
}
}
function literalFactory() {
var nodeTree = createShape2(items[0], null, { className: 'test' },
createShape2(items[1], null, null,
createShape2(items[2], null, null,
createShape2(items[3], null, null,
createShape2(items[4], null, null,
createShape2(items[5], null, null,
createShape2(items[6], null, null,
createShape2(items[7], null, null,
createShape2(items[8], null, null, [
createShape2(items[9], 1, null, null),
createShape2(items[10], 2, null, null),
createShape2(items[11], 3, null, null),
createShape2(items[12], 4, null, null),
createShape2(items[13], 5, null, null),
createShape2(items[14], 6, null, null),
createShape2(items[15], 7, null, null),
createShape2(items[16], 8, null, null),
createShape2(items[17], 9, null, null),
createShape2(items[18], 10, null, null),
createShape2(items[19], 11, null, null),
createShape2(items[20], 12, null, null)
])
)
)
)
)
)
)
)
);
var nodeTree2 = createShape2(items[0], null, { className: 'foo' },
createShape2(items[1], null, null,
createShape2(items[2], null, null,
createShape2(items[3], null, null,
createShape2(items[4], null, null,
createShape2(items[5], null, null,
createShape2(items[6], null, null,
createShape2(items[7], null, null,
createShape2(items[8], null, null, [
createShape2(items[9], 1, null, null),
createShape2(items[10], 2, null, null),
createShape2(items[11], 3, null, null),
createShape2(items[12], 4, null, null),
createShape2(items[13], 5, null, null),
createShape2(items[14], 6, null, null),
createShape2(items[15], 7, null, null),
createShape2(items[16], 8, null, null),
createShape2(items[17], 9, null, null),
createShape2(items[18], 10, null, null),
createShape2(items[19], 11, null, null),
createShape2(items[20], 12, null, null)
])
)
)
)
)
)
)
)
);
mount(nodeTree);
unmount(nodeTree);
patch(nodeTree, nodeTree2);
hydrate(nodeTree);
}
function newMethods() {
var nodeTree = new Shape(items[0], null, { className: 'test' },
new Shape(items[1], null, null,
new Shape(items[2], null, null,
new Shape(items[3], null, null,
new Shape(items[4], null, null,
new Shape(items[5], null, null,
new Shape(items[6], null, null,
new Shape(items[7], null, null,
new Shape(items[8], null, [
new Shape(items[9], 1, null, null),
new Shape(items[10], 2, null, null),
new Shape(items[11], 3, null, null),
new Shape(items[12], 4, null, null),
new Shape(items[13], 5, null, null),
new Shape(items[14], 6, null, null),
new Shape(items[15], 7, null, null),
new Shape(items[16], 8, null, null),
new Shape(items[17], 9, null, null),
new Shape(items[18], 10, null, null),
new Shape(items[19], 11, null, null),
new Shape(items[20], 12, null, null)
])
)
)
)
)
)
)
)
);
var nodeTree2 = new Shape(items[0], null, { className: 'foo' },
new Shape(items[1], null, null,
new Shape(items[2], null, null,
new Shape(items[3], null, null,
new Shape(items[4], null, null,
new Shape(items[5], null, null,
new Shape(items[6], null, null,
new Shape(items[7], null, null,
new Shape(items[8], null, [
new Shape(items[9], 1, null, null),
new Shape(items[10], 2, null, null),
new Shape(items[11], 3, null, null),
new Shape(items[12], 4, null, null),
new Shape(items[13], 5, null, null),
new Shape(items[14], 6, null, null),
new Shape(items[15], 7, null, null),
new Shape(items[16], 8, null, null),
new Shape(items[17], 9, null, null),
new Shape(items[18], 10, null, null),
new Shape(items[19], 11, null, null),
new Shape(items[20], 12, null, null)
])
)
)
)
)
)
)
)
);
nodeTree.mount();
nodeTree.unmount();
nodeTree.patch(nodeTree2);
nodeTree.hydrate();
}
var cycleResults = document.getElementById('cycleResults'),
result = document.getElementById('result'),
btn = document.getElementById('btn'),
tests = {
factory: literalFactory,
newObj: newMethods,
}
// BENCHMARK ====================
btn.onclick = function runTests() {
btn.setAttribute('disable', true);
cycleResults.innerHTML = '';
result.textContent = 'Tests running...';
var suite = new Benchmark.Suite;
for (var test in tests) {
if (tests.hasOwnProperty(test)) {
suite.add(test, tests[test])
}
}
// add tests
suite.on('cycle', function(event) {
var result = document.createElement('li');
result.textContent = String(event.target);
document.getElementById('cycleResults')
.appendChild(result);
})
.on('complete', function() {
result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
btn.setAttribute('disable', false);
})
// run async
.run({
'async': true
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment