基于TmodJS的前端模板工程化解决方案

2019年8月31日 231次阅读 来源: zebrayoung

原作者: 唐斌（腾讯）|

TmodJS什么

TmodJS（原名atc）是一个简朴易用的前端模板预编译东西。它经由过程预编译手艺让前端模板打破浏览器限定，完成后端模板一样的同步“文件”加载才能。它采纳目次来构造保护前端模板，从而让前端模板完成工程化治理，终究保证前端模板在庞杂单页 Web 运用下的可保护性。更多内容，可接见：http://code.csdn.net/news/282…。

本文作者为来自腾讯 TmodJS 团队的唐斌，他在本文中为我们剖析了传统前端模板内嵌的弊病，如开辟调试效力低下、自动化构建庞杂度比较高级特性，并针对现在近况给出了较好的处置惩罚计划。下面为作者原文，可供参考。

前端模板

初期，开辟人员都是直接在 JS 文件中采纳最原始的体式格局直接拼接 HTML 字符串：

var html = '';
for (var i = 0, users = data.users; i < users.length; i ++) {
    html += '<li><a href="'
    + users[i].url
    + '">'
    + users[i].name
    + '</a></li>';
}

这类体式格局刚最先在一两个简朴的页面中照样比较天真的，但弊病也异常显著：UI 与逻辑代码混淆在一起，浏览起来会异常费劲。一旦跟着营业庞杂起来，或许多人保护的情况下，险些会失控。

　　受 jQuery 作者的 tmpl 模板引擎影响，从 09 年最先到现在，前端模板引擎涌现了百花齐放的局势，涌现出一大批行色各别的引擎，险些每一个前端工程中都运用了模板引擎。一条前端模板相似如许：

<script id="user_tmpl" type="text/html">
{{each users as value}}
    <li>
        <a href="{{value.url}}">{{value.name}}</a>
    </li>
{{/each}}
</script>

它运用一个特别的 <script type=”text/html”></script> 标签来寄存模板（由于浏览器不支撑这类范例的声明，它寄存的代码不会看成 JS 运转，代码也不会被显示出来）。运用模板引擎衬着模板的示例：

var html = tmpl('user_tmpl', data);
document.getElementById('content').innerHTML = html;

在线示例

http://aui.github.io/artTempl…

经由过程前端模板引擎将 UI 星散后，模板的誊写与修正就变得简朴多了，也提升了可保护性。然则，跟着这类体式格局规模化后其弊病也随之而来。

模板内嵌的弊病

模板内嵌，重要存在 3 个方面的题目，重要包含：

  • 开辟调试效力低

每次修正前端模板须要修改页面的代码，假如不是纯静态页面，没法运用相似 fiddler 的东西将页面映射到当地举行开辟，开辟调试依靠只能服务端环境，效力低下。

  • 自动化构建

在当代 Web 前端工程体系中，险些每一个环节都具有响应的优化东西，这些险些都被 Grunt 这个自动构建东西连接起来。然则前端模板若内嵌到页面中，庞杂度会比较高，现有东西由于受限难以举行自动优化。

  • 模块化

前端模板集合在一个文件中这必定会引起多人合作的题目，跟着项目庞杂度增添，按文件模块化燃眉之急。

现有的模板外置处置惩罚计划与好坏剖析

　　现在越来越多的项目已将模板从页面中迁徙出来，重要有两种体式格局：

  • Ajax 拉取计划

经由过程 Ajax 加载长途模板，然后再运用模板引擎剖析。这类体式格局的优点就是模板能够按文件寄存，誊写起来也是异常轻易，但弊病相称显著：由于浏览器同源战略限定的，致使模板没法布置到 CDN 收集中。

  • 在 JS 文件中寄存模板

为防止上述加载模板计划没法跨域的致命缺点，模板寄存在 JS 文件中又成了最好实践体式格局，然则这类情况下须要对回车符举行转义，对誊写不友好，严峻影响开辟效力。比方：

var user_tmpl =
'{{each users as value}}\
    <li>\
        <a href="{{value.url}}">{{value.name}}</a>\
    </li>\
{{/each}}';

或许：

var user_tmpl =
 '{{each users as value}}'
+   '<li>'
+       '<a href="{{value.url}}">{{value.name}}</a>'
+   '</li>'
+'{{/each}}';

现有模板构造计划好坏，如下表对照：

构造体式格局 | 开辟效力 | 优化空间 |当地调试 | 代码复用 | 团队合作

内嵌营业页中 | ✓ | ✗ | ✗ | ✗ | ✗
Ajax 长途加载| ✓ | ✗ | ✓ | ✓ | ✓
嵌入 js 文件 | ✗ | ✓ | ✓ | ✓ | ✓

总结：
•轻易优化的情势不利于开辟；
•利于开辟的情势不利于优化。

抱负情势

看下服务端模板是怎样做的：

  • 模板按文件与目次构造模板

template('tpl/home/main', data)

  • 模板运用 include 语句完成复用

{{include '../public/header'}}

