客户端使用模板引擎

模板引擎的作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来。

使用npm安装的模板引擎是在服务器端使用的:npm install art0template --save

浏览器端的模板引擎是需要下载template-web.js文件的,并且要引入到页面中。

官方地址:https://aui.github.io/art-template/zh-cn/index.html

使用步骤:

① 下载 art-template 模板弓引擎库文件,并在HTML页面中引入库文件 

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

② 准备art-template模板

<script id="tpl" type="text/html">
    <div class="box"></div>
</script>

③ 告诉模板引擎将哪一个模板和哪个数据进行拼接

var html = template('tpl', {username: 'zhangsan', age: '20'});

④ 将拼接好的html字符串添加到页面中

document.getElementById('container').innerHTML = html;

⑤ 通过模板语法告诉模板引擎,数据和html字符串要如何拼接

<script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
</script>

注意:

  • 客户端JavaScript不具备读取文件的能力,所以在客户端模板并不是一个单独的文件,而是HTML文件中的一段代码片段
  • 使用<script>标签包裹,<script>标签需要有一个id标识,因为可能有多个模板,需要使用id来区分
  • 在<script>标签内部写HTML语法,但是在<script>标签中,默认将其内部视为JS语法,所以写HTML语法不是特别方便,也没有提示信息
  • 为了解决这个问题,可以在<script>标签添加type属性,该属性为text/html,编辑器就会将<script>标签内部的代码当作HTML代码来解析了
  • 在<script>标签内部写的HTML代码实际上就是HTML模板。

具体实现代码如下:

<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>

<div id="container"></div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
    <h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
    // 3.告诉模板引擎将那个数据和哪个模板进行拼接
    // 1) 模板id 2)数据 对象类型
    // 方法的返回值就是拼接好的html字符串
    var html = template('tpl', {username: 'zhangsan', age: 30});
    document.getElementById('container').innerHTML = html;
</script>

注意:引入模板引擎的路径是绝对路径,因为路径是相对于浏览器而言的,所以必须要写绝对路径,‘/’代表根目录。

例如上面的例子中,template-web.js文件放在静态资源文件public下的js文件夹中,而public设为静态资源文件的根目录,所以引入的路径就为:"/js/template-web.js"

posted @ 2020-06-06 16:18  浮华夕颜  Views(214)  Comments(0Edit  收藏  举报