Skip to content

Commit 1441f35

Browse files
krausestkrausest
committed
Merge branch 'DooHTML-v0.70.4-keyed' of https://github.com/hman61/js-framework-benchmark into hman61-DooHTML-v0.70.4-keyed
2 parents 4545524 + 5358385 commit 1441f35

File tree

8 files changed

+112
-117
lines changed

8 files changed

+112
-117
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,5 @@ Cargo.lock
7878

7979
# emacs
8080
*~
81+
frameworks/keyed/doohtml/js/doo.html.min.js.LICENSE.txt
82+
frameworks/non-keyed/doohtml/js/doo.html.min.js.LICENSE.txt

‎frameworks/keyed/doohtml/index.html

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,47 @@
88
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
99
<script src="./js/doo.html.min.js"></script>
1010
<script type="module" src="./js/Main.class.js" defer ></script>
11-
12-
</head>
13-
11+
</head>
1412
<body>
15-
1613
<div id="main">
1714
<div class="container">
1815
<div class="jumbotron">
1916
<div class="row">
2017
<div class="col-md-6">
21-
<h1>DooHTML - keyed</h1><span class="ver"></span>
18+
<h1>DooHTML - keyed</h1><span class="ver"></span>
2219
</div>
23-
<div class="col-md-6">
24-
<div class="row">
25-
<div class="col-sm-6 smallpad">
26-
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
27-
</div>
28-
<div class="col-sm-6 smallpad">
29-
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
30-
</div>
31-
<div class="col-sm-6 smallpad">
32-
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
33-
</div>
34-
<div class="col-sm-6 smallpad">
35-
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
36-
</div>
37-
<div class="col-sm-6 smallpad">
38-
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
39-
</div>
40-
<div class="col-sm-6 smallpad">
41-
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
42-
</div>
43-
</div>
44-
</div>
45-
</div>
46-
</div>
47-
<doo-main
48-
context="shadow"
49-
link="/css/currentStyle.css"
50-
bind="rows"
51-
template="./templates/main.html"
52-
></doo-main>
53-
</div>
54-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
55-
20+
<div class="col-md-6">
21+
<div class="row">
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
<doo-main
45+
context="shadow"
46+
link="/css/currentStyle.css"
47+
bind="rows"
48+
template="./templates/main.html"
49+
></doo-main>
50+
</div>
51+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
5652
</div>
5753
</body>
5854
</html>

‎frameworks/keyed/doohtml/js/Main.class.js

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,15 @@ Doo.define(
6767
return idx
6868
}
6969

70+
getIndex(row) {
71+
let idx = this.data.rows.findIndex((item, i) => {
72+
if (item.id === row.key) {
73+
return i
74+
}
75+
})
76+
return idx
77+
}
78+
7079
delete(elem) {
7180
let row = this.getParentRow(elem)
7281
if (row) {
@@ -75,25 +84,24 @@ Doo.define(
7584
if (idx !== undefined) {
7685
this.data.rows.splice(idx,1)
7786
}
78-
7987
}
8088
}
8189

8290
run() {
91+
this.clear()
8392
this.data.rows = this.buildData()
84-
this.tbody.textContent = ''
8593
this.renderTable()
8694
}
8795

88-
add() {
96+
add() {
8997
let startRow = this.data.rows.length
90-
this.data.rows = this.data.rows.concat(this.buildData())
91-
this.renderTable(this.data.rows, startRow)
98+
this.data.rows = this.data.rows.concat(this.buildData())
99+
this.renderTable(this.data.rows, startRow)
92100
}
93101

94102
runLots() {
103+
this.clear()
95104
this.data.rows = this.buildData(10000)
96-
this.tbody.textContent = ''
97105
this.renderTable()
98106
}
99107

@@ -108,31 +116,37 @@ Doo.define(
108116
this.selectedRow.classList.remove('danger')
109117
this.selectedRow = undefined
110118
}
111-
let row = this.getParentRow(elem)
119+
this.toggleSelect(this.getParentRow(elem))
120+
}
112121

122+
toggleSelect(elem) {
123+
let row = this.getParentRow(elem)
113124
if (row) {
114125
row.classList.toggle('danger')
115-
this.selectedRow = row
126+
if (row.classList.contains('danger')) {
127+
this.selectedRow = row
128+
}
116129
}
117-
}
130+
}
118131

119132
clear() {
120133
this.data.rows = []
121134
this.tbody.textContent = ''
122135
}
123136

124137
swapRows() {
125-
if (this.data.rows.length>10) {
126-
let node1 = this.tbody.childNodes[1]
127-
let node2 = this.tbody.childNodes[998]
128-
129-
let row1 = this.data.rows[1]
130-
this.data.rows[1] = this.data.rows[998]
138+
if (this.data.rows.length > 998) {
139+
let node1 = this.tbody.firstChild.nextSibling,
140+
node2 = node1.nextSibling,
141+
node998 = this.tbody.childNodes[998],
142+
node999 = node998.nextSibling,
143+
row1 = this.data.rows[1]
144+
145+
this.data.rows[1] = this.data.rows[998];
131146
this.data.rows[998] = row1
132147

133-
this.tbody.insertBefore(node2, node1)
134-
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
135-
148+
this.tbody.insertBefore(node998, node2)
149+
this.tbody.insertBefore(node1, node999)
136150
}
137151
}
138152

@@ -155,4 +169,4 @@ Doo.define(
155169
})
156170
}
157171
}
158-
)
172+
)

