在编程中总是会遇见很多动态生成的东西，一般我们都是通过简单的html拼接起来的

function createHtml(name, phone, addr, email, imageSrc){

        var html = '';

        html += '<div class=personInfo>'

        html += '<p>Name: ' + name + '</p>';

        html += '<p>Phone: ' + phone + '</p>';

        html += '<p>Addr: ' + addr + '</p>';

        html += '<p>Email: ' + email + '</p>';

        html += '<img src="' + imageSrc + '">';

        html += '</div>'

        return html;

    }

但是其实我们可以通过使用正则表达式来进行简单的替换，从而实现模板解析

<script type="template" id="template">

    <h2>

      <a href="{{href}}">

        {{title}}

      </a>

    </h2>

    <img src="{{imgSrc}}" alt="{{title}}">

</script>

 function replace(obj){

            var t, key, reg;

            for(key in obj){

                reg = new RegExp('{{' + key + '}}', 'ig');

                t = (t || template).replace(reg, obj[key]);

            }

            return t;

        }

来一份简单的源代码：

<!doctype html>

<html>

<head>

   <meta charset=utf-8>

   <title>Simple Templating</title>

</head>

<body>

    <div class="result"></div>

<script type="template" id="template">

    <h2>

      <a href="{{href}}">

        {{title}}

      </a>

    </h2>

    <img src="{{imgSrc}}" alt="{{title}}">

</script>

<script type="text/javascript">

    var data = [

        {

            title : 'php web appliaction',

            href : 'http://www.baidu.com',

            imgSrc : 'http://www.baidu.com'

        },

        {

            title : 'js 权威指南',

            href : 'http://www.qq.com',

            imgSrc : 'http://www.qq.com'

        }];

    var template = document.querySelector('#template').innerHTML,

        result = document.querySelector('.result');

    function _template(template, data){

        var i = 0,

            len = data.length,

            fragment = '';

        function replace(obj){

            var t, key, reg;

            for(key in obj){

                reg = new RegExp('{{' + key + '}}', 'ig');

                t = (t || template).replace(reg, obj[key]);

            }

            return t;

        }

        for(; i < len; i++){

            fragment += replace(data[i]);

        }

        return fragment;

    }

    console.log(_template(template, data));

</script>

</body>

</html>

js的简单模板解析的更多相关文章

  1. 一种简单快速的模板解析方法，活用with javascript版

    //一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...

  2. js 简单模板引擎

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  3. [转载]ECMall模板解析语法与机制

    ECMall模板解析语法与机制 2011-05-22 在ECMall模板中,用"{"开头,以"}"结尾就构成一个标签单元,"{"紧接着的单词 ...

  4. Jade —— 源于 Node.js 的 HTML 模板引擎

    2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 ...

  5. 1kb的前端HTML模板解析引擎，不限于嵌套、循环、函数你能想到的解析方式

    传送门:https://github.com/xiangyuecn/BuildHTML copy之前说点什么 html做点小功能(什么都没有),如果是要手动生成html这种操作,容易把代码搞得乱七八糟 ...

  6. vert.x学习（四），使用模板解析器ClassLoaderTemplateResolver

    在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...

  7. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  8. CI 模板解析器类

    模板解析器类可以解析你的视图文件中的伪变量.它可以解析简单的变量或者以变量作为标签的结构.如果你以前没有用过模板引擎,那么伪变量如下所示: <html><head><ti ...

  9. ThinkPHP第八天(U函数放置在外部JS不会被解析，错误界面定制，错误信息变量)

    1.JS外部文件中U函数不会被解析,内部JS代码可以被解析. 2.halt. _404可以定制错误模板,在配置文件中配置 TMPL_EXCEPTION_FILE =>'./Public/Tpl/ ...

随机推荐

  1. Python 函数的使用 外加引入文件

    #coding=utf-8 #!user/bin/python import sys import test2 def functionsss(name,sex,age=25): print name ...

  2. <c:if>判断参数是否同时为空

    <c:if test="${empty str}">  str为空</c:if> <c:if test="${not empty str}& ...

  3. 详解Linux服务器最大tcp连接数

    网络编程在tcp应用中,server事先在某个固定端口监听,client主动发起连接,经过三路握手后建立tcp连接.那么对单机,其最大并发tcp连接数是多少? 如何标识一个TCP连接在确定最大连接数之 ...

  4. Delphi 串口通信(1)

    利用 Delphi实现串口通信的常用的方法有 3种: 一是利用控件,如 MSCOMM控件和 SPCOMM控件: 二是使用 API函数: 三是调用其他串口通信程序.其中利用 API编写串口通信程序较为复 ...

  5. 测试最新的log4cplus1.1.2版

    #include "stdafx.h" #include <sstream> class AB{ public:     void do_test()     {    ...

  6. CSS，点击去除虚线边框代码

  7. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  8. Python3 如何优雅地使用正则表达式（详解一）

    注:本文翻译自 Regular Expression HOWTO,小甲鱼童鞋对此做了一些注释和修改. 正则表达式介绍 正则表达式(Regular expressions 也称为 REs,或 regex ...

  9. python二进制文件解析

    struct.pack(): struct.pack用于将Python的值根据格式符,转换为字符串(因为Python中没有字节(Byte)类型,可以把这里的字符串理解为字节流,或字节数组).其函数原型 ...

  10. [Struts2学习笔记] -- 自定义类型转换

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...