JavaScript设计模式(二十九)【简单模板模式】

àì夳堔傛蜴生んèń 2021-07-04 17:26 351阅读 0赞

//简单模板模式包含三部分：字符串模板库、格式化方法、字符串拼接
    
    /** * 简单模板模式，一个很有趣的模式 * 定义似乎是 通过格式化字符串拼凑出现视图，避免创建视图时的大量节点操作，优化内存开销 * 大约是用字符串拼出来，然后用正则替换数字部分，最后把他丢进html里 * * */
    
    window.onload = function() { 
        var A = { 
            root: document.getElementById('container'),
            formatString: function(str, data) { 
                return str.replace(/{#(\w+)#}/g,
                    function(match, key) { 
                        return typeof data[key] === undefined ? '' : data[key];
                    });
            },
            listPart: function(data) { 
                var s = document.createElement('div');
                var template = [
                    '<h1> this is a template create by {#name#} </h1>',
                    '<p> 今天的天气是{#weather#}</p>'
                ].join('');
                s.innerHTML = this.formatString(template, data);
                return s;
            },
            init: function(data) { 
                this.root.appendChild(this.listPart(data));
            }
        };
    
        A.init({ 
            name: 'xiaoT',
            weather: '晴天'
        });
    };
    
    /*****************************************************************/
    
    // 模板渲染方法
    A.formatString = function(str, data) { 
        return str.replace(/\{#(\w)#\}/g,
            function(match, key) { 
                return typeof data[key] === 'undefined' ? '' : data[key];
            });
    }
    
    // 模板生成器
    A.view = function(name) { 
        var v = { 
            code: '<pre><code>{#code#}</code></pre>',
            img: '<img src="{#src#}" alt="{#alt#}" title="{#title#}" />',
            part: '<div id="{#id#}" class="{#class#}">{#part#}</div>',
            theme: [
                '<div>',
                '<h1>{#title#}</h1>',
                '{#content#}',
                '</div>'
            ].join('')
        }
        if (Object.prototype.toString.call(name) === "[object Array]") { 
            var tpl = '';
            for (var i = 0, len = name.length; i < len; i++) { 
                tpl += arguments.callee(name[i]);
            }
            return tpl;
        } else { 
            return v[name] ? v[name] : ('<' + name + '>{#' + name + '#}</' + name + '>');
        }
    }