javascript模板引擎的概述

一、什么是模板引擎，简单地说，就是一个字符串中有几个变量待定。比如：

var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.';

通过模板引擎函数把数据塞进去，

var data = {
    "name": "Barret Lee",
    "age": "20" }; var result = tplEngine(tpl, data); //Hei, my name is Barret Lee, and I'm 20 years old.

其实它就是一个预处理器（preprocessor）。

JS模板引擎应该做哪些事情？看看下面一串代码：

var tpl = '<% for(var i = 0; i < this.posts.length; i++) {' +　
    'var post = posts[i]; %>' +
    '<% if(!post.expert){ %>' + '<span>post is null</span>' + '<% } else { %>' + '<a href="#"><% post.expert %> at <% post.time %></a>' + '<% } %>' + '<% } %>'; 

一个基本的模板引擎至少可以保证上面的代码可以正常解析。如送入的数据是：

var data = {
    "posts": [{
        "expert": "content 1", "time": "yesterday" },{ "expert": "content 2", "time": "today" },{ "expert": "content 3", "time": "tomorrow" },{ "expert": "", "time": "eee" }] }; 

可以输出：

<a href="#">content 1 at yesterday</a> <a href="#">content 2 at today</a> <a href="#">content 3 at tomorrow</a> <span>post is null</span>

 

转载于:https://www.cnblogs.com/jibaoyu/p/4785511.html