使用脚本标签作为模板系统

Question

** Revised **

I made this basic example which I believe is evicence that JavaScript may be useful as it's own template engine: http://jsfiddle.net/julienetienne/u6akrx7j/

<script>talk[0].text('Hello World!');</script>

It's just a simple example but as you can see there are many possibilities eg.

• It doesn't necessarily have to detect the tag nodes in that manner, it could do it by class, id. It is also possible to obtain the script node of the function,
• you could simply print variables like p('Page Title');
• A self closing list of elements could be similar to eg li('', menu);
• And you could clearly build up other complex data sets as you can with any other common template engine.

Before this edit I made the mistake of comparing it to PHP. I'm actually considering it more of an alternative to eg handlebars , underscore , moustache , dust and similar.

But before I get to excited I would really like to know if there are any issues in regards to using in this way. (I'm not concerned with novice best practices).

The benefits of an organic template system seems quite apparent. The biggest advantage is that there is no syntax to learn and it's cleaner than seeing %{{foobar}}% like markings.

Considering my example is just a tiny minimalistic concept, please tell me the drawbacks of a system like this compared to common template engines.

Thanks

Answer 1

It looks like it's a PHP-style templating system, but it is apparently not: In the fiddle the script parts could be written anywhere in the page.

The part that defines the position of the texts to be inserted into the DOM is defined by the line var talk = document.getElementsByTagName('div'); and the structure of the HTML.

If you'd use more div than the ones already there the texts will appear at a totally different (and supposedly wrong) position.

The disavantage will thus be, that you can't use the system independently of the underlying markup. That makes it different from a use case in PHP, where you can echo the variables by defining their position in the markup.

Have a look at Angular or similar front end frameworks, if you are looking for a way how to implement a templating system.