<!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. 滑动窗口的中位数 · Sliding Window Median

    ［抄题］: 给定一个包含 n 个整数的数组,和一个大小为 k 的滑动窗口,从左到右在数组中滑动这个窗口,找到数组中每个窗口内的中位数.(如果数组个数是偶数,则在该窗口排序数字后,返回第 N/2 个数字 ...

  2. kafka常用运维命令

    列出所有topic:bin/kafka-topics.sh --zookeeper localhost:2181 --list说明:其实就是去检查zk上节点的/brokers/topics子节点,打印 ...

  3. MFC The Screen Flickers When The Image Zoomed

    问题描述 当初写MFC也是不情愿的. 既然写了,遇到一些问题. 解决也废了一切功夫.所以简单的记录一下. 这个问题,也就是使用MFC显示图像的时候, 放缩图像的过程中, 图像会一闪一闪的. 这个问题的 ...

  4. 关于java项目中的.project文件：

    .project是项目文件,项目的结构都在其中定义,比如lib的位置,src的位置,classes的位置

  5. sklearn.metrics import precision_recall_fscore_support

    二分类/多分类/多标签 对于二分类来说,必须定义一些matrics(f1_score,roc_auc_score).在这些case中,缺省只评估正例的label,缺省的正例label被标为1(可以通过 ...

  6. Path Creation and Path Painting

    [Path Creation and Path Painting] Path creation and path painting are separate tasks. First you crea ...

  7. 数据恢复软Extundelete

    1>概述  作为一名运维人员,保证数据的安全是根本职责,所以在维护系统的时候,要慎重和细心,但是有时也难免发生出现数据被误删除的情况,这个时候该如何              快速.有效地恢复数 ...

  8. nginxのerror_logはformat指定できない．

    備忘録です． http://toshitanian.hatenablog.com/entry/2013/10/25/023838 2013-10-25 nginxのerror_logはformat指定 ...

  9. 疑难杂症--SQL SERVER 18056的错误

    朋友遇到一个很棘手的问题,查看服务器日志,报以下错误: ::,spid296,未知,错误: ,严重性: ,状态: . ::,spid495,未知, The client was unable < ...

  10. Centos 7 安装记录

    0.安装中选择最小安装 1.centos7安装图形界面 之前转载过一篇“centos6安装图形界面”的文章,地址见http://my.oschina.net/u/1169607/blog/335304 ...