利用模板将HTML从JavaScript中抽离

william 发布于2019-08-01 15:46 / 1027人阅读

摘要：客户端模板是一些带插槽占位符的标签片段，这些占位符会被程序模板引擎替换为数据，然后把该替换好的标签片段插入到页面中。

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

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

function loadDialog(name, oncomplete) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", "/js/dialog/"+name, true);
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4 && xhr.status == 200){
            var div = document.getElementById("dlg-holder");
            div.innerHTML = xhr.responseText;
            oncomplete();
        }else {
            //错误处理代码
        }
    };
    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程序(模板引擎)替换为数据，然后把该替换好的标签片段插入到页面中。

JavaScript程序(模板引擎)

自定义模板文本处理程序

function sprintf(text){
    var i=1,args=arguments;
    return text.replace(/%s/g, function(){
        return (i
模板文本存放位置
1.存放于HTML注释中

    ...

因为注释也是一个DOM节点，因此可以通过JS将其提取出来：
//格式化并插入DOM的方法定义
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属性的

function addItem(url,text){
   var mylist = document.getElementById("mylist");
   var script = document.getElementById("list-item");
   var templateText = script.text; //提取模板文本
   var result = sprintf(templateText,url,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");

本文参考《编写可维护的JavaScript》

云服务器 GPU云服务器中抽离将文件从ftp服务器 javascript从入门到精通 javascript从入门到精通下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50102.html

利用模板将HTML从JavaScript中抽离

摘要：客户端模板是一些带插槽占位符的标签片段，这些占位符会被程序模板引擎替换为数据，然后把该替换好的标签片段插入到页面中。一、当需要注入大段的HTML标签到页面中时，应该使用服务器渲染（从服务器加载HTML标签）该方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签（如多页应用） function loadDialog(name, oncomplete) { ...

jsyzchen 2019-08-20 11:24 评论0 收藏0
UI 层的松耦合

摘要：松耦合当你能够做到修改一个组件而不需要更改其他组件时，就做到了松耦合，松耦合对于代码可维护性来说是至关重要的。应该使用保持和的沟通。将从中抽离在和更早版本的浏览器中有一个特性，即表达式。如下不好的写法已经不再支持表达式了。松耦合当你能够做到修改一个组件而不需要更改其他组件时，就做到了松耦合，松耦合对于代码可维护性来说是至关重要的。原则不要使用 css 表达式。（这种方式...

keithxiaoy 2019-08-21 12:37 评论0 收藏0
《编写可维护的 JavaScript》读书笔记

摘要：最近阅读了编写可维护的，在这里记录一下读书笔记。禁止使用，，，的字符串形式。避免使用级事件处理函数。让事件处理程序成为接触到对象的唯一函数。检测函数是检测检测函数的最佳选择。为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性检测。最近阅读了《编写可维护的 JavaScript》，在这里记录一下读书笔记。书中主要基于三个方向来讲解怎么增加代码的可维护性：编程风格、编程实践、自动化...

tuniutech 2019-08-23 16:25 评论0 收藏0
编程实践

摘要：将从中抽离不允许使用属性比如来绑定一个事件处理程序。避免空比较检测原始值如果你希望一个值是字符串数字布尔值或。当再次发生错误时，这将有助于更容易地解决问题。 UI层的松耦合将CSS从JavaScript中抽离不允许在js中修改元素的样式，最佳方法是控制className。有例外：比如说定位等问题，可以修改而不使用className控制。将JavaScript从H...

tuniutech 2019-08-21 10:36 评论0 收藏0