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

本文介绍了一种名为简单模板模式的设计模式，通过格式化字符串来优化视图创建过程，避免大量DOM节点操作，减少内存开销。文章展示了如何使用正则表达式替换字符串中的占位符，将数据动态插入到HTML中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//简单模板模式包含三部分：字符串模板库、格式化方法、字符串拼接

/**
* 简单模板模式，一个很有趣的模式
* 定义似乎是 通过格式化字符串拼凑出现视图，避免创建视图时的大量节点操作，优化内存开销
* 大约是用字符串拼出来，然后用正则替换数字部分，最后把他丢进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 + '>');
    }
}