On Apr 17, 10:08 am, Josh Powell <seas...@gmail.com> wrote:
> @all - thanks for all the comments. Love the heated discussion.
>
> @RobG - can you code up some example code as to how you would solve
> the same problem I presented code for?
OK, here is a dead basic proof of concept. Of course it is nowhere
near production code, but I think you can see where it's going. I
would wrap the entire thing in the module pattern, but I've just used
basic globals at this stage. My intention is to show that efficient
DOM manipulation is possible and that access to related data isn't
hard.
It took me about 45 minutes to write the entire thing (more than half
of that was writing the function to generate the test data set),
tested in Firefox 3 and IE 6 on a 3.4GHz Pentium 4, Windows XP, the
insert runs in less than 500ms. I'll test it on the G4 iBook for
reference later.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>Local data</title>
<style type="text/css">
.templateRow {
display: none;
}
</style>
<script type="text/javascript">
var dataObj = {};
// Utility functions
// Pad with zeros to 5 chars long
var padZ = (function () {
var z = '00000';
var len = z.length;
return function(s) {
s = String(s);
return z.substring(0,len - s.length) + s;
}
})();
var insertText = (function() {
var span = document.createElement('span');
if (typeof span.textContent == 'string') {
return function(el, text) {
el.textContent = text;
}
} else if (typeof span.innerText == 'string') {
return function(el, text) {
el.innerText = text;
}
} else if (typeof span.innerHTML == 'string') {
return function (el, text) {
el.innerHTML = text;
}
}
span = null;
})();
// Return a random number between 0 and n-1
function getRandN(n) {
return (Math.random()*n)|0
}
// Generate some data
function genData(n) {
var key, dataObj = {};
var types = ['movie', 'book', 'DVD'];
var tLen = types.length;
var abouts = ['Adventure', 'Drama', 'Thriller'];
var aLen = abouts.length;
for (var i=0; i<n; i++) {
key = 'i' + padZ(i);
dataObj[key] = {
name: 'Book ' + i,
type: types[getRandN(tLen)],
about: abouts[[getRandN(aLen)]],
href: 'http://www.google.com/?' + i
}
}
return dataObj;
}
// Insert data into table
function insertData(id, dataObj) {
var table = document.getElementById(id);
var tBody = table.tBodies[0];
var templateRow = tBody.rows[0];
var a, cells, cell, newRow;
var frag = document.createDocumentFragment();
for (var key in dataObj) {
newRow = templateRow.cloneNode(true);
newRow.className = 'rowClass';
cells = newRow.getElementsByTagName('td');
a = cells[0].firstChild;
insertText(a, dataObj[key].name);
a.href = dataObj[key].href;
a.onclick = dumbListener;
a.id = key;
frag.appendChild(newRow);
}
tBody.appendChild(frag);
tBody.onclick = showData;
}
function showData(evt) {
var evt = evt || window.event;
var tgt = evt.target || evt.srcElement;
var data;
if (tgt && tgt.tagName && tgt.tagName.toLowerCase() == 'a') {
data = dataObj[tgt.id];
// Have data related to this element, do
// something with it
alert(
'Name: ' + data.name
+ '\nType: ' + data.type
+ '\nAbout: ' + data.about
);
}
}
function dumbListener(){
return false;
}
window.onload = function() {
dataObj = genData(500);
var s = new Date();
insertData('t0', dataObj);
alert('Inserting data took: ' + (new Date() - s) + 'ms');
}
</script>
</head>
<body>
<table id="t0">
<thead>
<th>Column 1
<th>Column 2
<th>Column 3
<th>Column 4
<th>Column 5
<tbody>
<tr class="templateRow">
<td class="cellClass"><a href=""> </a>
<td class="cellClass"><a href=""> </a>
<td class="cellClass"><a href=""> </a>
<td class="cellClass"><a href=""> </a>
<td class="cellClass"><a href=""> </a>
</table>
</body>
</html>
--
Rob
