Skip to content

Commit 8ff11f8

Browse files
mksunny1mksunny1
committed
Non-keyed implementation
- added non-keyed implementation for Vanillajs-3 - small code enhancements - semantic bug fix (in remove) for the keyed implementation.
1 parent 527199d commit 8ff11f8

File tree

5 files changed

+224
-10
lines changed

5 files changed

+224
-10
lines changed

‎frameworks/keyed/vanillajs-3/src/Main.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,25 @@ function* _random(n) {
99
yield arr
1010
}
1111
}
12-
const data = [], nTemplates = 10, tbody = document.getElementsByTagName('tbody')[0];
12+
const data = [], nTemplates = (n) => 10, tbody = document.getElementsByTagName('tbody')[0];
1313
let index = 1, i, lbl, selected;
1414

1515
function create(n = 1000) { if (data.length) clear(); append(n); }
1616
function append(n = 1000) {
17-
const [r1, r2, r3] = _random(n); let j = 0;
18-
const itemTemplate1 = document.getElementById('itemTemplate').content.firstElementChild;
19-
const itemTemplate = document.createDocumentFragment();
20-
for (i = 0; i < nTemplates; i++) itemTemplate.appendChild(itemTemplate1.cloneNode(true));
17+
const [r1, r2, r3] = _random(n), nt = nTemplates(n), arr = new Array(nt);; let j = 0;
18+
const itemTemplate = document.getElementById('itemTemplate').content;
19+
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
20+
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
21+
2122
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
2223
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
2324

24-
while ((n -= nTemplates) >= 0) {
25-
for (i = 0; i < nTemplates; i++, j++) {
25+
while ((n -= nt) >= 0) {
26+
for (i = 0; i < nt; i++, j++) {
2627
ids[i].nodeValue = index++;
27-
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
28+
labels[i].nodeValue = arr[i] = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`
2829
}
30+
data.push(...arr);
2931
tbody.appendChild(itemTemplate.cloneNode(true));
3032
}
3133
}
@@ -51,10 +53,11 @@ tbody.onclick = (e) => {
5153
element.className = "danger"; selected = element
5254
}
5355
} else if (e.target.matches('span.remove')) {
54-
data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.target.parentNode.parentNode.parentNode)), 1);
56+
const element = e.target.parentNode.parentNode.parentNode;
57+
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1) && tbody.removeChild(element);
5558
}
5659
}
5760
for (let [key, fn] of Object.entries({
5861
run: create, runlots: () => create(10000),
5962
add: append, update, clear, swaprows: swap
60-
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(); fn() }
63+
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }

‎frameworks/non-keyed/vanillajs-3/index.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Benchmarks for Vanillajs-3</title>
5+
<link href="/css/currentStyle.css" rel="stylesheet" />
6+
<script src='src/Main.js' type="module"></script>
7+
</head>
8+
<body>
9+
<div id="main">
10+
<div class="container">
11+
<div class="jumbotron">
12+
<div class="row">
13+
<div class="col-md-6">
14+
<h1>Vanillajs-3-"non-keyed"</h1>
15+
</div>
16+
<div class="col-md-6">
17+
<div class="row">
18+
<div class="col-sm-6 smallpad">
19+
<button
20+
type="button"
21+
class="btn btn-primary btn-block"
22+
id="run"
23+
>
24+
Create 1,000 rows
25+
</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button
29+
type="button"
30+
class="btn btn-primary btn-block"
31+
id="runlots"
32+
>
33+
Create 10,000 rows
34+
</button>
35+
</div>
36+
<div class="col-sm-6 smallpad">
37+
<button
38+
type="button"
39+
class="btn btn-primary btn-block"
40+
id="add"
41+
>
42+
Append 1,000 rows
43+
</button>
44+
</div>
45+
<div class="col-sm-6 smallpad">
46+
<button
47+
type="button"
48+
class="btn btn-primary btn-block"
49+
id="update"
50+
>
51+
Update every 10th row
52+
</button>
53+
</div>
54+
<div class="col-sm-6 smallpad">
55+
<button
56+
type="button"
57+
class="btn btn-primary btn-block"
58+
id="clear"
59+
>
60+
Clear
61+
</button>
62+
</div>
63+
<div class="col-sm-6 smallpad">
64+
<button
65+
type="button"
66+
class="btn btn-primary btn-block"
67+
id="swaprows"
68+
>
69+
Swap Rows
70+
</button>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
<table class="table table-hover table-striped test-data">
77+
<tbody id="tbody">
78+
</tbody>
79+
</table>
80+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
81+
</div>
82+
</div>
83+
<template id="itemTemplate"><tr><td class='col-md-1'>{id}</td><td class='col-md-4'><a class='lbl'>{lbl}</a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td></tr></template>
84+
</body>
85+
</html>

‎frameworks/non-keyed/vanillajs-3/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/non-keyed/vanillajs-3/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "js-framework-benchmark-vanillajs-3",
3+
"version": "1.1.1",
4+
"description": "Vanilla.JS-3 demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "",
8+
"issues": [
9+
772
10+
]
11+
},
12+
"scripts": {
13+
"dev": "exit 0",
14+
"build-prod": "exit 0"
15+
},
16+
"keywords": [
17+
"vanilla",
18+
"javascript"
19+
],
20+
"author": "Mark Sune",
21+
"license": "Apache-2.0",
22+
"homepage": "https://github.com/krausest/js-framework-benchmark",
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/krausest/js-framework-benchmark.git"
26+
}
27+
}

‎frameworks/non-keyed/vanillajs-3/src/Main.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
2+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
3+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4+
const lengths = [adjectives.length, colours.length, nouns.length];
5+
function* _random(n) {
6+
for (let max of lengths) {
7+
const arr = new Array(n);
8+
for (i = 0; i < n; i++) arr[i] = Math.round(Math.random() * 1000) % max;
9+
yield arr
10+
}
11+
}
12+
const data = [], nTemplates = (n) => 10, tbody = document.getElementsByTagName('tbody')[0];
13+
let index = 1, i, lbl, selected;
14+
15+
function create(n = 1000) {
16+
if (data.length < n) { set(data.length); append(n - data.length) }
17+
else {
18+
set(data.length);
19+
if (data.length > n) {
20+
data.length = n;
21+
const rg = document.createRange();
22+
rg.setStartBefore(tbody.children[n]);
23+
rg.setEndAfter(tbody.lastElementChild);
24+
rg.deleteContents();
25+
}
26+
}
27+
}
28+
function set(n) {
29+
const indices = tbody.querySelectorAll('td:first-child');
30+
const labels = tbody.querySelectorAll('a.lbl');
31+
const [r1, r2, r3] = _random(n);
32+
for (i = 0; i < n; i++) {
33+
indices[i].firstChild.nodeValue = index++;
34+
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1[i]]} ${colours[r2[i]]} ${nouns[r3[i]]}`;
35+
}
36+
}
37+
function append(n = 1000) {
38+
const [r1, r2, r3] = _random(n), nt = nTemplates(n); let j = 0;
39+
const itemTemplate = document.getElementById('itemTemplate').content;
40+
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
41+
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
42+
43+
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
44+
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
45+
46+
while ((n -= nt) >= 0) {
47+
for (i = 0; i < nt; i++, j++) {
48+
ids[i].nodeValue = index++;
49+
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
50+
}
51+
tbody.appendChild(itemTemplate.cloneNode(true));
52+
}
53+
}
54+
function update() {
55+
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
56+
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
57+
}
58+
function clear() { data.length = 0; tbody.textContent = '' }
59+
60+
function swap() {
61+
if (data.length < 999) return;
62+
[data[1], data[998]] = [data[998], data[1]];
63+
const [id1, lbl1] = tbody.children[1].querySelectorAll('td:first-child, a.lbl');
64+
const [id998, lbl998] = tbody.children[998].querySelectorAll('td:first-child, a.lbl');
65+
[id1.firstChild.nodeValue, id998.firstChild.nodeValue] = [id998.firstChild.nodeValue, id1.firstChild.nodeValue ];
66+
[lbl1.firstChild.nodeValue, lbl998.firstChild.nodeValue] = [lbl998.firstChild.nodeValue, lbl1.firstChild.nodeValue ]
67+
}
68+
tbody.onclick = (e) => {
69+
e.preventDefault; e.stopPropagation;
70+
if (e.target.matches('a.lbl')) {
71+
const element = e.target.parentNode.parentNode;
72+
if (element === selected) selected.className = selected.className ? "" : "danger";
73+
else {
74+
if (selected) selected.className = "";
75+
element.className = "danger"; selected = element
76+
}
77+
} else if (e.target.matches('span.remove')) { let temp;
78+
const element = e.target.parentNode.parentNode.parentNode;
79+
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1);
80+
tbody.removeChild(element);
81+
}
82+
}
83+
for (let [key, fn] of Object.entries({
84+
run: create, runlots: () => create(10000),
85+
add: append, update, clear, swaprows: swap
86+
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }

0 commit comments

Comments
 (0)