如何利用模板将HTML从JavaScript中抽离

前端之家收集整理的这篇文章主要介绍了如何利用模板将HTML从JavaScript中抽离前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、当需要注入大段的HTML标签页面中时,应该使用服务器渲染(从服务器加载HTML标签

方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签(如多页应用)

错误处理代码 } }; xhr.send(null); } //使用YUI的API function loadDialog(name,oncomplete) { Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete); } //使用JQuery的API function loadDialog(name,oncomplete) { $('#dlg-holder').load('/js/dialog/'+name,oncomplete); }

二、客户端模板

对于少量的标签段,应该考虑采用客户端模板。 客户端模板是一些带‘插槽'(占位符)的标签片段,这些占位符会被JavaScript程序(模板引擎)替换为数据,然后把该替换好的标签片段插入到页面中。

自定义模板文本处理程序

模板文本存放位置

1.存放于HTML注释中

...

因为注释也是一个DOM节点,因此可以通过JS将其提取出来:

方法定义 function addItem(url,text){ var mylist = document.getElementById('mylist'); var templateText = mylist.firstChild.nodeValue; //提取模板文本 var result = sprintf(templateText,url,text); div.innerHTML = result; mylist.insertAdjacentHTML('beforeend',result); } //调用方法 addItem('/item/4','First item'); addItem('/item/4','Second item');

2.存放于自定义type属性的script标签

  • %s
  • function addItem(url,text){ var mylist = document.getElementById('mylist'); var script = document.getElementById('list-item'); var templateText = script.text; //提取模板文本 var result = sprintf(templateText,text); var div = document.createElement('div'); div.innerHTML = result.replace(/^\s*/,''); //去除模板文本的前导空格(因为它是在 funtion addItem(url,text){ var mylist = document.getElementById('mylist'),script = document.getElementById('list-item'),template = Handlebars.compile(script.text),//提取模板文本,返回格式化方法 div = document.createElement('div'),result;

    result = template({text:text,url:url});
    div.innerHTML = result;
    mylist.appendChild(div.firstChild);
    }
    //调用
    addItem('/item/4,'First item');

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/45363.html

    猜你在找的JavaScript相关文章