在编程中总是会遇见很多动态生成的东西，一般我们都是通过简单的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. win7/win8 64位系统注册TeeChart8.ocx 控件---以及dllregisterserver调用失败问题解决办法

    TeeChart控件就不多介绍了,很多朋友不知道开始怎么注册使用,尤其是在64位系统下如何注册的问题,具体如下: win7.win8  64位系统问题所在: 64位的系统一般都是可以安装32位程序的 ...

  2. 将sql数据库逆向生成PDM模型

    由于接手的一个项目是公司前期外包出去的,所以到手的只有繁杂的代码,和数据库文件.由于是个新手,我需要一个数据字典来帮助我完成一些东西,所以我就想到从sql数据库转换出一个pdm模型的数据字典. 第一步 ...

  3. css font的简写规则

    font的属性简写里面常用的有5个是可以写在一起的: font-style设定斜体 如:font-style: italic;font-weight设定文字粗细 如:font-weight: bold ...

  4. DEDECMS批量修改默认文章和列表命名规则的方法

    很多人因为添加分类而苦恼,尤其是批量添加的时候,必须要重新修改一下文章命名规则和列表命名规则,都是为了做SEO.如果进行默认值的修改,就会事半功倍.不多说. 一.DEDE5.5修改默认文章命名规则. ...

  5. 关于svn获取获取文件时 Unable to connect to a repository at URL"https://..."执行上下文错误：参数错误

    错误提示: 下面的六种解决方案都未能解决: 1.不提示输入用户名和密码,不管重装多少次都一样. 2.TortoiseSVN的setting->Saved Data->Authenticat ...

  6. HTML5 History对象，Javascript修改地址栏而不刷新页面

    一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

  7. Sqlserver2005手动备份远程数据库到本地数据库方法

    1,在本地数据库中新建一个数据库名,如local 选中local,鼠标右键,任务,导入数据 2下一步: 注意:服务器名称写远程连接的主机的IP, 数据库选中你要备份的远程数据库. 3下一步: 注意:服 ...

  8. centos node卸载

    1.通过包管理工具 如果是通过包管理工具安装的话,那就和包管理工具卸载 yum remove nodejs npm -y 2.手动 如果是通过手动安装:官方下载后安装 进入到安装的路径 cd /opt ...

  9. java中的浮点计算

    记得很久以前编写测试用例,无意间发现 double c=2.31;double d=0.1; System.out.println(c/d); 最后输出的竟然是23.099999999999998,而 ...

  10. Google jQuery URL

    Query 在线地址:https://developers.google.com/speed/libraries/devguide?hl=zh-CN#jquery此地址里还包含了很多的JS框架.