artTemplate 自动化编译之tmod

一、背景

　　前端小白的成长历程，一般都会经历html模板的一些问题,jquery template/artTemplate/yayaTemplate等常见的模板使用，这里就不作介绍了。

先谈谈我们为什么要使用模板？

　　当一个html页面有许多重复，累赘，或者有逻辑，有律可循的时候我们常常会选择一款模板工具，来帮助我们开发。既提升了开发效率，也可以帮我们组织代码可阅读性，这是优点，或许也是我们选择它的理由。

当然它也有不可避免的缺点，譬如：

　　1.怎么优化SEO？（这个问题不是今天所讨论的内容，暂不讨论，有兴趣的可以留言共同探讨）

　　2.怎么集中管理？

　　怎么集中管理？这是啥意思！相信大家的模板都是这么使用的：

　

html:
       <div id="content1"></div>
       <div id="content2"></div>
       <div id="content3"></div>
       ...

       <script id="XXXtmpl1" type="text/XXXtempate">
                //模板代码1
        </script>

       <script id="XXXtmpl2" type="text/XXXtempate">
                //模板代码2
        </script>

        <script id="XXXtmpl3" type="text/XXXtempate">
                //模板代码3
        </script>
        ...

javascirpt:

      $('#content1').html($("#XXXtmpl").template);
      $('#content1').html($("#XXXtmpl").template);
      $('#content1').html($("#XXXtmpl").template);
      ...
　　　　//这里的代码只是说明这样个意思，不用介意它的语法，各个模板大同小异

　　好了，给了上面的伪代码，是不是觉得你还在遵循这样一种方式，去书写你的代码？当然，这样的代码是正确的，没有什么大问题。但是在前端自动化，或者前端模块化风靡的现在，上面的代码或许有点low了。

1.导致每个页面都有模板客户端解析，性能或多或少有一定的问题；

　　2.每个html页面都很多的模板，管理麻烦，可读性差；

　　 所以.......你想到了什么？

　　 把模板代码都存放到一个文件？或者每个都是单独的文件？Bingo！！！

在之前一个backbone+Marionette+typescript的项目中，框架不是我搭的。（相信你看到这个框架你就知道是个搞过C#的攻城狮搭的，因为活生生把弱类型灵活的javascript，变成了用ts管理的强类型的语言；当然，

并不是说ts不好，通过ts管理的前端工程，维护起来不管封装还是复用还是挺方便的（其实我并不觉得简单，呵呵），题外话啦）这个项目的模板用的dust模板，可能有开发者接触过，这个模板的原理，简单说起来就是：将

模板文件单独存放在一个模板目录，发布的时候通过模板引擎（node或者其他手段）编译到一个js文件，然后只要页面引用这个编译后的文件即可得到相应模板

可是......我们今天讲的也不是dust模板！（博主话唠，不要计较）

之前尝试过自己用node程序去编译jqueryTemplate的模板，当然，我所说的模板也是单独管理，而且我选的模板也就是html格式，因为这样可以用一些编辑器的Emmet语法敲起来快。这时就要自己用node去对模板的html文件打包，然后还要解析，虽然成功了，可是很麻烦，性能也不好；之所以选择jqueryTemplate是因为博主真心觉得它很方便，支持各种嵌套、各种逻辑、各种自定义js回调反正能满足你各种变态需求；但是后来发现一个现成的模板打包工具，是腾讯针对artTemplate的，也就是tmod（这里是今天的

正题了），最可惜的是没找到相关对jqueryTemplate打包编译的工具，所以开发还是遇到了一点限制。

二、artTemplate

　　时间有限，明日再来...