一、背景

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

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

当一个html页面有许多重复功能、累赘功能、有逻辑功能，但这些功能都有律可循。这个时候，我们常常会选择一款模板工具，来帮助我们开发。既提升了开发效率，也可以帮我们提升代码阅读性。

这是优点，或许也是我们选择它的理由。当然它也有不可避免的缺点，譬如：

1.怎么集中管理？
2.怎么优化SEO?

1.怎么集中管理？

这是啥意思呢！相信大家的模板都是这么使用的：
　
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[正解]！！！

1.dust模板

之前参与过一个backbone+Marionette+typescript的项目。相信你看到这个框架，就猜到这是个搞过C#的后台攻城狮搭的。因为活生生把弱类型灵活的javascript，变成了用ts的强类型的语言。当然，并不是说typescript不好，通过ts管理的前端工程，维护起来不论抽象还是复用确实非常方便（其实我并不觉得简单，只能呵呵了…）。就像现在es6很风靡一下，引入了一些继承，类型的概念。

言归正传，这个项目用的是dust模板，可能有开发者接触过，这个模板，提供了node模块打包的功能，简单说就是：

 - 开发的时候，将模板文件统一管理存放在一个模板目录。- 发布的时候，通过模板引擎（node或者其他手段）自行编译到相应的js文件。

这样，你要做的，只需考虑哪些模板应该存放到那个文件，然后相应的页面去引用这个编译后的模板文件即可！

2.尝试改造jqueryTemplete自编译

之前尝试过自己用node程序去编译jqueryTemplate的模板。当然，我所说的模板也是打包管理，而且我选的模板格式就为html。因为这样的格式，可以用一些编辑器的Emmet语法，写起来效率很高。

这时就要自己用node去对模板的html文件打包，然后还要解析，虽然成功了，可是很麻烦，性能也不好。

之所以选择jqueryTemplate是因为博主真心对它爱不释手，支持各种嵌套、各种逻辑、各种自定义js回调。总言之，能满足你各种变态需求。但是后来意外发现，一个现成的模板打包工具，是腾讯针对artTemplate的模板工具，也就是tmod。最可惜的是没找到相关对jqueryTemplate打包编译的工具，所以开发还是遇到了一点限制。