美文网首页
模板引擎

模板引擎

作者: 浮若年华_7a56 | 来源:发表于2022-07-08 11:32 被阅读0次

模板引擎就是基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎:

function htmlcontent (data) {
  return `${data.name}同学一年级期末考试语文${data.chinese}分,数学${data.math}分,位于年级第${data.ranking}名。`
}

1.Nunjucks

Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎,既可以用在Node环境下,又可以运行在浏览器端。但是,主要还是运行在Node环境下,因为浏览器端有更好的模板解决方案,例如MVVM框架。

如果你使用过Python的模板引擎jinja2,那么使用Nunjucks就非常简单,两者的语法几乎是一模一样的,因为Nunjucks就是用JavaScript重新实现了jinjia2。

百度JS模板引擎 baiduTemplate

引入文件:
baiduTemplate使用仅需引入baiduTemplate.js文件,未压缩是考虑大家调错阅读等方便,上线前请自行压缩代码。

<script type="text/javascript" src="./baiduTemplate.js"></script>

如果在nodejs环境中使用,可以通过npm包管理安装
//注意:名称全部小写

npm install baidutemplate

放置模板片段:
页面中,模板块可以放在 <script> 中,设置type属性为text/template或text/html,用id标识,如:

<script id='test1' type="text/template">
<!-- 模板部分 -->

<!-- 模板结束 -->   
</script>

或者存放在 <textarea> 中,一般情况设置其CSS样式display:none来隐藏掉textarea,同样用id标识,如:

<textarea id='test2' style='display:none;'>
<!-- 模板部分 -->

<!-- 模板结束 -->   
</textarea>

模板也可以直接存储在一个变量中

var tpl = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";

方法一:tpl是传入的模板(String类型),可以是模板的id,可以是一个模板片段字符串,传入模板和对应数据返回对应的HTML片段
//方法一:直接传入data,返回编译后的HTML片段
var html0 = baidu.template(tpl,data);

//或直接传入id即可
var html0 = baidu.template('test1',data);
方法二:或者可以只传入tpl,这时返回的是一个编译后的函数,可以把这个函数缓存下来,传入不同的data就可以生成不同的HTML片段
//方法二:先不传入data,返回编译后的函数
var fun = baidu.template(tpl);
//或直接传入id即可
var fun = baidu.template('test1');

//之后通过改变数据,调用缓存下来的函数,产生不同的HTML片段
var html1 = fun(data1);
var html2 = fun(data2);
(4)、最后将他们插入到一个容器中即可
document.getElementById('result0').innerHTML=html0;
document.getElementById('result1').innerHTML=html1;
document.getElementById('result2').innerHTML=html2;

3、模板基本语法(默认分隔符为<% %>,也可以自定

相关文章

  • laravel 5 blade

    参考Blade 模板引擎。Blade是一个模板引擎(什么叫模板引擎,参考浅谈模板引擎),文件需要采用blade.p...

  • SpringBoot系列之集成jsp模板引擎

    SpringBoot系列之集成jsp模板引擎@[toc] 1、模板引擎简介 引用百度百科的模板引擎解释: 模板引擎...

  • node_模板引擎

    模板引擎 模板引擎的使用和集成,也就是视图。 什么是模板引擎模板引擎是一个页面模板根据一定得规则生成的html工具...

  • art-template模板引擎

    模板引擎 什么是模板引擎: 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产...

  • Lua admin后台开发 (6) 模板引擎的使用

    上一章节我们初步了解了如何使用模板引擎, 现在我们深入了解模板引擎. 什么是模板引擎 "模板引擎(这里指Web开发...

  • Ajax-02

    模板引擎 模板引擎概述 作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。官方地址: https...

  • 《PHP Learning》模板引擎

    《PHP Learning》模板引擎 模板处理使用正则处理模板替换规则保存模板编译结果 模板使用 自定义模板引擎 ...

  • 模板引擎原理

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • 无标题文章

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • Express入门_模板引擎hbs(三)

    Express支持多种模板引擎,这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 。安装hbs...

网友评论

      本文标题:模板引擎

      本文链接:https://www.haomeiwen.com/subject/vubcbrtx.html