<!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. archlinux错误：无法提交处理 (无效或已损坏的软件包)

    1.首先更新一下密钥,如果没有安装archlinux-keyring,请及时安装 sudo pacman-key --refresh-keys 2.重新加载相应的签名密钥 sudo pacman-ke ...

  2. SOAP 版本可能不匹配: 出现意外的 Envelope 命名空间 http://schemas.xmlsoap.org/wsdl/

    原错误描述:SOAP 版本可能不匹配: 出现意外的 Envelope 命名空间 http://schemas.xmlsoap.org/wsdl/.应为 http://schemas.xmlsoap.o ...

  3. 隐藏Android下的虚拟按键

    要隐藏Android下的虚拟按键,可通过如下办法操作 adb root adb remount adb shell ls -al /system/build.prop   (查看文件权限) -rw-r ...

  4. SpringBoot简单理解

    SpringBoot 一.特点:1.默认大于配置,不需要大量配置文件,没有web.xml,拥有可运行的Application类. 2.一般通过java代码配置,而尽量少使用xml配置. 3.maven ...

  5. CentOS错误

    centos下yum lock的解决办法 Another app is currently holding the yum lock; waiting for it to exit... 解决办法:  ...

  6. nSum “已知target再求和”类型题目总结：n-2重循环+left/right

    Sum类的题目一般这样: input: nums[], target output: satisfied arrays/ lists/ number 拿到题目,首先分析: 1. 是几个数的sum 2. ...

  7. golang之math/rand随机数

    简单的随机数生成,结合时间模块初始化种子 package main import ( "fmt" "math/rand" "time" ) ...

  8. 解压*.tar.bz2的坑

    下了一个压缩包,tar -xf 解压不了 解决办法: 装了bzip2工具 bzip2 -d **.tar.bz2 //将文件解压成**.tar tar -xf **.tar //解包 听说可以 tar ...

  9. qt4代码到qt5代码出错

    1.error C2039: “toAscii”: 不是“QString”的成员 QT5.0.1把这个函数取消掉了,可以用toLatin1这个函数

  10. Sketch插件新利器——使用Mockplus DS制作设计规范

    Sketch,作为一款专为图标和界面设计而打造的优质矢量绘图工具,也是设计师们制作和完善公司企业内部设计规范系统不可或缺的设计工具. 然而,逐个导出和上传Sketch编辑优化的设计系统资源费时而费力. ...