artTemplate 自动化编译之tmod

1、背景

　　前端小白的成长历程，通常都会经历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打包编译的工具，因此开发仍是遇到了一点限制。

 

2、artTemplate

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