模板引擎artTemplate及模板预编译器的知识点有哪些

这篇文章主要讲解了“模板引擎artTemplate及模板预编译器的知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“模板引擎artTemplate及模板预编译器的知识点有哪些”吧！

创新互联公司专注于齐齐哈尔网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供齐齐哈尔营销型网站建设，齐齐哈尔网站制作、齐齐哈尔网页设计、齐齐哈尔网站官网定制、小程序制作服务，打造齐齐哈尔网络公司原创品牌,更为您提供齐齐哈尔网站排名全网营销落地服务。

一、为什么要使用前端模板？

主要为了解决UI层与业务逻辑的纠缠不清。比如我们需要根据后端返回的数据动态生成一个表格或者类似表格的DOM（比如ul > li等）时，按照传统的方式，需要我们先获取数据，然后在页面的js中通过遍历数据、提取相关数值以及动态拼接html字串的方式，生成最终的DOM。这样就产生了UI与业务逻辑的纠缠。如果只是偶尔或者局部使用可能问题不明显，但如果代码量庞大、业务或数据十分复杂的情况下，这种方式产生的代码会十分不利于后期维护，这想必是每一个开发人员都不愿看到的。因此，便产生了前端模板以及对它们进行处理的模板引擎。

二、artTemplate及TmodJS简介

准确的说，artTemplate（后文简称aT）才是模板引擎，而TmodJS（后文简称TJ，曾用名atc）则是依赖于前者的一款模板预编译器。两者都是由腾讯开发。其实aT完全可以独立使用，而TJ存在的意义是提供了一个对模板进行预编译的环境（基于NodeJS和模块化）。有了TJ，aT可以支持按目录的方式存储模板、以include的方式对指定目录中的模板进行调用（注意：这里的include和aT中的include不一样，后者只能引用同一页面中的不同模板标签）、自动监控模板变化与自动编译、依赖管理以及与grunt的结合等，可以说进一步增强了aT的能力。目前，aT与TJ都可以通过npm获取：npm install arttemplate -g/npm install tmodjs -g。

更多详情和DEMO，可以参考：以及

三、aT和TJ的工作流程与差异

两者的工作流程大致可以分为两步：编辑模板和渲染模板。编辑模板就是将需要动态生成的DOM抽象成为模板，渲染则是利用渲染函数，把后端返回的数据填入模板中相应的位置上，生成最终的html串并且回填到html页面的指定位置中。因为TJ采用了模块化加载技术，所以其模板的组织、引用以及渲染要比单纯的aT更为复杂，内部进行的封装处理流程也更多，但其本质上并未发生根本的变化。

因为aT没有使用模块化技术，所以页面内只需要引入aT的引擎文件即可使用。TJ由于使用了模块化技术，故需要引入相应标准的模块化加载器。因为TJ已经将引擎合并在编译后的文件中，故不需要再单独引入引擎文件。注意，若使用TJ，所有模板必须经过tmod命令进行编译后才能正常使用。

也正是因为模块化否的原因，两者的差异还体现在模板的组织形式与编写方式上。aT中，模板都要写在同一个html页面中，但不同模板可以分别写在不同的