一、背景

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

二、artTemplate之tmod

用了一年的tmod，现在停止维护了，就不多说了。但是还可以用，可参阅资料：

artTemplete
tmod

三、当下可选择的模板工具

目前，博主使用较多的模板是handlebar。这个模板语法比较全，也支持主流工具webpack，具有相应的loader，与es6搭档起来也很完美。

具体参见另一篇文章handlebar初学笔记

❤️❤️❤️❤️❤️❤️❤️❤️❤️ 如果对您有用，一分一块都是爱 ❤️❤️❤️❤️❤️❤️❤️❤️❤️

前端模板template相关推荐

html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
前端模板引擎template之如何实现if-else、遍历
1.先来了解一下template模板 <!doctype html> <html lang="en"> <head><meta chars ...
Vue2 模板template的四种写法总结
下面小编就为大家分享一篇Vue2 模板template的四种写法总结,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 如下所示: <div ...
一个对前端模板技术的全面总结
此文的写作耗时很长,称之为雄文不为过,小心慢用此文缘由其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面  就是给 ...
大前端之前后分离02】前端模板嵌套问题
顾接上文:[大前端之前后分离01]JS前端渲染VS服务器端渲染,我们探讨了为什么要做前后分离,以及前端渲染需要解决的问题,最后提出了自己的解决方案: 前端代码编译形成两套代码:①前端发布版本 + ② ...
前端模板技术的全面总结
此文缘由其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面  就是给我这个画面突然发现取名字真是个大学问,当时就基 ...
世界上最好用的纯前端模板【没有之一】，AceTemplate高调亮相。
http://code.google.com/p/ace-engine/wiki/AceTemplate 概述随着Ajax技术的普及,纯前端模板的使用频率越来越高.我们需要一个易学.易用.高性能的模 ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
免费html模板bootstrap,20 款超棒免费的 Bootstrap 管理和前端模板
1. SB Admin 2 2. Admin Lite 3. Director Responsive Admin Template Free 4. Free Bootstrap Admin Templ ...

前端模板template