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

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 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. [Spring]IoC容器之进击的注解

    先啰嗦两句: 第一次在博客园使用markdown编辑,感觉渲染样式差强人意,还是github的样式比较顺眼. 概述 Spring2.5 引入了注解. 于是,一个问题产生了:使用注解方式注入 JavaB ...

  2. java Web项目创建之一（普通java web项目的创建与发布）

    1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic W ...

  3. ASP.NET Core CORS 简单使用

    CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...

  4. linux应用调试技术之GDB和GDBServer

    1.调试原理 GDB调试是应用程序在开发板上运行,然后在PC机上对开发板上得应用程序进行调试,PC机运行GDB,开发板上运行GDBServer.在应用程序调试的时候,pc机上的gdb向开发板上的GDB ...

  5. Autofac - 属性注入

    属性注入不同于通过构造函数方式传入参数. 这里是通过注入的方式, 在类创建完毕之后, 资源释放之前, 给属性赋值. 这里, 我重新弄一些类来演示这一篇吧. public class ClassA { ...

  6. python 3.5 成功安装 scrapy 的步骤

    http://www.cnblogs.com/hhh5460/p/5814275.html

  7. slf4j中的MDC

    slf4j中MDC是什么鬼 slf4j除了trace.debug.info.warn.error这几个日志接口外,还可以配合MDC将数据写入日志.换句话说MDC也是用来记录日志的,但它的使用方式与使用 ...

  8. SharePoint 2016 入门视频教程

    之前一直有朋友让自己录一些SharePoint的入门视频,之前没有太多时间,一个巧合的机会收到CSDN学院的邮件,可以在CSDN上发布视频教程,自己就录了一些.说起录视频也是蛮辛苦的,每天下班吃完饭要 ...

  9. Android Fragment 剖析

    1.Fragment如何产生?2.什么是Fragment Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后 ...

  10. HTML5游戏源码 飞翔的字母 可自定义内容

    相信大家都玩过飞翔的小鸟吧,当然,可能已经有很多人因为这个游戏砸了不少手机.吼吼. 废话不多说,回到主题,源码如下. 博客园上传空间大小有限制,没法上传了,需要打包源码的朋友们请留言邮箱地址.当然还有 ...