arrays - Optimum Way To Write Long Javascript Variables containing HTML -
hi guys i'm working on web app outputs heap of html , objects onto html page via javascript.
its looking quite messy , made me wonder - optimum way write , why.
this code
var html_content = ''; html_content += "<div class='body-content'>"; html_content += "<h1>" + wowarr.name +"</h1><br />" + "<h2> arena titles (account wide)</h2>" + achievementz.join('<br />') + "<br /><br />" + "<h2>highest arena ratings</h2>" + "<span style='color: #ffffff;'>"+rating2v2.name+"</span>" + ": " + rating2v2.quantity + "<br/>" + "last reached on: " + gethighestdate(rating2v2) + "<br/><br/>" + "<span style='color: #ffffff;'>"+rating3v3.name+"</span>" + ": " + rating3v3.quantity + "<br/>" + "last reached on: " + gethighestdate(rating3v3) + "<br/><br/>" + "<span style='color: #ffffff;'>"+rating5v5.name+"</span>" + ": " + rating5v5.quantity + "<br/>" + "last reached on: " + gethighestdate(rating5v5) + "<br/><br/>" + "<h2>current arena rating</h2>2v2 rating: " + wow2s + '<br />' + "3v3 rating: " + wow3s + '<br />' + "5v5 rating: " + wow5s + '<br /><br />' + "<h2>current rbg rating</h2>rbg rating: " + wowrbgs + '<br /><br />' + '<input type="button" class="homebtn" name="startgame" value="new" onclick="reloadw();">'; html_content += "</div>"; $('.main-content').html(html_content); to me looks theres better way don't have slightest start.
any direction or appreciated!
es6 template syntax other answer neat, , useful in cases.
however, looking lightweight templating engine.
let me give few reasons use template engine instead of concatenating strings:
it cleanest way solve problem
you can separate templates / data , rendering code, it's easier maintain
your security free: {{variables}} automatically escaped (see how escaped "name" variable in example below)
since have
achievementz.join(), assume wanted loop through achievements display , templates become more complex loops, conditional statements etc... templating engine can handle that: loops, conditions , function callsno need worry compatibility, can use method pretty anywhere
it flexible , if want can automatically compile templates js variables, embed templates .js files , keep advantages above
here full rewrite of code using mustache templating engine (mustache.js) :
<!doctype html> <head> </head> <body> <div id="main-content"></div> </body> <!-- here template --> <script id="template" type="x-tmpl-mustache"> <div class='body-content'> <h1>{{ name }}</h1><br /> <h2> arena titles (account wide)</h2> {{#achievementz}} {{.}}<br/> {{/achievementz}} <br/> <h2>highest arena ratings</h2> <span style='color: #000;'> {{ rating2v2.name }}</span>: {{ rating2v2.quantity }}<br/>last reached on: {{ rating2v2.highestdate }} <br/><br/> <span style='color: #000;'>{{ rating3v3.name }}</span>: {{ rating3v3.quantity }}<br/>last reached on: {{ rating3v3.highestdate }}<br/><br/> <span style='color: #000;'>{{ rating5v5.name }}</span>: {{ rating5v5.quantity }}<br/>last reached on: {{ rating5v5.highestdate }}<br/><br/> <h2>current arena rating</h2>2v2 rating: {{ wow2s }}<br /> 3v3 rating: {{ wow3s }}<br /> 5v5 rating: {{ wow5s }}<br /><br /> <h2>current rbg rating</h2>rbg rating: {{ wowrbgs }}<br /><br /> <input type="button" class="homebtn" name="startgame" value="new" onclick="reloadw();"> </div> </script> <!-- templating engine --> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script> <!-- usage --> <script> var gethighestdate = function() { var date = new date(); return date.getfullyear(); }; // data var view = { name: "super <b>joe</b>", achievementz: [ "achievement 1", "achievement 2", "achievement 3", "achievement 4" ], rating2v2: { name: "mr red", quantity: 42, highestdate: gethighestdate }, rating3v3: { name: "mr orange", quantity: 69, highestdate: gethighestdate }, rating5v5: { name: "mr black", quantity: 666, highestdate: gethighestdate }, wow2s: "wow2s text...", wow3s: "wow3s text...", wow5s: "wow5s text...", wowrbgs: "wow rgb..." }; // rendering code document.getelementbyid("main-content").innerhtml = mustache.render(document.getelementbyid("template").text, view); </script>
Comments
Post a Comment