<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="keywords" content="">

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >

        <meta name="description" content="" >

        <title></title>

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

        <script type="text/template" id="app_tpl"><!--     描述：建立模板 -->

            <div class="product">

                <div class="imageContainer">

                    <img src="{#img#}" /><!--｛##｝     自己定义匹配  -->

                    <div class="layer">

                        <p>找同款</p>

                        <p>找相似</p>

                    </div>

                </div>

            </div>

            <div class="content">

                <p class="price">

                    <span class="price-text">￥{#price#}</span>

                    <span class="sum">{#sales#}人付款</span>

                </p>

                <p class="title">{#title#}</p>

                <p class="store">

                    <span class="store-title">{#store#}</span>

                    <span class="adress">{#address#}</span>

                </p>

            </div>

        </script>

    </head>

    <body>

        <div id="app" class="ppa"></div>

    </body>

</html>

<script type="text/javascript">

    document.write(footerTpl);

</script>

<script type="text/javascript">

    //命名空间：封装工具方法

    var Util = {

        //封装选择元素的方法

        id:function(id){

            return document.getElementById(id);

        },

        //封装ajax请求数据方法

        ajax:function(url,callback){

            //创建ajax对象

            var xhr = new XMLHttpRequest();

            //订阅事件

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4){

                    if(xhr.status == 200){

                        //var data = xhr.responseText;

                        var data = JSON.parse(xhr.responseText);

                        //console.log(xhr.responseText);

                        //处理数据

                        callback&&callback(data);

                    }

                }

            }

            //open方法

            xhr.open('get',url,true);

            //send方法

            xhr.send(null);

        }

    }

    //console.log(Util.id('app_tpl').innerHTML);

    //封装格式化模板方法

    function formDataString(str,data){

        return    str.replace(/\{#(\w+)#\}/g,function(match,$1){

            //console.log(this);//this作用域

            //console.log(arguments);

            console.log('match:'+match);//match实参集合

            console.log($1);

            return data[$1] === undefined?'':data[$1];

        });//w+ 任意多个字符

    }

    var html = '';

    var str = Util.id('app_tpl').innerHTML;

    Util.ajax('data/list.json',function(data){

        //console.log(data);

        //console.log(data.list.length);

        for(var i=0,len=data.list.length;i<len;i++){  

            var list = data.list[i];

            html += formDataString(str,list);

        }

        Util.id('app').innerHTML = html;

    });

</script>

[HTML] 模板的用法的更多相关文章

  1. Django中模板的用法简介

    1. 模板系统的介绍 Django作为一个Web框架,其模板所需的HTML输出静态部分以及动态内容插入 模板由HTML代码和逻辑控制代码构成 Django框架的模板语言的语法格式: {{var_nam ...

  2. Thymeleaf 模板引擎用法

    学习.改良.极致 博客园 首页 新随笔 联系 管理 订阅 随笔- 31  文章- 0  评论- 50  Thymeleaf 常用属性   文章主目录 th:action th:each th:fiel ...

  3. c++ 中pair类模板的用法详解

    pair: 头文件:#include<utility> 类模板:template <class T1, class T2> struct pair 参数:T1是第一个值的数据类 ...

  4. django入门之模板的用法

    1.为什么要使用模板? 看下以前的代码 #-*- coding:utf-8 -*- from django.shortcuts import render from django.http impor ...

  5. c++转载系列 std::vector模板库用法介绍

    来源:http://blog.csdn.net/phoebin/article/details/3864590 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作 ...

  6. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  7. Laravel框架中Blade模板的用法

    1. 继承.片段.占位.组件.插槽 1.1 继承 1.定义父模板 Laravel/resources/views/base.blade.php 2.子模板继承 @extends('base') 1.2 ...

  8. js模板引擎用法

    JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...

  9. C++ 模板的用法

    C++中的高阶手法就会用到泛型编程,主要有函数模板, 在程序中使用模板的好处就是在定义时不需要指定具体的参数类型,而在使用时确可以匹配其它任意类型, 定义格式如下 template <class ...

随机推荐

  1. Linux运维基础入门（四）：Linux中的网络知识04

    一,虚拟机的安装 略 二,Linux系统下的网络配置(Linux虚拟机的网络设定为桥接模式) 桥接模式:虚拟机同主机一样,在网络中相当于一个真实存在的装有Linux系统的电脑.(我们先用这个模式) N ...

  2. 对一个 复杂的json结果进行取值的例子

    1 JSON结果集 [ { "J_LP_OPERATE_MAIN": { "ID": "1900036295", "FILL_MA ...

  3. 使用ES(elasticsearch) 搜索引擎

    介绍  https://blog.csdn.net/andyzhaojianhui/article/details/75195296 创建语句 { "company":{ &quo ...

  4. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  5. 转）bash快捷键

    粗体表示推荐,也许对每个人不同. Ctrl-A 相当于HOME键,用于将光标定位到本行最前面 Ctrl-E 相当于End键,即将光标移动到本行末尾 Ctrl-B 相当于左箭头键,用于将光标向左移动一格 ...

  6. 微交互：App成功的秘诀

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 最好的产品拥有两个很棒的特点:功能和细节.产品的功能可成功吸引到人们的注意力,而产品的细节则可留住你 ...

  7. 解析config文件 练手代码

    解析一个如下的CONFIG文件 #config.txt #SHTTPD Web 服务器配置文件示例 #侦听端口 ListenPort = 80 #最大并发访问客户端数目 MaxClient = 8 # ...

  8. struts,hibernate,spring配置时问题汇总及解决办法

    1.java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor 缺少asm-3.3.jar 2.java.lang.NoClassDe ...

  9. 搭建vue脚手架，包含Axios、qs、Element-UI、mock等插件的安装配置

    1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4  安装 Mock 2.新建一个vue工程, ...

  10. （广搜）Dungeon Master -- poj -- 2251

    链接: http://poj.org/problem?id=2251 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2137 ...