作为现代应用，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. Ghostscript.Net Pdf 转 Image

    需求: 项目中需要实现PPT转Image的功能,之前项目中用的是使用Office COM组件实现的功能,通过.NET与Office COM组件的互操作(Interop)来操作Office文档 但是在生 ...

  2. Java使用Schema模式对XML验证

    XML允许创作者定义自己的标签,因其灵活的特性让其难以编写和解析.因此必须使用某种模式来约束其结构.目前最流行的这种模式有两种:DTD和SCHEMA,而后者以其独特的优势即将取代DTD模式,目前只是过 ...

  3. vSphere在RedHat6.0上搭建Oracle 11g R2 RAC环境

    一.前期准备工作 1.1 为方便操作,装完系统后我们先安装Vmware Tools: 1.1.1.安装工具 在VMware的菜单栏上选择"虚拟机/安装虚拟机工具(VM/Install VMw ...

  4. 红黑树 C++实现

    #ifndef __RED_BLACK_TREE_H__ #define __RED_BLACK_TREE_H__ namespace lxf { template <typename Key, ...

  5. IntelliJ Idea和IntelliJ webstrm 常用快捷键

    Ctrl+Shift + Enter,语句完成"!",否定完成,输入表达式时按 "!"键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shif ...

  6. Spring之IOC详解

    学过Spring的小伙伴对于IOC一定不陌生,IOC:控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spr ...

  7. Linux下httpd服务与Apache服务的查看和启动

    转:http://jingyan.baidu.com/article/63f236282d43170209ab3d43.html 这里简要介绍Linux环境中Apache也就是httpd服务的启动,查 ...

  8. sass 学习

    本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk  我想这篇官方文档肯定 ...

  9. 微信JS分享功能--微信JS系列文章（二）

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

  10. mysql命令参数详解

    一,MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式 -?, --help //显示帮助信息并退出 -I, --help //显示帮助信息并退出  ...