当前位置：首页 > 资讯 > 技术文档

常用的JavaScript模板引擎介绍

时间：2020-11-17 10:28 编辑：来源：阅读：
扫一扫，手机访问

摘要：常用的JavaScript模板引擎介绍

最近工作内容慢慢接近我的理想化（web前端），所以关注比较多的是前端性能！后台同事介绍使用ajax模板引擎，提高渲染速度！ [b]下面介绍几款 JavaScript 模板引擎[/b] 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。 4. dom.js dom.js 是一款可用在客户端和服务器端的 JavaScript 模板引擎 5. jade Jade是受Haml的影响以JavaScript实现用于node的高性能模板引擎。 6. Hogan.js 来自 Twitter 的 JavaScript 模板引擎。 7. Handlebars Handlebars 是一个 JavaScript 的页面模板库 8. artTemplate artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题。独有模板编译工具，它能把前端模板编译成不依赖模板引擎运行的JS文件，让前端模板可以突破浏览器的限制，实现像后端模板一样按文件与目录的方式组织、按需加载、include嵌套等。这一切都在 2kb(gzip) 中实现！也许你会觉得这个插件名似曾相识，没错！这个也是artDialog的作者糖饼博客地址：http://www.planeart.cn/ [b]引用引擎[/b]

[u]复制代码[/u] 代码如下:

[b]编写模板[/b]

[u]复制代码[/u] 代码如下:

<script id="test" type="text/html">

//使用一个type="text/html"的script标签存放模板：

<h1><%=title%></h1>

<ul>

  <%

    for(i=0;i<list.length;i++){%>

      <li>itemL <%=i+1%>:<%=list[i]%></li>

    <%}%>

</ul>

//模板逻辑语法开始与结束的界定符号为<% 与%>，若<%后面紧跟=号则输出变量内容

</script>

[b]渲染模板[/b]

[u]复制代码[/u] 代码如下:

var data = {

    title: '标签',

    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html=template.render("test",data);

document.getElementById('content').innerHTML = html;

全部评论(0)

上一篇：jquery插件NProgress.js制作网页加载进度条
下一篇：javascript获取checkbox复选框获取选中的选项

资讯排行榜
更多>>