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

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 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. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  2. JavaScript自定义媒体播放器

    使用<audio>和<video>元素的play()和pause()方法,可以手工控制媒体文件的播放.组合使用属性.事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的 ...

  3. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  4. 【JavaScript】javascript中伪协议(javascript:)使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...

  5. 2016/12/30_Python

    今天主要学习内容: Python: 1.字典的使用 1)怎么创建字典 dicts = {"name":"juncx","age":17} d ...

  6. Android中Activity处理返回结果的实现方式

    大家在网上购物时都有这样一个体验,在确认订单选择收货人以及地址时,会跳转页面到我们存入网站内的所有收货信息(包含收货地址,收货人)的界面供我们选择,一旦我们点击其中某一条信息,则会自动跳转到订单提交界 ...

  7. Atitit 管理原理与实践attilax总结

    Atitit 管理原理与实践attilax总结 1. 管理学分类1 2. 我要学的管理学科2 3. 管理学原理2 4. 管理心理学2 5. 现代管理理论与方法2 6. <领导科学与艺术4 7. ...

  8. Web应用之LAMP源码环境部署

    一.LAMP环境的介绍 1.LAMP环境的重要性 思索许久,最终还是决定写一篇详细的LAMP的源码编译安装的实验文档,一来是为了给自己一个交代,把技术进行系统的归纳,将技术以极致的形式呈现出来,做为一 ...

  9. javaMail

    JavaMail概述:        JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. javaMai ...

  10. [转]ThinkPHP中实例化对象M()和D()的区别，select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...