今天做题遇到了一个问题,vue的模板语法是基于什么的,带着强烈的好奇心我找到了它,mustache,胡子语法;
然后打开了官网,这个语法已经支持了20多种编程语言,js的支持是node的作者开源的;

微信截图_20190909220549.png

git地址: https://github.com/janl/mustache.js

模板引擎技术是非常有用的,所以它不是一个冷门的知识,反而是需要我们去了解的;

所以我们通过github的安装指令,一步一步的来实现基本的api

我搜查了很多资料,网上并没有一个使用npm包的方式来做demo,都是使用render来执行渲染,鉴于我们日常工作中使用npm比较多,我做一版npm的demo

首先npm init初始化一个空项目;

然后安装mustache

npm i mustache -s -d

在package.json中填写如下内容:

"scripts": {
    "build": "mustache dataView.json myTemplate.mustache>public/output.html",
  },

如同这个指示看到的一样,我们需要创建一个json文件,这个文件就是变量配置文件,还需要创建一个模板文件,这个模板文件相当于执行render函数的文件,这种方式更加一目了然;

我们创建它们,我使用了vscode,并且装了相关的mustache的插件,所以语法会有提示;

微信截图_20190909221112.png

我们首先在json文件中写入一个对象,里面写一个值,然后在模板文件中使用{{}}来执行渲染;

然后执行

npm run build

就会发现在public下面生成了一个html文件,如果报错,说明你的文件目录跟我的不一样

我们在json文件中,写入了这么多值,有普通的值,有布尔值,有数组等等

{
"name": "shenhao",
"age": "19",
"html": "<p>123</p>",
"isTrue": true,
"thisIsObject": {
    "name": "shenhao",
    "age": "19"
},
"isArray": [{
    "name" : "shenhao"
},{
    "name" : "shenhao"
},{
    "name" : "shenhao"
}]
}

我们在模板中写出了这些代码,我在模板中写了一个简单的html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{name}} 有一个 {{&html}}  
<br>
<hr>
 {{thisIsObject.name}} {{thisIsObject.age}}
 <br>
<hr>
-webkit- {{#isTrue}} 如果是真就显示了 {{/isTrue}}
 <br>
<hr>
循环一下下面的内容, 如果是数组,可以用.来表示循环的每一个元素
{{#isArray}} {{name}} {{/isArray}}
<br>
<hr>
{{!^}}与{{!#}}相反,如果变量是null、undefined、 false、和空数组讲输出结果

</body>
</html>

我们来讲解一下基本的api

{{name}}:会在json中查询对应的值,并且渲染
{{&html}}: html在json中如果式一个html标签,可以用这样的方式进行转义 (类似vue中的v-html)
{{#boolean}} 和 {{/boolean}}: 是一个组合,如果boolean为真那么它们之间的内容会渲染,否则不会
{{^boolean}}: 和上面用法一样,只不过是上面的else
{{object.name}}: 同样支持对象键值对的方式获取
{{#array}} 和 {{/array}}: 如果这样写是一个数组,那么不仅有判断boolean的真假,它会迭代中间可以写迭代中的每一个元素,每一个元素可以用{{.}}来获取,如果要获取迭代中的内容是一个键值对,那么可以直接使用{{name}}

这就是mustache简单的用法,上面有demo,你们可以对着demo敲一遍就能非常easy的理解了;
希望理解了这个技术,你可以在其他语言同样可以用到它!

标签: none

添加新评论