模板引擎的应用

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>

    　　<script type="text/html" id="tpl">

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

            　　<h1>自我介绍</h1>

            　　<p>大家好，我叫<%= list[i].name %>,我今年<% if(list[i].age > 20) { %>

                <u>成年</u>

                <% } else { %>

                    <u>未成年</u>

                <% } %>

            </p>

            <% } %>

    </script>

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

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

    　　<script type="text/html" id="tpl">

　　　　//直接使用{{ 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不需要自带的括号

                <u>成年</u>

                {{ else }}

                    <u>未成年</u>

                {{ /if }}

            {{ /each }}

    </script>