之前看了一篇文章《我们为什么要尝试前后端分离》，深有同感，并有了下面的评论：

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 views，有时候还会在这些 view 中写一些 c# 代码，突然有一天前端页面的样式出错了，但前端那里并没有问题，然后后端把前端叫过来，说你在我这里调吧，因为你没有后端的调试环境，然后前端就会很不爽，然后。。。你懂的！

其实理想的情况，就像你说的那样，前端写好页面，关于动态数据都用 ajax 的方式进行加载，这些动态数据在前端那里先 mock 出来，但数据的格式要有一定的规范，前端弄好这些之后，后端不能去修改这些页面，而是给前端一些数据接口，前端直接把接口替换掉 mock 就行了，如果页面出了问题，前端直接修复就行了，各司其职的工作效率会非常高。

总的来说，就是前端和后端要有一定的规范和接口，彼此不干预对方的工作内容（比如后端在前端写好的页面里面写后端代码）。

今天偶然发现了一个 jQuery 插件，可以部分解决上面的问题，就是 jQuery.template.js，我们首先定义好 html 模版，然后使用这个插件在对应的模版中填充数据。

简单示例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

	<meta charset="utf-8" />

    <script src="jquery.js"></script>

    <script src="jquery.tmpl.js"></script>

</head>

<body>

    <div id="div_template1"></div><br />

    <ul id="div_template2">

    </ul>

    <script id="template1" type="text/x-jquery-tmpl">

        <a href="${Link}" target="_blank">${Text}</a>

    </script>

    <script id="template2" type="text/x-jquery-tmpl">

        <li>${ID}.<span>${Name}</span></li>

    </script>

    <script type="text/javascript">

        $(function () {

            var link = { Text: '蟋蟀', Link: 'http://www.cnblogs.com/xishuai/' };

            var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }];

            $('#template1').tmpl(link).appendTo('#div_template1');

            $('#template2').tmpl(users).appendTo('#div_template2');

        });

    </script>

</body>

</html>

生成的 html 代码：

<div id="div_template1"><a href="http://www.cnblogs.com/xishuai/" target="_blank">蟋蟀</a></div><br>

<ul id="div_template2">

    <li>1.<span>xishuai1</span></li>

    <li>2.<span>xishuai2</span></li>

</ul>

会根据 json 数据的类型，进行单个显示还是循环显示，当然，也可以在 ajax 请求数据之后进行操作：

$.get("url", function (data) {

    $('#template1').tmpl(data).appendTo('#div_template1');

});

当然，jQuery.template.js 的功能不仅如此，具体参考：

jQuery.template.js 简单使用的更多相关文章

  1. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. template.js简单入门

    template.js是一款开源的JavaScript模板引擎,用来渲染页面的. github地址 https://github.com/yanhaijing/template.js 下载templa ...

  3. jquery.base64.js简单使用

    jquery.base64.js, 加密,使用,先引入jquery,然后引入jquery.base64.js 使用如下 js中加密如下 $.base64.encode(result[i].ipadre ...

  4. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  5. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  6. Jquery与js简单对比

    //Javascript window.onload=function () { var oBtn=document.getElementById('btn1'); oBtn.onclick=func ...

  7. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  8. jquery.session.js使用

    // jquery.session.js 简单使用方法 添加数据    $.session.set('key', 'value') 删除数据    $.session.remove('key'); 获 ...

  9. jquery.cycle.js

    jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...

随机推荐

  1. 菜鸟学Struts2——Actions

    在对Struts2的工作原理学习之后,对Struts2的Action进行学习.主要对Struts2文档Guides中的Action分支进行学习,如下图: 1.Model Driven(模型驱动) St ...

  2. C# - 值类型、引用类型&走出误区，容易错误的说法

    1. 值类型与引用类型小总结 1)对于引用类型的表达式(如一个变量),它的值是一个引用,而非对象. 2)引用就像URL,是允许你访问真实信息的一小片数据. 3)对于值类型的表达式,它的值是实际的数据. ...

  3. 游戏服务器菜鸟之C#初探一游戏服务

    本人80后程序猿一枚,原来搞过C++/Java/C#,因为工作原因最后选择一直从事C#开发,因为读书时候对游戏一直比较感兴趣,机缘巧合公司做一个手游的项目,我就开始游戏服务器的折腾之旅. 游戏的构架是 ...

  4. PHP与JAVA构造函数的区别

    早期的PHP是没有面向对象功能的,但是随着PHP发展,从PHP4开始,也加入了面向对象.PHP的面向对象语法是从JAVA演化而来,很多地方类似,但是又发展出自己的特色.以构造函数来说,PHP4中与类同 ...

  5. jquery.cookie的使用

    今天想到了要为自己的影像日记增加赞的功能,并且需要用到cookie. 记得原生的js操作cookie也不是很麻烦的,但似乎jquery更简单,不过相比原生js,需要额外引入2个文件,似乎又不是很好,但 ...

  6. .NET中AOP方便之神SheepAspect

    SheepAspect 简介以及代码示列: SheepAspect是一个AOP框架为.NET平台,深受AspectJ.它静织目标组件作为一个编译后的任务(编译时把AOP代码植入). 多有特性时,可根据 ...

  7. 内存映射文件MemoryMappedFile使用

    参考资料: http://blog.csdn.net/bitfan/article/details/4438458 所谓内存映射文件,其实就是在内存中开辟出一块存放数据的专用区域,这区域往往与硬盘上特 ...

  8. PAT练习题目录

    点题号就能查看题解了,另外代码也放在了开源中国码云上: 甲级:代码集合:https://git.oschina.net/firstmiki/PAT-Advanced-Level-Practise 10 ...

  9. 浅谈JSP中include指令与include动作标识的区别

    JSP中主要包含三大指令,分别是page,include,taglib.本篇主要提及include指令. include指令使用格式:<%@ include file="文件的绝对路径 ...

  10. [Hadoop in Action] 第6章 编程实践

    Hadoop程序开发的独门绝技 在本地,伪分布和全分布模式下调试程序 程序输出的完整性检查和回归测试 日志和监控 性能调优   1.开发MapReduce程序   [本地模式]        本地模式 ...