在编程中总是会遇见很多动态生成的东西，一般我们都是通过简单的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. okhttp 常用使用方式 封装 演示

    工具介绍 使用: AndroidStudio:[compile 'com.squareup.okhttp3:okhttp:3.4.2']和[compile 'com.zhy:okhttputils:2 ...

  2. 001-视频 video

    <!DOCTYPE HTML> <html> <body> <video width="320" height="240&quo ...

  3. ASPNET5 诊断

    1. 配置一个错误的处理页 在ASP.NET5, 可以在Startup的Configure里配置一个错误处理页,对于开发来说,非常简单,只要增加Microsoft.AspNet.Diagnostics ...

  4. jdbc_odbc SQLserver 驱动安装及测试

    有2次被问到同一个问题,尽管博客园是.net的园子,我还是分享下吧.PS:我现在做的.net,以前学过点java.献丑了. ------------------ 原始邮件 -------------- ...

  5. Visual Studio 2013 无法启动 IIS Express 的解决办法

    关于 ASP.NET Web 开发服务器.本地 IIS和 IIS Express 的区别,请参见<VS2013无法启动IIS Express Web的解决办法>,此文章最后提到的部分,即是 ...

  6. 关于Core Data的一些整理（五）

    关于Core Data的一些整理(五) 在Core Data中使用NSFetchedResultsController(以下简称VC)实现与TableView的交互,在实际中,使用VC有很多优点,其中 ...

  7. java对mysql数据库进行单表筛选备份、还原操作

    最近在做的一个项目需要对mysql数据库中的单个表格进行备份 其中,一部分表格需要进行筛选备份(例如对最近插入的1000条记录进行备份) 思路:java调用系统命令完成备份操作 假设现在有数据库tes ...

  8. 重拾C++ 基础知识总结（一）

    1.使用gcc编译c++文件报错 proc1.cc:(.text+0x14): undefined reference to `std::cout' C++程序使用gcc命令只能编译,不能链接库文件 ...

  9. 【USACO 1.3.3】回文串

    [題目描述] 据说如果你给无限只母牛和无限台巨型便携式电脑(有非常大的键盘),那么母牛们会制造出世上最棒的回文.你的工作就是去寻找这些牛制造的奇观(最棒的回文). 在寻找回文时不用理睬那些标点符号.空 ...

  10. 妙用git rebase --onto指令

    有时候,在分支提交更改的时候,会忘记rebase,就直接提交上去,或者忘记和本地远程分支做merge,就直接rebase了别的分支.有时候真希望有一种切片的方式,让自己的分支只需要接上某一段.这个时候 ...