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

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

原文地址:https://www.cnblogs.com/jyjin/p/4934189.html