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

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 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. java中的字符串相关知识整理

    字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...

  2. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  3. 使用 Roslyn 编译器服务

    .NET Core和 .NET 4.6中 的C# 6/7 中的编译器Roslyn 一个重要的特性就是"Compiler as a Service",简单的讲,就是就是将编译器开放为 ...

  4. Hbase的伪分布式安装

    Hbase安装模式介绍 单机模式 1> Hbase不使用HDFS,仅使用本地文件系统 2> ZooKeeper与Hbase运行在同一个JVM中 分布式模式– 伪分布式模式1> 所有进 ...

  5. 【NLP】十分钟快览自然语言处理学习总结

    十分钟学习自然语言处理概述 作者:白宁超 2016年9月23日00:24:12 摘要:近来自然语言处理行业发展朝气蓬勃,市场应用广泛.笔者学习以来写了不少文章,文章深度层次不一,今天因为某种需要,将文 ...

  6. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值

    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...

  7. [原][Docker]特性与原理解析

    Docker特性与原理解析 文章假设你已经熟悉了Docker的基本命令和基本知识 首先看看Docker提供了哪些特性: 交互式Shell:Docker可以分配一个虚拟终端并关联到任何容器的标准输入上, ...

  8. EC笔记：第4部分：20、传递引用代替传值

    考虑以下场景: #include <iostream> #include <string> using namespace std; struct Person { strin ...

  9. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  10. SymmetricDS 快速和灵活的数据库复制

    开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...