Для таких задач идеально подходят js фреймворки, например vue, angular, react.
Если хочется свой велосипед, то как-то так:
JSON шаблон[
{
"title": "About my company",
"text": "Lorem ipusm ..."
}
]
HTML Шаблон<div class="about">
<h2>{{title}}</h2>
<p>{{text}}</p>
</div>
JavaScript(function ($) {
'use strict';
JSONTemplate(
'https://example.com/api/about.json',
'https://example.com/templates/about.html'
).then(function (html) {
$('body').append(html);
});
function JSONTemplate(jsonLink, htmlLink) {
return promise(function (resolve, reject) {
$.when(
ajax(jsonLink, {
dataType: 'json'
}),
ajax(htmlLink, {
dataType: 'text'
})
).done(function (json, html) {
var $html = '';
json.forEach(function (item) {
$html += tag(html, item);
});
return resolve($html);
}).fail(reject);
});
}
function ajax(link, setup) {
return $.ajax($.extend(true, {}, {
method: 'GET'
}, setup || {}, {
url: link
}));
}
function tag(input, data) {
for (var tag in data) {
input = input.replace(new RegExp('\{\{' + tag + '\}\}', 'g'), data[tag]);
}
return input;
}
function promise(callback) {
var deferred = $.Deferred();
callback && callback(deferred.resolve, deferred.reject);
return deferred;
}
}(jQuery));
Результат<body>
<div class="about">
<h2>About my company</h2>
<p>Lorem ipusm ...</p>
</div>
</body>
Вот вам
полный пример с маленьким шаблонизатором, чтобы можно было использовать теги в шаблонах, например:
<div class="item">
<h2>{{title}}</h2>
<div>{{price}} <span v-show="discount">{{discount}}</span></div>
<button>{{button}}</button>
</div>
