在编程中总是会遇见很多动态生成的东西，一般我们都是通过简单的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. codevs2492上帝造题的七分钟 2（线段树）

    /* 区间修改 区间查询 可以用线段树搞 但是一般的标记下放对这个题好像不合适 只能改叶子 然后更新父亲(虽然跑的有点慢) 小优化:如果某个点是1 就不用再开方了 所以搞一个f[i]标记 i 这个点还 ...

  2. 基于CANVAS与MD5的客户端生成验证码

    好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?):我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可 ...

  3. 【转】深入理解Java：SimpleDateFormat安全的时间格式化

    [转]深入理解Java:SimpleDateFormat安全的时间格式化 想必大家对SimpleDateFormat并不陌生.SimpleDateFormat 是 Java 中一个非常常用的类,该类用 ...

  4. java中判断两个字符串是否相等的问题

    我最近刚学java,今天编程的时候就遇到一个棘手的问题,就是关于判断两个字符串是否相等的问题.在编程中,通常比较两个字符串是否相同的表达式是“==”,但在java中不能这么写.在java中,用的是eq ...

  5. php 写model层

    <?php /** * @author Administrator * */ class User { private $id; private $admin; private $paw; pr ...

  6. （转）如何将ecshop首页主广告位的flash轮播替换为js轮播

    转之--http://www.ecshoptemplate.com/article-1710.html 这个ecshop很常见,因为现在比起flash难以修改,js更加符合人们的使用习惯,而默认ecs ...

  7. 【转】 iOS Provisioning Profile(Certificate)与Code Signing详解

    原文:http://blog.csdn.net/phunxm/article/details/42685597 引言 关于开发证书配置(Certificates & Identifiers & ...

  8. WBS说明

    work breakdown structure(WBS) 工作分解结构 (英语:Work Breakdown Structure, WBS)是一个详尽的,层次的(从全面到细节)的树形结构,由可交付成 ...

  9. OpenGL旋转平移 变换

    #include<gl/glut.h> #include<gl/GL.h> #include<gl/GLU.h> #include<math.h> #i ...

  10. javascript Array类型 方法大全

    1,创建数组 //第一种是使用Array构造函数 var colors = new Array(); var colors = new Array(20); //创建length为20的数组 var ...