10 个强大的JavaScript / jQuery 模板引擎推荐

深碍√TFBOYSˉ_ 2022-09-17 12:23 313阅读 0赞

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档。由于在开发过程中，网站或应用程序的界面与数据实现分离，大大提升了开发效率，良好的设计也使得代码重用变得更加容易。  
  
本文整理了10 款基于JavaScript和jQuery的模板引擎，希望能对你的开发工作带来一些帮助。   
  
1. NANO    
  
最简单的jQuery模板引擎，完美实现对JSON的解析。

![afbbf0fe-222d-32da-b8ca-ac05ccee4f41.jpg][]

[源码 / 演示][Link 1]    
  
2. The “template” binding    
  
该工具通过渲染模板将相关联的DOM元素组织到一起。

![ddfb60fe-f1bc-3442-bd47-70861ad0565f.jpg][]

[源码][Link 2]  /  [演示][Link 3]    
  
3. JsViews    
  
下一代的jQuery模板，交互式数据驱动视图，建立在JsRender模板的基础上。

![5bb8f9f8-7430-3452-af5d-4496302354e3.jpg][]

[源码][Link 4]  /  [演示][Link 5]    
  
4. JsRender    
  
针对高性能和纯字符串渲染进行了优化，无需依赖DOM和jQuery。

![ea8605d6-e2ef-3520-bf25-a71b7e58d254.jpg][]

[源码][Link 6]  /  [演示][Link 7]    
  
5. google-jstemplate    
  
针对Ajax Web应用程序的简单、强健的浏览器端模板处理工具。

![6d46dec5-6e18-3558-af93-2838606a8b12.jpg][]

[源码][Link 8]  /  [演示][Link 9]    
  
6. The jQuery Templates Plugin    
  
一个jQuery模板插件，该插件的开发工作目前处于停滞状态。

![9f247847-fbcd-3636-ac75-bb5528c0ac01.jpg][]

[源码][Link 10]  /  [演示][Link 11]    
  
7. jQote2    
  
这是jQote的第2个版本，是基于jQuery的最强大、通用的客户端模板引擎。

![f8a8e8a7-2643-3c7f-860f-8f7aafaf07fc.jpg][]

[源码 / 演示][Link 12]    
  
8. kite    
  
这是一个基于JavaScript的模板引擎。

![2fff7656-0584-3dca-94ad-4fb0cad2949d.jpg][]

[源码 / 演示][Link 13]    
  
9. mustache.js    
  
基于JavaScript的Logic-less（无逻辑或轻逻辑）模板。

![5ffe02b4-b3a7-3773-94c6-41b429b7874a.jpg][]

[源码 / 演示][Link 14]    
  
10. Tempo 1.7    
  
Tempo是一个微型JSON渲染引擎，允许你使用纯HTML制作数据模板。

![dcf1f9b1-ebf9-3a15-b761-15b9835490e5.jpg][]

[源码][Link 15]  /  [演示][Link 16]    
  
英文原文： [10 JavaScript and jQuery Templates Engines][]

[afbbf0fe-222d-32da-b8ca-ac05ccee4f41.jpg]: /images/20220828/43b47e194ae24c67b5ca4342d988374e.png
[Link 1]: https://github.com/trix/nano
[ddfb60fe-f1bc-3442-bd47-70861ad0565f.jpg]: /images/20220828/2feb286f12424fd6b3dfeca1b271d848.png
[Link 2]: http://knockoutjs.com/documentation/template-binding.html
[Link 3]: http://knockoutjs.com/examples/helloWorld.html
[5bb8f9f8-7430-3452-af5d-4496302354e3.jpg]: /images/20220828/62a6a0204c0c482196a3c329e9a4ec17.png
[Link 4]: https://github.com/BorisMoore/jsviews
[Link 5]: http://borismoore.github.com/jsviews/demos/index.html
[ea8605d6-e2ef-3520-bf25-a71b7e58d254.jpg]: /images/20220828/5bdbf07953f1451a95ddea457e3e3159.png
[Link 6]: https://github.com/BorisMoore/jsrender
[Link 7]: http://borismoore.github.com/jsrender/demos/index.html
[6d46dec5-6e18-3558-af93-2838606a8b12.jpg]: /images/20220828/5582f10e984f4857980291430e77551a.png
[Link 8]: http://code.google.com/p/google-jstemplate/
[Link 9]: http://google-jstemplate.googlecode.com/svn/trunk/jstemplate_example.html
[9f247847-fbcd-3636-ac75-bb5528c0ac01.jpg]: /images/20220828/c53f44adf9c9448e8417fa906dbe7a29.png
[Link 10]: https://github.com/jquery/jquery-tmpl
[Link 11]: https://github.com/jquery/jquery-tmpl/tree/master/demos
[f8a8e8a7-2643-3c7f-860f-8f7aafaf07fc.jpg]: /images/20220828/ad43218ec3284ae69ae717c2e80c911b.png
[Link 12]: http://aefxx.com/jquery-plugins/jqote2/
[2fff7656-0584-3dca-94ad-4fb0cad2949d.jpg]: /images/20220828/cab962f6be7a4168aa6967846dd95025.png
[Link 13]: http://code.google.com/p/kite/
[5ffe02b4-b3a7-3773-94c6-41b429b7874a.jpg]: /images/20220828/d6ac2ffb5cbd4689850fc17812fe451d.png
[Link 14]: https://github.com/janl/mustache.js#readme
[dcf1f9b1-ebf9-3a15-b761-15b9835490e5.jpg]: /images/20220828/0461f9b44a1344eeb8d294b0eded438d.png
[Link 15]: http://twigkit.github.com/tempo/
[Link 16]: https://github.com/twigkit/tempo/tree/master/examples
[10 JavaScript and jQuery Templates Engines]: http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/