　　这一切看起来很美，前端是不是也能够采纳如许的情势？然则实际通知我们，这是一个困难的使命。

实际困难

  • 浏览器对文本加载会有跨域限定

  • 浏览器同步加载会引起界面卡顿

  • 加载大批的模板文件会带来 http 资本斲丧题目

处置惩罚计划

为了完成上述“抱负情势”，我们推出了 TmodJS——模板预编译器。

TmodJS 采纳三种计划来处置惩罚困难：

  • 当地构建

模板编写完成后，经由过程一个当地东西将模板编译成浏览器可执行的代码——JS，如许就能够用剧本的体式格局来加载模板，没必要受浏览器的同源战略限定，模板能够布置到恣意 CDN，而无需处置惩罚跨域题目。

东西内部采纳模板引擎—— artTemplate完成模板编译，输出 JS 文件。artTemplate 也是来自腾讯的开源项目，它支撑预编译，编译后的代码能够无需引擎运转。

  • 种子文件

为了完成 template(path, data) 这类同步接口，TmodJS 会不停的更新一个名为 template.js 的种子文件，这个文件兼并了公用要领与编译后的模板，项目只须要援用这个文件就能够按途径同步的体式格局挪用模板。比方：

var tpl = template('home/index');
var html = tpl(data);
document.getElementById('content').innerHTML = html;

  • 模板目次

为了让团队成员、自动化东西能更好的治理模板，前端模板不再内嵌到页面中，而是运用特地的目次举行构造保护；运用途径作为模板的 ID，如许与源文件坚持对应关联——如许优点就是极大的增添了可保护性。比方：页面头部底部的公用模板能够放在tpl/public目次下，首屏的模板能够放在 tpl/home下面。

模板与工程化

　　TmodJS 采纳了自动编译机制，一经启动后就无需人工干预，每次模板建立与更新都邑自动编译，直到正式上线都无需对代码举行任何修正。完成文件体系的前端模板只是 TmodJS 最基本的使命，它在背地还做了这些优化：

  • 模板紧缩与兼并

TmodJS 编译之前会紧缩掉模板的空缺字符，编译为 JS 后又会举行一次紧缩，此时输出的 JS 以至会比原始模板更小（最高可削减一半的体积）。

在默许设置下，TmodJS 会将模板目次一切模板编译后再举行紧缩与兼并，输出后的 template.js 称之为模板包（内部称号叫 TemplateJS 花样）这类打包的体式格局异常合适挪动端单页 WebApp，输出后的模板包可直接可作为开辟阶段与线上运转的文件，合适中小型项目。

检察编译后的模板示例

  • 依靠治理

固然，将一切前端模板都打包在一个文件中不一定合适每一个项目，由于许多大型项目须要更仔细的优化，将模板编译为 AMD、CMD、CommonJS 范例的的模块是一个不错的挑选，此时模板内部的include 语句会编译成 requier(‘xxx/xxx’) 情势声明依靠，接入对应的 Grunt 插件可自动完成依靠兼并。

  • 当地调试

由于模板已被自力出来，所以运用 fiddler 将线上模板映射到当地举行开辟调试将异常轻易。假如线上模板报错，开启 TmodJS 的 debug 情势后能够直接找到失足的模板途径以及地点行号，比方：

Template Error
<id>
public/header
<name>
Render Error
<message>
Cannot read property '0' of undefined
<line>
5
<source>
{{users[0].name}}

  • 沙箱与扩大

　　许多开辟者习气在模板中接见页面中全局定义的函数，假如模板内嵌到页面中题目好像不大，一旦模板外置后这类隐含的依靠关联将会致使严峻的保护题目，TmodJS 采纳沙箱机制来处置惩罚此题目：限定开辟者接见外部对象，模板用到的一切变量在闭包中被强迫指向模板数据。

　　为了轻易扩大模板的功用，可指定一个外部 JS 作为公用要领（辅佐要领），这个 JS 会被兼并到到 template.js 中。

  • 平安过滤

模板的变量输出默许都邑被过滤函数包裹，在运转时举行过滤，从而防止模板开辟者由于忽视致使站点 XSS 破绽。比方：

模板

<h3>{{title}}</h3>

编译代码

"<h3>" + $escape(title) + "</h3>"

  • 与第三方自动化构建东西合营

　　现在 TmodJS 已有 Grunt 与 Gulp 这两种盛行的自动化构建东西的插件，将来将支撑更多的自动化东西。

  • 前后端模板同享

　　TmodJS 与 artTemplate 模板引擎运用一样的模板语法，而 artTemplate 供应了 NodeJS 版本，能够直接读取 TmodJS 的模板目次，这意味着能够轻松的做到前后端模板同享，手艺计划自在切换。

经由上面的一些优化，我们达到了下面效果：

构造体式格局 | 开辟效力 | 优化空间 | 当地调试 | 代码复用 | 团队合作

TmodJS | ✓ | ✓ | ✓ | ✓ | ✓

参考网址：http://www.lupaworld.com/arti…

    原文作者：zebrayoung
    原文地址: https://segmentfault.com/a/1190000008050044
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