‎frameworks/keyed/doohtml/js/doo.html.min.js

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

‎frameworks/keyed/doohtml/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-doohtml",
3-
"version": "0.41.1",
3+
"version": "0.70.2",
44
"description": "DooHTML JS-Benchmark",
55
"main": "Main.class.js",
66
"js-framework-benchmark": {

‎frameworks/non-keyed/doohtml/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>DooHTML</title>
6-
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7-
<link href="/css/currentStyle.css" rel="stylesheet"/>
8-
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
9-
<script src="./js/doo.html.min.js"></script>
10-
<script type="module" src="./js/Main.class.js" defer ></script>
4+
<meta charset="UTF-8">
5+
<title>DooHTML</title>
6+
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
9+
<script src="./js/doo.html.min.js"></script>
10+
<script type="module" src="./js/Main.class.js" defer ></script>
1111
</head>
1212
<body>
1313
<div id="main">

‎frameworks/non-keyed/doohtml/js/Main.class.js

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
'use strict';
1+
'use strict'
22

3-
const _random = max => Math.random() * max | 0;
3+
const _random = max => Math.random() * max | 0
44

5-
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"];
6-
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7-
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
5+
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"]
6+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]
88

99
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
1010

@@ -27,26 +27,27 @@ Doo.define(
2727
this.addEventListeners()
2828
this.selectedRow = undefined
2929
document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
30-
document.title += ` ${Doo.version} (non-keyed)` }
30+
document.title += ` ${Doo.version} (non-keyed)`
31+
}
3132

3233
async dooAfterRender() {
3334
this.tbody = this.shadow.querySelector('#tbody')
3435
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
35-
e.preventDefault();
36+
e.preventDefault()
3637
if (e.target.parentElement.matches('.remove')) {
37-
this.delete(e.target.parentElement);
38+
this.delete(e.target.parentElement)
3839
} else if (e.target.tagName === 'A') {
39-
this.select(e.target);
40+
this.select(e.target)
4041
}
41-
});
42+
})
4243
}
4344

4445
getParentRow(elem) {
4546
while (elem) {
4647
if (elem.tagName === "TR") {return elem}
47-
elem = elem.parentNode;
48+
elem = elem.parentNode
4849
}
49-
return undefined;
50+
return undefined
5051
}
5152

5253
buildData(count = 1000) {
@@ -71,14 +72,12 @@ Doo.define(
7172
this.tbody.textContent = ''
7273
}
7374
this.renderTable()
74-
7575
}
76-
7776
add() {
7877
let startRow = this.data.rows.length
7978
this.data.rows = this.data.rows.concat(this.buildData())
8079
this.renderTable(this.data.rows, startRow)
81-
}
80+
}
8281

8382
runLots() {
8483
this.data.rows = this.buildData(10000)
@@ -112,36 +111,38 @@ Doo.define(
112111
}
113112

114113
swapRows() {
115-
if (this.data.rows.length>10) {
116-
let node1 = this.tbody.childNodes[1]
117-
let node2 = this.tbody.childNodes[998]
118-
119-
let row1 = this.data.rows[1];
114+
if (this.data.rows.length > 998) {
115+
let node1 = this.tbody.firstChild.nextSibling,
116+
node2 = node1.nextSibling,
117+
node998 = this.tbody.childNodes[998],
118+
node999 = node998.nextSibling,
119+
row1 = this.data.rows[1]
120+
120121
this.data.rows[1] = this.data.rows[998];
121122
this.data.rows[998] = row1
122123

123-
this.tbody.insertBefore(node2, node1)
124-
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
124+
this.tbody.insertBefore(node998, node2)
125+
this.tbody.insertBefore(node1, node999)
125126
}
126127
}
127128

128129
addEventListeners() {
129130
document.getElementById("main").addEventListener('click', e => {
130-
e.preventDefault();
131+
e.preventDefault()
131132
if (e.target.matches('#runlots')) {
132-
this.runLots();
133+
this.runLots()
133134
} else if (e.target.matches('#run')) {
134-
this.run();
135+
this.run()
135136
} else if (e.target.matches('#add')) {
136-
this.add();
137+
this.add()
137138
} else if (e.target.matches('#update')) {
138-
this.update();
139+
this.update()
139140
} else if (e.target.matches('#clear')) {
140-
this.clear();
141+
this.clear()
141142
} else if (e.target.matches('#swaprows')) {
142-
this.swapRows();
143+
this.swapRows()
143144
}
144145
})
145-
}
146+
}
146147
}
147148
)

‎frameworks/non-keyed/doohtml/js/doo.html.min.js

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

0 commit comments

Comments
 (0)