作为现代应用，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. css中的那些布局

    因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的 ...

  2. Java设计模式之《观察者模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6513651.html 观察者模式,又可以称之为发布-订阅模式,观察者,顾名思义,就是一个监 ...

  3. Java基础之数据类型和转换

    一.常见的数据类型分类 1.java中基本数据类型分为三大类,即布尔类型,字符型,数值型.其中数值型又分为整型和浮点型.引用数据类型分为类,接口,数组,枚举,注解.具体如下: 注:一个字节 = 8位 ...

  4. 关于Edittext默认弹出软键盘为数字键

    如果说我们只是输入数字的话,我们可以直接在xml文件中: android:inputType="number" 如果是身份证类型的话,我们可以这样: android:inputTy ...

  5. 【杂】poj2482 Stars in Your Windows 题面的翻译

    原地址:http://poj.org/problem?id=2482 神题,被誉为最浪漫的题目,一位acmer以自己独特的方式写下的殷殷情语 你窗前的星星 纵时光飞逝如梭,也我对你的回忆也永不黯然.从 ...

  6. React-Native 开发（一） Android环境部署，Hello react-native

    前提: 一个小web前端,完全不会android 跟iOS 的开发,首次接触,有很多不懂的问题.请见谅 环境: win7 成果:                           一.SDK安装 提 ...

  7. ST 单元测试之maven安装

    junit是用于单元测试的jar包,可以直接下载然后粘贴至lib目录,maven是专门的包管理工具,所以尝试安装maven. 安装maven之前需要先安装好java以及eclipse,在相应的官网下载 ...

  8. ubuntu firefox上看视频，安装flash啊

    这是针对于直接硬盘安装的linux系统: u盘安装选择了安装第三方软件的话就不会存在这种问题 flash的安装其实也不是很难的,有点耐心就ok了 总结一下: 1:肯定是下载最新版的flash啦,注意看 ...

  9. android 透明状态栏方法及其适配键盘上推（二）

    在上一篇文章中介绍了一种设置透明状态栏及其适配键盘上推得方法.但是上一篇介绍的方法中有个缺点,就是不能消除掉statusbar的阴影.很多手机如(三星,Nexus都带有阴影).即使我用了: <a ...

  10. CSS规范 - 命名规则

    使用类选择器,放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用. NEC特殊字符:"-"连字符 "-"在本规范中并不表示连 ...