作为现代应用，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. Laravel控制器和视图

    控制器,rawSQL,Model controller.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request ...

  2. 读书笔记 effective c++ Item 29 为异常安全的代码而努力

    异常安全在某种意义上来说就像怀孕...但是稍微想一想.在没有求婚之前我们不能真正的讨论生殖问题. 假设我们有一个表示GUI菜单的类,这个GUI菜单有背景图片.这个类将被使用在多线程环境中,所以需要mu ...

  3. 【js】基本类型和引用类型的区别

    1.保存方式:(一脸懵逼???) 基本类型是按值访问的,可以在变量的生命周期改变它,但是它是储存在哪里的呢?在浏览器缓存吗?[执行环境中定义的所有变量和函数都存储在执行环境的变量对象里,变量对象我们编 ...

  4. 1623: [Usaco2008 Open]Cow Cars 奶牛飞车

    1623: [Usaco2008 Open]Cow Cars 奶牛飞车 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 291  Solved: 201[S ...

  5. RobotFramework中解析中文报错UnicodeDecodeError

    在RobotFramework中解析一段包含中文的字符串时遇到下面的报错: FAIL : UnicodeDecodeError: 'ascii' codec can't decode byte 0xe ...

  6. Postman使用教程——调试网络接口的凶器

    postman是谷歌浏览器的一个插件,干什么用的呢?跟题目一样,就是用来调试网络接口的.在我们程序猿做程序的时候,如果做网络应用的开发,比如一些B/S.C/S,我们总会给别人一些网络接口,也会使用别人 ...

  7. ZooKeeper的简单理解

    1 ZooKeeper的一致性特点 概念 描述 备注 顺序一致性 以ZXID来保证事务的顺序性 原子性 以ZAB保证原子操作,要么成功,要么失败 单一视图 无论客户端从哪个服务器获取到关于应用的数据都 ...

  8. Internet Information Services安装与启动

    Internet Information Services安装 1.打开控制面板——程序——启动或关闭windows功能 2.找到Internet Information Services ——将其全 ...

  9. cstring头文件函数解析

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5643829.html 在使用由字符数组或指针组成的字符串的时候,要用到一些函数,这些函数通常包含在 ...

  10. Java中反射与常用方法

    java通常是先有类再有对象,有对象我就可以调用方法或者属性. 反射其实是通过Class对象来调用类里面的方法.通过反射可以调用私有方法和私有属性.大部分框架都是运用反射原理.   如何获得Class ...