模板引擎template.js

模板引擎

什么是模板引擎

可以根据程序员指定的模板结构和数据，自动生成一个完整的html即为模板引擎

模板引擎的好处

减少字符串的拼接操作
使代码更加清晰
使代码更易于阅读与维护

art-template

使用步骤

导入 art-template
定义数据
定义模板
调用template函数
渲染html结构

<body><div id="container"></div><script src="./js/template-web.js"></script><!-- 定义模板 --><script type="text/html" id="tpl-user"><h1>{{name}}+{{age}}</h1></script><script>// 定义要渲染的数据var data = {name: 'mod',age: 17};// 调用template函数var htmlStr = template('tpl-user', data);console.log(htmlStr);container.innerHTML = htmlStr;</script>
</body>

标准语法

输出：{{}}语法，在{{}}内可以进行变量输出或循环数组等操作
原文输出：若要输出的value值包含了html标签结构，则需要使用原文输出语法{{@value}}
条件输出：如果要实现条件输出，可以在{{}}中使用if else if /if的方式
```
 {{if value}}输出{{else if newValue}输出new{{/if}}
```
循环输出：在{{}}内通过each语法循环数组，当前循环的索引使用$index进行访问，循环项使用$value进行访问
```
{{each arr}}{{$index}} {{$value}}
{{/each}}
```
过滤器：{{value | filterName}}，过滤器语法类似管道操作符，它的上一个输出作为下一个输入；
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){//return ...}

封装一个简单的template函数

function template(id, data){var str = document.getElementById(id).innerHTML;var pattern = /{{\s*([a-zA-Z]+)\s*}}/;var result = null;while(result = pattern.exec(str)){str = str.replace(result[0], data[result[1]])}return str;
}

模板引擎template.js相关推荐

js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...
JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...
express应用中ajax结合模板引擎ejs.js渲染页面
一.express应用中ajax结合模板引擎ejs.js渲染页面在views新建一个渲染模板命名 Template.ejs Template.ejs 示例: <% if(coursesList ...
前端模板引擎template之如何实现if-else、遍历
1.先来了解一下template模板 <!doctype html> <html lang="en"> <head><meta chars ...
关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
模板引擎---template的简单使用
(1)art-template的实现步骤 (1)导入template(2)定义数据(3)定义模板(4)调用template(5)渲染HTML结构 (2)模板引擎的语法 template('模板的Id' ...

模板引擎template.js

模板引擎

什么是模板引擎

模板引擎的好处

art-template

使用步骤

标准语法

封装一个简单的template函数

模板引擎template.js相关推荐

最新文章

热门文章