template模板字符串

在AJAX请求回数据之后，我们要将这些数据渲染到页面DOM树上。此时，我们有三种方式：

1. 创建元素

最最基本的方法

// 1 创建h2
var h2 = document.createElement("h2");
// 2 创建div
var div = document.createElement("div");
// 3 设置innerHTML
h2.innerHTML = arr[i].title;
// 4 设置innerHTML
div.innerHTML = arr[i].log;
// 5 添加到li中
li.appendChild(h2);
// 6 添加到li中
li.appendChild(div);
// 以上代码可行，但是略繁琐，而且上树次数太多会引起多次重绘和回流。会影响效率。

2. 单行字符串拼接

将所有的html元素，看成一个元素的内部文案，这样就将“创建元素”这个行为转变成“拼接字符串”。

str += "<h2>" + arr[i].title + "</h2><div>" + arr[i].log + "</div>";

此种方式，在dom结构简单的时候可行，但是当要上树的dom结构复杂的时候，单行字符串拼接很可能会看不清楚标签的嵌套关系，修改不方便

3. template模板字符串

underscore使用template模板字符串

template_.template(templateString, [settings])

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象。如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

自定义方法使用模板字符串，需要三个步骤：

步骤一：根据最终渲染出的dom结构定义模板字符串

定义模板的方式：

1. 先在真实的dom结构中使用假数据将结构与样式调整完毕。

2. 将调整完毕的html代码放在一个被改变了type类型无法执行的script标签内(最好是 type="text/template")。

3. 挖空假数据，使用特殊标签将假数据部分代替，并写入字典中目标数据的层级关系。

例如，underscore中的template模板字符串

先在真实的dom结构中使用假数据将结构与样式调整完毕

将调整完毕的html代码放在无法执行的script标签内(type="text/template")

挖空假数据，使用特殊标签<%=%>将假数据部分代替，而且underscore模板字符串中可以使用模板语法

<script type="text/template" id="template"><div><span><%=name%></span><span><%=age%></span><span><%=sex%></span><div><span><%=wife.name%></span><span><%=wife.age%></span><span><%=wife.sex%></span><div><span><%=wife.son.name%></span><span><%=wife.son.age%></span><span><%=wife.son.sex%></span></div></div></div>
</script>

步骤二： 定义格式化函数

自定义格式化函数

/** @tpl  字符串模板* @dic  数据字典* @return  返回的是格式化好的字符串*/
function format(tpl, dic) {// 将tpl中所有的<%=xxx%>、 <%=xxx.xxx%>、<%=xxx.xxx.xxx%>找出来// 定义正则表达式var reg = /<%=((\w+)(\.\w+)*)%>/g;// 替换tpl中符合正则表达式描述的那些内容return tpl.replace(reg, function(match, $1, $2, $3, $4) {// console.log($1);// $1是字典与模板的层级路径关系 我们需要按照该路径将数据提取出来并返回 // 第一步 按照.分割路径var arr = $1.split(".");// 备份dicvar result = dic;// console.log(arr);// 循环arr 并一层一层往下获取数据for(var i = 0; i < arr.length - 1; i++) {// 将result指向下一层及result = result[arr[i]];}return result[arr[i]];});
}

步骤三： 使用格式化函数格式化template，并且添加到DOM结构

var aaa = format(str, data)
document.body.innerHTML += aaa;

template模板字符串相关推荐

ES6, Angular,React和ABAP中的String Template（字符串模板）
String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...
ie模版字符串_字符串模板、模板字符串、Vue中使用template等等。
1:模板字符遇新是直朋能到串传统的一如分算需上来处一定迹面数一跳这件我子作JS语言,输出模板新直能分支调二浏页器朋代说,事刚需求是这样写的: $('#result').append( 'There ...
Vue模板字符串的使用，【html标签、Element-uivue template模板渲染】
文章目录技术背景关于在vue 中 html标签的渲染与使用[v-html] 关于在vue 中element组件标签模板渲染与使用技术 Vue父子组件传值 Vue render函数的引用 Vue ...
ES6 Template String 模板字符串
语法模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 用法 // 普通字符串 `In J ...
设计模式之——Template模板模式
Template模式又叫模板模式,是在父类中定义处理流程的框架,在子类中实现具体处理逻辑的模式.当父类的模板方法被调用时程序行为也会不同,但是,不论子类的具体实现如何,处理的流程都会按照父类中所定义的 ...
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
ES6中的模板字符串---反引号``
在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...
Ansible PLaybook template 模板详解
template 模板模板是一个文本文件,可以做为生成文件的模版,并且模板文件中还可嵌套jinja语法 jinja2语言网站:https://jinja.palletsprojects.com/e ...
【小白学习C++ 教程】十五、C++ 中的template模板和泛型
@Author:Runsen template模板在 C++ 中一个简单但非常强大的工具.简单的想法是将数据类型作为参数传递,这样我们就不需要为不同的数据类型编写相同的代码. C++ 添加了两个新关键 ...

template模板字符串

2. 单行字符串拼接

template模板字符串相关推荐

最新文章

热门文章