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

時間有限，明日再來...