JS模板引擎：ArtTemplate

最新推荐文章于 2021-06-09 20:43:19 发布

zdy0_2004

最新推荐文章于 2021-06-09 20:43:19 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript 模板引擎

javascript 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍了如何实现一个简易的JS模板引擎，包括模板的定义、数据的注入、结果的生成等关键步骤，同时提供了核心代码实现及解析细节，帮助开发者理解模板引擎的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS模板引擎：ArtTemplate

http://www.cnblogs.com/chen4342024/p/4916070.html

上一篇初略的介绍了一下javascript中的模板引擎，有兴趣的可以戳这里。

这一篇将带着大家一起做一个简易的模板引擎，

上一篇介绍到：模板引擎其实做的就是两件事。

根据一定的规则，解析我们所定义的模板
根据数据以及模板生成html（其实背后也是用的字符串拼接）

那么，首先，我们要有一个模板，一份数据，以及想生成的结果。

例如：模板：

     
    
<script id="test" type="text/html">
   <p><%=title%></p>
   <p><%=msg%></p>
   <ul>
       <% for (var i = 0; i < list.length; i ++) { %>
       <li><%= list[i] %></li>
       <% } %>
   </ul>
</script>
     
    

数据：

     
    
<script>
    var data = {
        title: '基本例子',
        msg: "这是一个例子",
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
</script>
     
    

结果：

现在，我们就来实现上面这个例子。

首先，我们需要定义我们的template方法。

     
    var template = function (templateName, data) {
        return renderFile(templateName, data);
    };

    var renderFile = function (templateName, data) {
        var render = template.get(templateName);
        return render(data);
    };

然后，获取我们缓存的template 的render方法

     
    
template.get = function (templateName) {
        var cache;
        if (defaults.cache && cacheStore[templateName]) {
            cache = cacheStore[templateName];
        } else if (typeof document === 'object') {
            // 加载模板并编译
            var elem = document.getElementById(templateName);
            if (elem) {
                var source = elem.innerHTML;
                cache = compile(source);
                if (templateName && defaults.cache) {
                    cacheStore[templateName] = cache;
                }
            }
        }
        return cache;
 };
     
    

上面的代码，相信大家也都看得懂，主要是对渲染方法进行缓存，以提升效率。接下来是其中最重要的编译方法。

     
    
    var compile = template.compile = function (source, options) {
        var options = extend(options, defaults);
        var render = compiler(source, options);
        return render;
    };

    var compiler = function (source, options) {
        var openTag = options.openTag;
        var closeTag = options.closeTag;
        var cache = options.cache;

        //此处开始解析模板，并生成渲染函数
        var headerCode = "'use strict';" + "\n" + "var ";
        var mainCode = "$out='';";
        var footerCode = "return new String($out);";

        var uniq = {};

        //对模板中html代码的处理
        var html = function (code) {
            if (code) {
                code = "$out+=" + stringify(code) + ";" + "\n";
            }
            return code;
        };

        //对模板中逻辑部分的处理
        var logic = function (code) {
            // 输出语句. 编码: <%=value%> 不编码:<%=#value%>
            if (code.indexOf('=') === 0) {
                code = code.replace(/^=[=#]?|[\s;]*$/g, '');
                code = "$out+=" + code + ";";
            }
            // 提取模板中的变量名
            each(getVariable(code), function (name) {
                // name 值可能为空，在安卓低版本浏览器下
                if (!name || uniq[name]) {
                    return;
                }
                var value;
                // 声明模板变量
                value = "$data." + name;
                headerCode += name + "=" + value + ",";
                uniq[name] = true;

            });
            return code + "\n";
        };

        each(source.split(closeTag), function (code) {
            //此时代码已被截取成两部分，一部分是纯html，
            //一部分是逻辑代码，即是包含在html<%logic%>html里面的部分
            code = code.split(openTag);
            var htmlStr = code[0];

            var logicStr = code[1];

            mainCode += html(htmlStr);

            if (code.length > 1 && logicStr) {

                mainCode += logic(logicStr);
            }
        });




        var code = headerCode + mainCode + footerCode;
        try {
            var Render = new Function("$data", code);
            return Render;

        } catch (e) {
            e.temp = "function anonymous($data) {" + code + "}";
            throw e;
        }


    };
     
    

这个方法，便是将模板引擎中的内容解析，并生成渲染方法。

生成之后的渲染方法大概是下面这个样子。

 
   View Code

模板引擎的解析细节：

大家知道，想生成上面的方法，无非就是通过evel 或者Funciton 之类的方法，将一个字符串生成成一个function。

这里采用的是 var Render = new Function("$data", code);来生成渲染方法。其中$data为参数，code为字符串。 Function方法的具体使用可以参考官方文档点我

那么，我们想要生成这个Render方法，最重要的事便是拼接 code 了。

拼接code时，headerCode 和 footerCode 是不变的，对任何模板都是一样的。所以重点工作在于中间的mainCode。

这里，mainCode主要分为两部分，一部分是模板中的html部分，一部分是模板中的逻辑部分（也就是包含在<%><%>里面的）

compiler通过分割<%>，将里面的逻辑部分和html部分分离出来，然后再分别处理。

html部分无需特殊处理，只需要拼接进mainCode就可以了。
logic部分，就需要特殊处理了。例如例子中的title，这个值，我们需要判断是变量还是关键字（for if ..，这个稍后会讲如何提取），
如果是变量，就必须先赋值：var title = $data.title，$data即为渲染方法的参数，也就是用户到时候会传进来的。
然后再直接将title追加到 mainCode中去就可以了。

至于logic部分，如何提取变量主要是通过正则表达式来提取。