artTemplate模板引擎

古城微笑少年丶 2022-09-27 12:27 188阅读 0赞

经常被用到，你还用过哪些模板引擎，个人认为：对于模板引擎，挑一个性能稍高的，使用简单的，容易调试的就可以，一个足以，没有必要使用那么多。作为前端人员，较推崇artTemplate模板引擎。

## 1、artTemplate模板引擎 ##

它是js模板引擎，它采用预编译方式，性能较高。有开发人员在chrom浏览器下进行测试过，当进行10000次渲染时，它的渲染速度是知名的mustache与micro tmpl的25倍和32倍。

![这里写图片描述][SouthEast]

## 2、传统模板实现方式 ##

/*
        (1)with(data){ var num=a} 语句中data是一个对象，a是它的属性
        (2)上述语句中的data变量，需要声明在当前作用域中的，且在with语句之前，否则with中的data访问不到
        //var data ={ a:2} 访问不到 
        (function(){
            var data={ a:1} //能访问到
            with(data){ console.log(a) }
            //var data ={ a:2} 访问不到 
        })();
    */

#### 缺点 ####

性能方面：模板引擎渲染使用Function构造器实现，Function与eval一样，使用文本访问呢javascript解析引擎，但这样执行javascript的性能非常低。  
调试：模板是动态执行字符串，若遇到错误调试器无法捕获错误源。在没有容错的引擎中，局部模板若因为数据异常，严重可导致整个应用奔溃。随着模板增加，维护成本将剧增。

## 3、artTemplate高效原因 ##

（1）预编译  
传统模板引擎每次赋值，需要动态编译字符串完成赋值，而artTemplate的编译赋值过程在渲染之前完成。artTemplate会根据简单的规则提取好所有模板变量，声明在渲染函数头部，如在render渲染函数的头部(函数格式：<类型名><函数名>(\[<参数列表>\])<函数体>，函数体之前的所有部分就是函数头)。类似：  
下面，将要渲染的数据提前声明在$data

var render=function($data){ 
        var content = $data.content,$out='';
        $out+='<h3>';
        if(typeof content === 'string'){
            $out+=content
        }
        $out+='</h3>'
        return $out;
    }

（3）更快的字符串相加方式  
在IE6-8中，’数组push方法拼接字符串’比’字符串+=’快。但是在使用v8引擎的chrome浏览器中，’字符串+=’比’数组push方法拼接字符串’快。而artTemplate根据js引擎特性采用了两种不同的字符串拼接方式。

## 4、artTemplate调试模式原理 ##

前端模板引擎是动态解析的，调试器无法定位到错误行号，而artTemplate通过巧妙的方式让模板调试器可以精确定位到引发渲染错误的模板语句上。一般它有两种错误：  
(1)渲染错误  
渲染错误一般是模板字符串错误或者变量错误引起的，渲染的时候只有遇到错误才会进入调试模式重新编译模板，而不会影响正常的模板执行效率。  
(2)编译错误  
一般是模板语法错误，如语法错误，未知语法，不合格的嵌套等。由于artTempalte没有进行完整的词法分析，所以无法确定错误源所在的位置。然后对错误信息和源码原文输出，开发者根据此判断。

## 5、其他模板引擎 ##

(1)容错性差  
(2)语法不简洁

[SouthEast]: /images/20220708/80d8c01f7b67414c9ef0d852b30b476b.png