1.关于mustache

最新推荐文章于 2023-07-03 13:05:50 发布

小白变怪兽

最新推荐文章于 2023-07-03 13:05:50 发布

阅读量212

点赞数

分类专栏： vue 文章标签： mustache

本文链接：https://blog.csdn.net/u013558749/article/details/115759152

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

什么是mustache？

mustache是一种模板渲染引擎

mustache基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        let templateStr = `
            <ul>
                {{#arr}}
                <li>
                    <div class="hd">{{name}}的基本信息</div>    
                    <div class="bd">
                        <p>姓名：{{name}}</p>    
                        <p>年龄：{{age}}</p>    
                    </div>
                </li>
                {{/arr}}
            </ul>
            <div>{{thing}}</div>
        `
        let data = {
            arr: [{
                name: '明',
                age: 12
            }, {
                name: '红',
                age: 33
            }],
            thing: '搞事情'
        }

        let domStr = Mustache.render(templateStr, data)
        let container = document.getElementById('container')
        container.innerHTML = domStr
    </script>
</body>
</html>

编写简易版本的mustache

首先我们先来熟悉下mustache是如何将数据转为视图的

（1）将模板字符串转化成tokens

// 模板字符串
let templateStr = `
   <ul>
        {{#arr}}
        <li>
            <div class="hd">{{name}}的基本信息</div>    
            <div class="bd">
                <p>姓名：{{name}}</p>    
                <p>年龄：{{age}}</p>    
            </div>
        </li>
        {{/arr}}
    </ul>
    <div>{{thing}}</div>
`
// 得到的tokens
let tokens = [
    ['text', '<ul>'],
    ['#', 'arr', [
        ['text', '<li><div class="hd">'],
        ['name', 'name'],
        ['text', '的基本信息</div><div class="bd"><p>姓名：'],
        ['name', 'name'],
        ['text', '</p><p>年龄：'],
        ['name', 'age'],
        ['text', '</p></div></li>']
    ]],
    ['text', '</ul><div>'],
    ['name', 'thing'],
    ['text', '</div>']
]

（2）将得到的tokens结合数据最终转化成dom字符串

// 需要转化的数据
let data = {
	arr: [{
	   name: '明',
	    age: 12
	}, {
	    name: '红',
	    age: 33
	}],
	thing: '搞事情'
}
// 结合（1）得到的tokens进行解析后
<ul>
    <li>
        <div class="hd">明的基本信息</div>    
        <div class="bd">
            <p>姓名：明</p>    
            <p>年龄：12</p>    
        </div>
    </li>
    <li>
		<div class="hd">33的基本信息</div>    
        <div class="bd">
            <p>姓名：红</p>    
            <p>年龄：33</p>    
        </div>
    </li>
</ul>
<div>搞事情</div>

接下来我们再来看下步骤1的具体实现过程(下面取一个简单的demo来进行介绍：我在学习{{lesson}}, 感觉{{status}}哦)
（1）转化为tokens (主要是通过Scanner方法，通过‘{{’和‘}}’将‘{{’前内容和大括号中间内容进行提取)，传入模板转化成如下图结构

说明：如基本使用例子中有涉及到数据因此还需要在此项基础上进一步处理，底下代码中可自行查看nestTokens函数。
（2）tokens结合data解析dom字符串
如demo中这种简单的我们只需要一句每一项开头是text还是name来进行区分如何拼接数据
即：text直接拼接，name取data中对应的值拼接（renderTemplate方法），得到结果如下

说明：上方所说是不涉及数组的情况，因此针对数组我们还需要进一步进行处理（操作方法一致，只需要判断开头为＃的，那么对应数组下标2里的内容就需要进行递归调用renderTemplate方法），底下代码中可自行查看ParseArray函数

简易版代码
提取码：6666

小白变怪兽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.关于mustache

什么是mustache？mustache是一种模板渲染引擎mustache基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫

专栏目录