Handlebars+tpl模块化开发html

最新推荐文章于 2024-03-25 09:34:52 发布

任性的萝卜

最新推荐文章于 2024-03-25 09:34:52 发布

阅读量708

点赞数

分类专栏： web 文章标签： handlebars require

本文链接：https://blog.csdn.net/weixin_44373940/article/details/107702316

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Handlebars入门

1、什么是Handlebars

Handlebars是一种简单的模板语言。

它使用模板和输入对象来生成HTML或其它文本格式。它还内嵌有Handlebars表达式（类似与el表达式），并可以通过注册helper来自定义满足自己需要的帮助模块。

2、Handlebars简单应用

用Handlebars的each表达式生成一个表格

<body>
    <script type="text/x-handlebars-template" id="tbody-tr">
        <!-- 遍历json对象生成表格项 student -->
        {{#each student}}
        <tr>
        <td>{{name}}</td>
        <td>{{sex}}</td>
        <td>{{age}}</td>
        </tr>
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var houdun={
        "student":[
            {
                "name":"向华强",
                "sex":"男",
                "age":"12"

            },
            {
                "name":"guai",
                "sex":"男",
                "age":"12"
            },{
                "name":"cabbage",
                "sex":"女",
                "age":"12"
            }
        ]
    };
    //根据指定的容器 编译一个模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     //将模板放到tbody标签中并向模板中传入参数
 $('tbody').html(myTpl(houdun));
    </script>

this在each标签中的简单应用

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        <!-- this指代传递进来的json对象 -->
        {{#each this}}
        <tr>
        <td>{{name}}</td>
        <td>{{sex}}</td>
        <td>{{age}}</td>
        </tr>
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"男",
                "age":"12"

            },
            {
                "name":"guai",
                "sex":"男",
                "age":"12"
            },{
                "name":"cabbage",
                "sex":"女",
                "age":"12"
            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

each 的嵌套使用

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        {{#each this}}
            {{#each info}}
            <tr>
                <!-- ../表示上一层数据 -->
              <td>{{../name}}的{{this}}</td>
            </tr>
            {{/each}}
        {{/each}}
        
    </script>
    <table border="1">
    </table>
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "info":["爸爸","妈妈","女朋友"]

            },
            {
                "name":"guai",
                "info":["爸爸","妈妈","女朋友"]

            },{
                "name":"cabbage",
                "info":["爸爸","妈妈","女朋友"]

            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     //将模板放到tbody标签中并向模板中传入参数
     $('table').html(myTpl(houdun));
    </script>

each中索引index的简单应用

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        {{#each this}}
            <tr>
              <!--引用索引 -->
                <td>{{@index}}</td>
                <td>{{name}}</td>
                <td>{{sex}}</td>
                <td>{{age}}</td>
            </tr>
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"男",
                "age":"12"

            },
            {
                "name":"guai",
                "sex":"女",
                "age":"12"

            },{
                "name":"cabbage",
                "sex":"男",
                "age":"12"

            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

注册一个helper实现index索引从1开始

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        {{#each this}}
            {{#if name}}
                <tr>
                <!--引用自定义的helper -->
                    <td>{{addOne @index}}</td>
                    <td>{{name}}</td>
                    <td>{{sex}}</td>
                    <td>{{age}}</td>
                </tr>
                {{/if}}
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"男",
                "age":"12"

            },
            {
                "name":"guai",
                "sex":"女",
                "age":"12"

            },{
                "name":"cabbage",
                "sex":"男",
                "age":"12"

            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     //注册一个帮助模块  
     Handlebars.registerHelper("addOne",function(index,option){
         return parseInt(index)+1;
     });


     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

3、注册helper

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        <!-- this指代传递进来的json对象 -->
        {{#each this}}
        <!-- 使用注册的helper实现当年龄大于20时展示信息否则不展示-->
        {{#compare age 20}}
            <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            </tr>
            {{else}}
            <tr>
                <td>不大于20</td>
                <td></td>
                <td></td>
                </tr>
        {{/compare}}
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"男",
                "age":"22"

            },
            {
                "name":"guai",
                "sex":"男",
                "age":"21"
            },{
                "name":"cabbage",
                "sex":"女",
                "age":"12"
            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     Handlebars.registerHelper("compare",function(v1,v2,options){
         if(v1>v2){
             //执行else之前的代码
             return options.fn(this);
         }else{
             //执行else之后的代码
             return options.inverse(this);
         }
     })
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

4、代码调取处理

<!-- 当使用{{}}展示的数据中含有html代码片段时使用双层{}时原样展示数据不解析
当使用{{{}}}时将进行html解析 -->
<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        <!-- this指代传递进来的json对象 -->
        {{#each this}}
         
            <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            {{#compare age 20}}
                <td>{{homepage}}</td>
            {{else}}
                <td>{{{homepage}}}</td>
            {{/compare}}
            </tr>
           
     
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>主页</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
    
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"男",
                "age":"22",
                "homepage":'<a href="http://www.kuaixuewang.com">首页</a>'
            },
            {
                "name":"guai",
                "sex":"男",
                "age":"21",
                "homepage":'<a href="http://www.kuaixuewang.com">首页</a>'
            },{
                "name":"cabbage",
                "sex":"女",
                "age":"12",
                "homepage":'<a href="http://www.kuaixuewang.com">首页</a>'
            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     Handlebars.registerHelper("compare",function(v1,v2,option){
         if(v1>v2){
             //执行else之前的代码
             return option.fn(this);
         }else{
             //执行else之后的代码
             return option.inverse(this);
         }
     })
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

5、行级helper的用法

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        <!-- this指代传递进来的json对象 -->
        {{#each this}}
            <tr>
            <td>{{name}}</td>
            <td>{{format sex}}</td>
            <td>{{age}}</td>
            </tr>
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
    
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"1",
                "age":"22" 
            },
            {
                "name":"guai",
                "sex":"1",
                "age":"21" 
            },{
                "name":"cabbage",
                "sex":"0",
                "age":"12" 
            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     Handlebars.registerHelper("format",function(v){
         if(v==0){
             return "女";
         }else{
             return "男";
         }
     })
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

6、with的使用

<body>
    <script type="text/x-handlebars-template" id="tbody-tr"> 
        <!-- this指代传递进来的json对象 -->
        {{#each this}}
            <tr>
            <td>{{name}}</td>
            <td>{{format sex}}</td>
            <td>{{age}}</td>
            <td>
                {{#each hobby}}
                <p>{{name}}</p>
                {{/each}}
            </td>
            <!-- <td>
                with进入到一个属性中
                {{#with hobby}}
                {{#each this}}    
                    <p>{{name}}</p>
                {{/each}}
                {{/with}}
            </td> -->
            </tr>
        {{/each}}
        
    </script>
    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
    
</body>
<script type="text/javascript">
    var houdun= [
            {
                "name":"向华强",
                "sex":"1",
                "age":"22" ,
                "hobby":[{"name":"篮球"},{"name":"排球"}]
            },
            {
                "name":"guai",
                "sex":"1",
                "age":"21" ,
                "hobby":[{"name":"篮球"},{"name":"排球"}]
            },{
                "name":"cabbage",
                "sex":"0",
                "age":"12" ,
                "hobby":[{"name":"篮球"},{"name":"排球"}]
            }
        ]
    ;
    //编译模板
     var myTpl=Handlebars.compile($('#tbody-tr').html());
     Handlebars.registerHelper("format",function(v){
         if(v==0){
             return "女";
         }else{
             return "男";
         }
     })
     //将模板放到tbody标签中并向模板中传入参数
     $('tbody').html(myTpl(houdun));
    </script>

7、整合require.js与外部的html代码块的简单应用

环境准备：

handlebars-v4.7.6.js ：简单的模板语言支持

jquery.js

require.js ：模块加载器

tpl.js ：主要用于加载tpl、txt等文档中的html

目录结构：
在这里插入图片描述

步骤：

创建index.html 引入jquery.jshandlebars.js，创建一个表格（表格内容将通过main.js创建）;代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>handlebars + tpl</title>
    <script src="lib/jquery.js"></script>
    <script src="lib/handlebars-v4.7.6.js"></script>
</head>

<body>
<table border="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
   <tbody>

   </tbody>
</table>
</body>
<!--require.js模块化加载js-->
<script src="lib/require.js" data-main="lib/main.js"></script>
</html>

创建利用handlebars创建表格体的tpl如下：

 {{#each this}}
     <tr>
     <td>{{name}}</td>
     <td>{{sex}}</td>
     <td>{{age}}</td>
     </tr>
 {{/each}}

创建main.js 在该文件中获取tpl中的html片段并利用Handlebars.compile()编译成一个模板并通过传入数据生成表格体并放入tbody容器中如下：

require({
	paths: {
		tpl: 'tpl'
	}
}, ['tpl!table.tpl'], function(tableTpl) {
	var student=[{
		"name":"guai",
		"sex":"男",
		"age":"12"
	}, {
			"name":"guai",
			"sex":"男",
			"age":"12"
		}];

    //获取table.tpl中的html片段 编译成一个模板
	var tableHtml= Handlebars.compile(tableTpl());
	 //向模板中传入参数获取 加工后的html并放到tbody容器中
	$("tbody").html(tableHtml(student));

});

结果：

8、总结

通过require（模块加载器）与Handlebars（模板支持）实现预编译提高渲染速度，通过引入外部的html片段并添加到指定容器可以实现网页的模块化，将一个网页根据功能划分为不同的模块，将不同模块的放在不同的tpl（静态文件）中，通过不同的js去渲染并添加到网页的容器中，可以将一个复杂的html模块化便于开发、维护和分工。