作为现代应用，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. where T：class的含义（ where约束）

    public void Request<T>(List<T> EntityList) where T : class { } 这是参数类型约束,指定T必须是Class类型.   ...

  2. Linux Bash Shell入门教程

    Linux 系统根据 "#!" 及该字串后面的信息确定该文件的类型,关于这一问题同学们回去以后可以通过 "man magic"命令 及 /usr/share/m ...

  3. 存储可靠性技术之 --RAID

    云计算项目交付时,不可避免的需要考虑存储磁盘采用何种RAID.例如:我们的项目工程师可能会建议大家连接克隆虚拟机系统盘组RAID 10,完整复制虚拟机数据盘 使用RAID5或者RAID6等,那么RAI ...

  4. CSS常用字体Unicode 编码

    在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误. ...

  5. html基础知识2（有序无序列表，表格）2017-03-08

    摘要:php 基础知识2   重点:有序无序列表:<a>标签:<table>标签  内容容器 1.段落标签 <p></p> 注: 执行前后换行,并空一行 ...

  6. MySQL学习分享-->查询-->查询的原理

    查询的原理 在一个查询中常包含下述子句: 1.select,2.distinct,3.join,4.on,5.from,6.where,7.having,8.group by,9.order by,1 ...

  7. Lowest Common Ancestor of a Binary Tree leetcode

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  8. 模态Model视图Push下一个视图(混合跳转)

    来自: http://www.cnblogs.com/dingding3w/p/6222626.html 如果没有UINavigationController导航栏页面之间切换是不能实现Push操作的 ...

  9. synchronized的4种用法

    1.方法声明时使用,放在范围操作符(public等)之后,返回类型声明(void等)之前.这时,线程获得的是成员锁,即一次只能有一个线程进入该方法,其他线程要想在此时调用该方法,只能排队等候,当前线程 ...

  10. web从入门开始（1）------简介

    服务端与客户端 HTML简介