<!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. 在eclipse中使用maven

    现在一般的eclipse工具中都自带的有maven插件,我们使用自带的即可,但需要修改二个参数 具体设置为: 1.设置Installations 2.设置user settings

  2. centos 安装hue 4.0

    Hue是Cloudera开源的一个Hadoop UI,由Cloudera Desktop演化而来.面向用户提供方便的UI用于平时的Hadoop操作中.Apache Ambari面向的是管理员,用于安装 ...

  3. linux sudo 系统环境变量 用户环境变量

    1. sudo就是普通用户临时拥有root的权限.好处在于,大多数时候使用用户自定义的配置,少数情况可以通过sudo实现root权限做事. 故而,需要注意的一点是,在你使用了sudo后,你临时不再是原 ...

  4. react-native react-navigation的用法

    react-navigation升级了, 看这个: react-navigation 3.x版本的使用 一.问题背景 react-navigation是react-native官方推荐的,基于Java ...

  5. ArcEngine调用GP里的Merge工具传参问题

    Merge工具inputs参数形式与Python中不同: string startLayerPath= cpj.TempWs.PathName + @"\" + datasetNa ...

  6. 最小子串覆盖 · Minimum Window Substring

    ［抄题］: 给定一个字符串source和一个目标字符串target,在字符串source中找到包括所有目标字符串字母的子串. 在答案的子串中的字母在目标字符串中是否需要具有相同的顺序? ——不需要. ...

  7. Step By Step Hibernate Tutorial Using eclipse WTP[z]

     [shivasoft.in/blog/sql/myqsl/step-by-step-hibernate-tutorial-using-eclipse-wtp/] Hibernate is the O ...

  8. Golang之反射（重点！！）

    1.反射:可以在运行时动态获取变量的相关信息 Import(“reflect”) 两个函数: reflect.TypeOf()//获取变量的类型,返回reflect.Type类型reflect.Val ...

  9. Linux gperf命令

    一.简介 GNU 的 gperf 工具是一种 "完美的" 散列函数,可以为用户提供的一组特定字符串生成散列表.散列函数和查找函数的 C/C++ 代码.通过本文学习如何使用 gper ...

  10. 关于Android控件EditText的属性InputType的一些经验，java组合多个参数

    关于Android控件EditText的属性InputType的一些经验 2013-11-14 15:08:02|  分类: 默认分类|举报|字号 订阅       1.InputType属性在代码中 ...