未加星标

JavaScript Templating Without a Library

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

You may have heard of or even used javascript templating engines such as Handlebars.js , Mustache.js or Underscore.js . They can make rendering and updating dynamic content on your website a breeze, but if your needs are dead simple, you might not need a library.

Why JavaScript Templating?

JavaScript templating can be useful if you want dynamic content but don’t have server-side templating available. It also can argubly minimize the amount of data that’s returned to the client (e.g. data as an object or JSON instead of the entire markup), making sites faster and servers more responsive by lowering bandwidth and load. Let’s say you have a list, and each list item has the following markup:

<li class="list-item"> <div class="list-item-column list-item-column--avatar"> <img src="http://example.com/assets/images/avatars/01.png" class="list-item-avatar"> </div> <div class="list-item-column list-item-column--info"> <h3 class="list-item-name">Eva Ferguson</h3> <h4 class="list-item-title">Founder & Lead Developer</h4> <div class="list-item-biography"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quisquam asperiores laborum quae doloremque voluptates explicabo libero deserunt qui. Atque!</p> </div> </div> </li>

If a list needs 50+ of these items, with server-side templating we’d typically get the entire markup back from the Ajax call. Instead, if a template of the markup is available client-side, we can get just the data via Ajax (as a object or an array), then parse the data and generate the final HTML using the template.

type="text/template"

We can use the <script type=\"text/template\"></script> technique to implement templating client-side. The browser ignores the script because the type is not recognized, but the content is still accessible, which we can use when generating HTML.

Let’s say we want to generate an unordered list like the following:

Basecamp , Chicago, IL Google , Mountain View, CA

Let‘s “templatize” the markup of one of the items by using placeholders for the data like:

<ul id="list"> <!--Generated list items will go here--> </ul> <script id="template-list-item" type="text/template"> <li> <a href="{{url}}">{{name}}</a>, {{city}}, {{state}} </li> </script>

Placeholder formats like {{url}} should be unique since we’ll be using search-and-replace, but they’re arbitrary and can be replaced with whatever you want (i.e. %url% , <% url %> ).

Templating with Objects

Now we need to parse the data and generate the HTML. Here’s an example object:

0: { "id": 5, "name": "Basecamp", "city": "Chicago", "state": "IL", "url": "https://basecamp.com/" }, 1: { "id": 17, "name": "Google", "city": "Mountain View", "state": "CA", "url": "http://google.com/" }

The following JavaScript parses the data and replaces the placeholders of the template with the data from the object.

// Object we’re working with var dataObject = { 0: {"id":5,"name":"Basecamp","city":"Chicago","state":"IL","url":"https://basecamp.com/"}, 1: {"id":17,"name":"Google","city":"Mountain View","state":"CA","url":"http://google.com/"} }; // Cache of the template var template = document.getElementById("template-list-item"); // Get the contents of the template var templateHtml = template.innerHTML; // Final HTML variable as empty string var listHtml = ""; // Loop through dataObject, replace placeholder tags // with actual data, and generate final HTML for (var key in dataObject) { listHtml += templateHtml.replace(/{{id}}/g, dataObject[key]["id"]) .replace(/{{name}}/g, dataObject[key]["name"]) .replace(/{{city}}/g, dataObject[key]["city"]) .replace(/{{state}}/g, dataObject[key]["state"]) .replace(/{{url}}/g, dataObject[key]["url"]); } // Replace the HTML of #list with final HTML document.getElementById("list").innerHTML = listHtml;

By taking the HTML of the template, we can replace the placeholder with the actual data using JavaScript’s replace() and a regular expression //g to do a global replace (replace all occurrences).

We can also use dot notation since we’re working with an object:

for (var key in dataObject) { listHtml += templateHtml.replace(/{{id}}/g, dataObject[key].id) .replace(/{{name}}/g, dataObject[key].name) .replace(/{{city}}/g, dataObject[key].city) .replace(/{{state}}/g, dataObject[key].state) .replace(/{{url}}/g, dataObject[key].url); } Templating with Arrays

If you prefer or need to work with arrays, the implementation is slightly different. For this example we’ll just use the data from above and convert it to an array before looping through it.

// Convert dataObject to an array var dataArray = Object.keys(dataObject).map(function(k) { return dataObject[k]; }); // Loop through array dataArray, replace placeholder tags // with actual data, and generate final HTML for (i = 0; i < dataArray.length; i++) { listHtml += templateHtml.replace(/{{id}}/g, dataArray[i]["id"]) .replace(/{{name}}/g, dataArray[i]["name"]) .replace(/{{city}}/g, dataArray[i]["city"]) .replace(/{{state}}/g, dataArray[i]["state"]) .replace(/{{url}}/g, dataArray[i]["url"]); } // Replace the HTML of #list with final HTML document.getElementById("list").innerHTML = listHtml; Hooking It Up to Ajax

Now that we got the parsing of the data and generating of the HTML figured out, let’s implement the solution (with a few modifications) into a scenario where we’re getting the data via Ajax.

var template = document.getElementById("template-list-item"); var templateHtml = template.innerHTML; // Ajax Call var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { // On success if (xhr.state == 200) { // Convert JSON string response to an Object var dataObject = JSON.parse(xhr.responseText); document.getElementById("list").innerHTML = listCreateHtml(dataObject); } } } xhr.open("GET", "/url/to/get-data/", true); xhr.send(); // Function to generate and returns the HTML. // Accepts an object as a parameter function listCreateHtml(dataObject) { var listHtml = ""; for (key in dataObject) {\ listHtml += templateHtml.replace(/{{id}}/g, dataObject[key]["id"]) .replace(/{{name}}/g, dataObject[key]["name"]) .replace(/{{city}}/g, dataObject[key]["city"]) .replace(/{{state}}/g, dataObject[key]["state"]) .replace(/{{url}}/g, dataObject[key]["url"]); } return listHtml; }

Note that we created a helper function listCreateHtml that accepts an object to help us create the HTML.

And if you’re using jQuery for your Ajax, this is what your call could look like:

$.ajax({ type: "GET", url: "/url/to/get-data/", dataType: "json", success: function(dataJSON) { // Convert JSON string response to an Object var dataObject = JSON.parse(dataJSON); document.getElementById("list").innerHTML = listCreateHtml(data); } }); Find the Right Tool for the Job

Based on your needs, you may want to rely on a more robust JavaScript templating library like Underscore.js or Mustache.js; you may need something even more powerful like AngularJS , Backbone.js , Ember.js , React.js .

There are a plethora of tools, frameworks, and libraries you can depend on, but the key is to properly assess your needs and find the right tools for the job. In some cases, a simple JavaScript-only solution with no dependency or library may be all you need, but that’s something that I can’t determine for you.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLJavaJavaScriptAjaxXMLReactAngularJSjQuery
分页:12
转载请注明
本文标题:JavaScript Templating Without a Library
本站链接:http://www.codesec.net/view/482248.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(40)