<!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. 图片上传jQuery插件（兼容IE8）

      图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg   html <!DOCTYPE html> <ht ...

  2. 133. Clone Graph (Graph, Map; DFS)

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  3. Implement Trie (Prefix Tree)实现字典树

    ［抄题］: Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inp ...

  4. [SoapUI]怎样配置SoapUI运行的不同环境，并在Jenkins上面通过命令调用不用的环境

    配置SoapUI运行的不同环境 Groovy 脚本来控制environment 在Jenkins上面通过命令调用不用的环境 http://www.soapui.org/Test-Automation/ ...

  5. Android系统编译与测试

    1.Android系统分析 2.下载Android源代码(不包括Linux内核部分) 下载好了的Android_5.01.tar.gz,通过samba复制到ubuntu里,再解压之. 可以看到Andr ...

  6. knn的python代码

    import heapq import random class Classifier: def __init__(self, bucketPrefix, testBucketNumber, data ...

  7. IntelliJ IDEA 2017版 导入maven项目需要的包

    1.选中项目,鼠标右键--->maven---->Reimport

  8. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

  9. 用word2016 写CSDN 博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  10. Hello_Motion_Tracking 任务一：Project Tango采集运动追踪数据

    我们来看一下中的几个基本的例子 (区域描述.深度感知.运动追踪.视频4个) 参考:Google Tango初学者教程 1. hello_motion_tracking package com.proj ...