在编程中总是会遇见很多动态生成的东西，一般我们都是通过简单的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. 数据库 ORM框架 ORMLite

    几个ORM框架的比较 先介绍一下ORM的概念,以前也一直听说,不过没详细了解啥意思.其全称叫做对象关系映射(Object Relation Mapping),是一种程序设计技术,用于实现面向对象编程语 ...

  2. 分页技术之PageDataSource类

    之前给大家介绍了分页技术之Gridview控件,今天给大家介绍另外一种分页技术,采用PageDataSource类 + Repeater控件来实现. 前台只需要拖出一个Repeater控件来绑定要显示 ...

  3. 启动php-fpm报错：please specify user and group other than root

    安装好PHP之后启动报错: 启动php-fpm报错:please specify user and group other than root, pool 'default 修改 php-fpm.co ...

  4. iOS开发中的常用宏定义

    在iOS开发的过程中合理的使用宏定义能够极大提高编码的速度,下面是一些常用的宏定义,部分内容来自互联网 Log // 调试状态, 打开LOG功能 #ifdef DEBUG #define GLLog( ...

  5. [转]mysql 的日志的启动与查看

    mysql有以下几种日志:错误日志:  -log-err查询日志:  -log慢查询日志: -log-slow-queries更新日志:    -log-update二进制日志:-log-bin 日志 ...

  6. indexedDB bootstrap angularjs 前端 MVC Demo

    前端之MVC应用 1.indexedDB(Model): 数据层,前端浏览器 HTML5 API 面向对象数据库,一般现在用的数据库都是关系型数据库. 那么indexeddb有什么特点呢: 首先,从字 ...

  7. centos yum

    1.介绍 yum(全 称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器 ...

  8. uvalive3026 Period （KMP+结论）

    题目链接:http://vjudge.net/problem/viewProblem.action?id=29342 题目大意:给定字符串,找到每个前缀的最大循环节的个数. 首先当然是kmp预处理,接 ...

  9. MySQL 5.6.22 win32 zip版安装

    mysql 5.6.22 32位下载地址:http://cdn.mysql.com//archives/mysql-5.6/mysql-5.6.22-win32.zip 1 从http://dev.m ...

  10. ES聚合实例

    在es中需要根据app_categor进行聚合,JSON查询语句如下: { "query": { "bool": { "must": [ { ...