动态展示图片与标题-优快云博客

本文介绍了一种使用JavaScript实现的动态展示图片与标题的方法。通过定义模板字符串与数据结构，可以轻松地在网页上更新显示内容。具体实现了根据不同数据动态生成HTML元素的功能。

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

###

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <!--@2018-6-15号-->
    <div id="product">
    </div>
    <script>
        function viewCommand(msg) {
            var tp1 = {
                product: [
                    '<div>',
                    '<img src="{#src#}"/>',
                    '<p>{#text#}</p>',
                    '</div>'].join(''),
                title: [
                    '<div class="title">',
                    '<div class="main">',
                    '<h2>{#title#}</h2>',
                    '<p>{#tips#}</p>',
                    '</div>',
                    '</div>'].join('')
            };
            html = "";
            function formateString(str, obj) {
                return str.replace(/\{#(\w+)#\}/g, function (match, key) {
                    return obj[key];
                });
            };
            var Action = {
                create: function (data, view) {
                    if (data.length) {
                        for (var i = 0, len = data.length; i < len; i++) {
                            html += formateString(tp1[view], data[i]);
                        }
                    } else {
                        html += formateString(tp1[view], data);
                    }
                },
                display: function (container, data, view) {
                    if (data) {
                        this.create(data, view);
                    }
                    document.getElementById(container).innerHTML = html;
                    html = '';
                }
            };

            msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
            Action[msg.command].apply(Action, msg.param);
        };

        var productData = [
            {
                src: 'command/02.jpg',
                text: '绽放的桃花'
            },
            {
                src: 'command/03.jpg',
                text: '阳光下的温馨'
            },
            {
                src: 'command/04.jpg',
                text: '镜头前的绿色'
            }
        ],
        titleData = {
            title: '夏日的一片温馨',
            tips: '暖暖的温情带给人们家的感受'
        };
        //viewCommand({
        //    command: 'create',
        //    param: [{
        //        src: 'command/01.jpg',
        //        text: '迎着朝阳的野菊花'
        //    }, 'product']
        //});
        viewCommand({
            command: 'display',
            param: ['product', productData, 'product']
        });
    </script>
</body>
</html>