zoukankan      html  css  js  c++  java
  • js的简单模板解析

    在编程中总是会遇见很多动态生成的东西,一般我们都是通过简单的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>


  • 相关阅读:
    1130 Infix Expression (25分)
    1131 Subway Map (30分)
    1132 Cut Integer (20分)
    1133 Splitting A Linked List (25分)
    1134 Vertex Cover (25分)
    1135 Is It A Red-Black Tree (30分)
    tensorflow 1.0的部分项目配置匹配
    1136 A Delayed Palindrome (20分)
    谷粒商城Redisson分布式锁(二十四)
    谷粒商城缓存(二十三)
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3356102.html
Copyright © 2011-2022 走看看