模板引擎的应用

1.模板字符串

var stu = {

name : "lida",

age : 23,

place : "北京市朝阳区",

work : "设计"

}

// ES5之前拼接的字符串

// 1.拼接太麻烦需要多次分割不便于维护

// 2.所有拼接的字符串只能一行显示

document.querySelector("p").innerHTML = "我叫" + stu.name + "我今年" + stu.age + "岁" + "我住在" + stu.place + "我的工作是" + stu.work;

// 模板字符串所有的内容写在反引号(``)里面然后变量放在${}里面

document.querySelector("p").innerHTML = `我叫${stu.name},我今年${stu.age}岁，我住在${stu.place},我的工作是${stu.work}`;

// 在${}可以放在任意的JS表达式可以进行运算

function age(num){

return num + 1;

}

document.querySelector("p").innerHTML = `我叫${stu.name},我今年${stu.age}岁，我住在${stu.place},我的工作是${stu.work}`;

var say = "say";

console.log(say[0]);

say[0] == "sayhi";

console.log(say); //say



2.模板引擎
// 页面渲染使用字符串拼接 会存在问题 ： 字符的恒定性 字符串拼接的时候容易出错
        // 模板引擎不用拼接字符串  直接使用 静态页面里面的html里面的结构生成模板 需要渲染的时候直接调用
    
        // 模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。

        // 模板引擎使用步骤 : 
        // 1. 导入模板引擎
        // 2. 准备一个模板
            // 1. 准备模板必须要是用script   模板引擎规定的只能使用script
            // 2. 必须要给他一个id  在调用方法的时候使用
            // 3. 必须要有type属性  而且type属性绝对绝对不能使text/javascript
        // 3. 调用方法  生成html结构


        // 注意点 : 
        // 1. 挖坑的时候 一定要注意  坑的名字一定要和对象的属性名一直
        // 2. type的值只要不是text/javascript  但是建议使用text/html  因为其他的没办法识别标签
        // 3. <% = %> 必须是一个完整的整体 不能加空格 或者其他的符号

var stu = {

name : "Lisa",

age : 18

}

var html = template("tpl", stu);

var sa = {

xingming : "黑龙江",

age : 16

}

html += template("tpl", sa);

console.log(html);

document.body.innerHTML = html;

var arr = [

{

name : "Divo",

age : 18

{

name : "Mary",

age : 15

{

name : "舞蹈",

age : 18

}

]

　　　　3.模板引擎的内部循环

　　　　<script src="./template-web.js"></script>

　　<%for (var i = 0; i < list.length;i++){ %>

<% } else { %>

<% } %>

</p>

<% } %>

</script>

4.模板引擎的应用　　<%= %>容易丢失符号 用{{}}来代替

<script src="./template-web.js"></script>

　　　　//直接使用{{ each list value}} 来代替 <p>大家好，我叫<%= list[i].name %>,我今年<% if(list[i].age > 20) { %> <u>成年</u> <% } else { %> <u>未成年</u> <% } %> </p> <% } %>，这种形式显得很麻烦，而且容易丢失符号，不方便查找

　　{{ each list value}} //for循环的写法

　　<h1>{{ value.title }}</h1>

　　<p>{{ value.name }} </p>

　　　　　　　　　{{ if value.age >= 18 }}　　//if不需要自带的括号

</script>