[Wikitech-l] js2 coding style for html output
My attachment did not make it into the JS2 design thread... and that
thread is in summary mode so here is a new post around the html output
question. Which of the following constructions are easier to read and
understand. Is there some tab delimitation format we should use to make
the jquery builder format easier? Are performance considerations
relevant? (email is probably a bad context for comparison since tabs
will get messy and there is no syntax highlighting)
Tim suggested that in security review context dojBuild type html
output is more strait forward to review.
I think both are useful and I like jquery style building of html since
it gives you direct syntax errors rather than html parse errors which
are not as predictable across browsers. But sometimes performance wise
or from a quick get it working perspective its easier to write out an
html string. Also I think tabbed html is a bit easier on the eyes for
someone that has dealt a lot with html.
Something thats not fun about jquery style is there are many ways to
build that same html string using .wrap or any of other dozen jquery
html manipulation functions ... so the same html could be structured
very differently in the code. Furthermore jquery chain can get pretty
long or be made up of lots of other vars, potentially making it tricky
to rearrange things or identify what html is coming from where.
But perhaps that could be addressed by having jquery html construction
conventions (or a wrapper that mirrored our php side html construction
conventions? )
In general I have used the html output style but did not really think
about it a-priori and I am open to transitioning to more jquery style
output.
here is the html: you can copy and paste this in... on my system Firefox
nightly str builder hovers around 20ms while jquery builder hovers
around 150ms (hard to say what would be a good target number of dom
actions or what is a fair test...) ...jquery could for example output to
a variable instead of direct to dom output shaving 10ms or so and many
other tweaks are possible.
html
head
titleJquery vs str buider/title
script type=text/javascript
src=http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js;/script
script type=text/javascript
var repetCount = 200;
function runTest( mode ){
$('#cat').html('');
var t0 = new Date().getTime();
if( mode =='str'){
doStrBuild();
}else{
dojBuild();
}
$('#rtime').html( (new Date().getTime() - t0) + 'ms');
}
function doStrBuild(){
var o = '';
for(var i =0 ;i repetCount;i++){
o+=''+
'span id=' + escape(i) + ' class=fish' +
'p class=dog rel=foo ' +
escape(i) +
'/p' +
'/span';
}
$('#cat').append(o);
}
function dojBuild(){
for(var i =0 ;i repetCount;i++){
$('span/')
.attr({
'id': i,
'class':'fish'
})
.append( $('p/')
.attr({
'class':'dog',
'rel' : 'foo'
})
.text( i )
).appendTo('#cat');
}
}
/script
/head
body
h3Jquery vs dom insert/h3
Run Time:span id=rtime/span/divbr
a onClick=javascript:runTest('str'); href=#Run Str/abr
a onClick=javascript:runTest('dom'); href=#Run Jquery/abr
br
div id=cat/div
/body
/html
--michael
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] js2 coding style for html output
On Mon, Sep 28, 2009 at 6:44 PM, Michael Dale md...@wikimedia.org wrote:
..
I think both are useful and I like jquery style building of html since
it gives you direct syntax errors rather than html parse errors which
are not as predictable across browsers. But sometimes performance wise
or from a quick get it working perspective its easier to write out an
html string. Also I think tabbed html is a bit easier on the eyes for
someone that has dealt a lot with html.
probabbly not the intend of your message, but your first and second
examples can be mixed
function dojBuild2(){
var box = document.createElement(div);
for(var i =0 ;i repetCount;i++){
var thing = document.createElement(span);
thing.innerHTML ='span id=' + escape(i) + ' class=fish' +
'p class=dog rel=foo ' +
escape(i) +
'/p' +
'/span';
box.appendChild(thing);
}
document.getElementById(cat).appendChild(box);
}
what I think we have here, is that $('#cat') is expensive, and run
inside a loop in dojBuild
Since your post is about coding style, and not perfomance (and not
about the particular speed of this style), ignore this post.
--
--
ℱin del ℳensaje.
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: [Wikitech-l] js2 coding style for html output
[snip]
what I think we have here, is that $('#cat') is expensive, and run
inside a loop in dojBuild
you can build and append in the jquery version and it only shaves 10ms.
ie the following still incurs the jquery html building function call costs:
function dojBuild(){
var o ='';
for(var i =0 ;i repetCount;i++){
o+=$('span/')
.attr({
'id': i,
'class':'fish'
})
.append( $('p/')
.attr({
'class':'dog',
'rel' : 'foo'
})
.text( i )
).html()
}
$('#cat').append(o);
}
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
