Writing Html using javascript

Asked

Viewed 724 times

1

I was studying some jquery plugins and realized that to create html, the programmer wrote each line in an array and at the end used Join: 

var tpl = [
		'<div class="popover clockpicker-popover">',
			'<div class="arrow"></div>',
			'<div class="popover-title">',
				'<span class="clockpicker-span-hours text-primary"></span>',
				' : ',
				'<span class="clockpicker-span-minutes"></span>',
				'<span class="clockpicker-span-am-pm"></span>',
			'</div>',
			'<div class="popover-content">',
				'<div class="clockpicker-plate">',
					'<div class="clockpicker-canvas"></div>',
					'<div class="clockpicker-dial clockpicker-hours"></div>',
					'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
				'</div>',
				'<span class="clockpicker-am-pm-block">',
				'</span>',
			'</div>',
		'</div>'
	].join('');

Someone, with experience, knows why to write this way, ie without using a string and concatenate each line?

var tpl = '<div class="popover clockpicker-popover">'+
			'<div class="arrow"></div>'+
			'<div class="popover-title">'+
				'<span class="clockpicker-span-hours text-primary"></span>'+
				' : '+
				'<span class="clockpicker-span-minutes"></span>'+
				'<span class="clockpicker-span-am-pm"></span>'+
			'</div>'+
			'<div class="popover-content">'+
				'<div class="clockpicker-plate">'+
					'<div class="clockpicker-canvas"></div>'+
					'<div class="clockpicker-dial clockpicker-hours"></div>'+
					'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>'+
				'</div>'+
				'<span class="clockpicker-am-pm-block">'+
				'</span>'+
			'</div>'+
		'</div>';

javascript html

  • Define "better".

  • ECMA6 string template in the "programming" category is very good, but I don’t know how much performance and compatibility is still not as broad.

  • The doubt is about performance even, correct the "best"

  • On Ecma6 you have the template string link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

  • I didn’t know this string template.

1 answer

1


Between using join or concatenation, concatenating performs better, but the writing of the code can be more meaningful, especially when using ' with " and when there are many lines.

In that test, locally, the concatenção ran 12,497 times in 0.083 seconds against 11.144 in 0.087 seconds with join.

In that other, locally, the concatenção ran 12,703 times in 0.086 seconds against 12,875 in 0.080 seconds with Template strings.

Particularly I prefer to use template string when I need to write HTML javascript. Subjectively it looks better and easier to read, just for multi-line strings and string containing ' and ". And the most interesting thing about him are Tagged template, that gives that power:

let conta = {numero: '9999-9'};   
tag `Minha conta é ${conta.numero}.`

Browser compatibility inserir a descrição da imagem aqui

  • Thank you for the reply.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.