zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    js事件分类
    过3s弹出广告条,点叉号关闭
    js进阶
    js入门
    html
    R Markdown + Infinite Moon Reader + 编辑实时更新
    png转ico+windows图标+GIMP
    微生物+计算细胞倍增时间
    使用Mathjax网页插入公式
    Firefox+zoom+全局缩放比例
  • 原文地址:https://www.cnblogs.com/jyjin/p/4934189.html
Copyright © 2011-2022 走看看