作为现代应用，ajax的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板

在刚有web的时候，前端与后端的交互，非常直白，浏览器端发出URL，后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装，生成要返回浏览器端的html串。

这与我们现在做一个普通网页没什么区别。只不过现在，我们更常使用模板技术来解决前后端耦合的问题。

前端使用模板引擎，在html中写一些标签，与数据与逻辑基本无关。后端在渲染的时候，解析这些标签，生成HTML串，如smarty。其实前端与后端的交互在服务端就已经有一次了。

下面是自己敲的案例,非常直观来渲染前端页面,可以复制来看看

可以参照GitHub上面来看https://github.com/BorisMoore/jquery-tmpl

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #container{

             width: 400px;

             min-height: 300px;

             background-color: lightgreen;

             margin: auto;

             padding: 10px;

             text-align: center;

         }

         li{

             list-style: none;

             text-align: left;

         }

     </style>

     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript" src="js/template.js"></script>

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

         {{if weather}}

             {{each weather as value}}

                 <div>

                     <span>日期:{{value.date}}</span>

                     <ul>

                         <li>白天天气:{{value.info.day[1]}}</li>

                         <li>白天温度:{{value.info.day[2]}}</li>

                         <li>白天天气:{{value.info.day[3]}}</li>

                         <li>白天天气:{{value.info.day[4]}}</li>

                     </ul>

                     <ul>

                         <li>夜间天气:{{value.info.night[1]}}</li>

                         <li>夜间温度:{{value.info.night[2]}}</li>

                         <li>夜间天气:{{value.info.night[3]}}</li>

                         <li>夜间天气:{{value.info.night[4]}}</li>

                     </ul>

                 </div>

             {{/each}}

         {{/if}}

     </script>

     <script type="text/javascript">

         $(function(){

             $("#query").click(function(){

                 var code=$("#city").val();

                 $.ajax({

                     url : 'http://cdn.weather.hao.360.cn/api_weather_info.php',

                     data:{app:'hao360',code:code},

                     jsonp:'_jsonp',

                     jsonpCallback:'abc',

                     dataType:'jsonp',

                     success:function(data){

                         var html=template('weather',data);

                         $("#info").html(html);

                     }

                 })

             })

         })

     </script>

 </head>

 <body>

 <div id="container">

    <select id="city">

        <option value="101010100">北京</option>

        <option value="101020100">上海</option>

        <option value="101280101">广州</option>

        <option value="101280601">深圳</option>

    </select>

    <input type="button" value="查询" id="query">

    <div id="info"></div>

 </div>

 </body>

 </html>

jquery template.js前端模板引擎的更多相关文章

  1. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  2. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  3. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  4. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  5. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  6. artTemplate-优秀的前端模板引擎

    artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...

  7. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  8. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  9. js 简单模板引擎

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

随机推荐

  1. ABP Zero源码

    测试运行地址:http://ghy.demo.aspnetzero.com 账号:admin  密码:123456 需要源码,请加QQ:858-048-581 1.先编译成功,Nuget下载ABP的依 ...

  2. 微软.NET年芳15：我在Azure上搭建Photon服务器(C#.NET)

    网上火热的“微软.NET年芳15”文章,我也得写点什么嘛,毕竟我还是现任的微软MVP. 摘录网上的“.NET 15周年”信息如下: 微软的 .NET 框架本周迎来了 15 岁生日..NET 的第一个版 ...

  3. 使用LVS+keepalived实现mysql负载均衡的实践和总结

    前言 经过一段时间的积累,数据库的架构就需要根据项目不断的进行变化. 从单台数据库,到了两台数据库的主从,再到读写分离,再到双主,现在进一步需要更多的数据库服务器去支撑更加可怕的访问量. 那么经过那么 ...

  4. 如何垂直居中<img>?

    方法1: 父元素设置height=line-height,子元素设置vertical-align:middle; 方法2: 父元素display:table-cell;vertical-align:m ...

  5. Java基本数据类型及其封装器的一些千丝万缕的纠葛

    一些概念     想必大家都知道Java的基础数据类型有:char.byte.short.int.long.float.double.boolean 这几种,与C/C++等语言不同的是,Java的基础 ...

  6. python excel操作总结

    1.openpyxl包的导入 Dos命令行输入 pip install openpyxl==2.3.3 这里注意一下openpyxl包的版本问题 版本装的太高有很多api不支持了,所以笔者这里用的是2 ...

  7. Visual Studio 2017 Bugs

    Crash report information: Problem signature: Problem Event Name: CLR20r3 Problem Signature 01: deven ...

  8. Cocos2d-x shader学习2： 模糊(Blur)

    模糊效果在游戏中经常会用到,有的为了突出前景会把背景给模糊化,有的是因为一些技能需要模糊效果.模糊是shader中较为简单的一种应用.cocos2dx 3.x给的demo中,就有sprite的模糊的效 ...

  9. dfs算法

    一般bfs算法都是使用递归 //下面简单的代码 visited[Max]; dfs(_graph g,int vo){ print(vo); visited[vo]=1 for(int i=0;i&l ...

  10. 浅谈Java的集合框架

    浅谈Java的集合框架 一.    初识集合 重所周知,Java有四大集合框架群,Set.List.Queue和Map.四种集合的关注点不同,Set 关注事物的唯一性,List 关注事物的索引列表,Q ...