js 面向对象编程设计模式--命令模式

最新推荐文章于 2020-08-20 11:28:29 发布

weixin_42975115

最新推荐文章于 2020-08-20 11:28:29 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏： js 面向对象设计模式

本文链接：https://blog.youkuaiyun.com/weixin_42975115/article/details/90747036

js 同时被 3 个专栏收录

29 篇文章

订阅专栏

面向对象

24 篇文章

订阅专栏

设计模式

23 篇文章

订阅专栏

本文介绍了一个使用命令模式的模块化JavaScript代码示例，通过创建和显示包含图片和文本的HTML元素，展示了如何利用命令模式来分离请求的发送者和接收者，使程序更加灵活和易于维护。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命令模式</title>
</head>
<style>
    #show div img{
        width: 50%;
        height: 500px;
    }
</style>
<body>
<div id="show"></div>
<script>
    //模块实现模块
    let viewCommand =(function () {
       let tpl = {
           //展示图片模块结构模板
           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) {
                // console.log(obj[key]);
                return obj[key];
            });
        }
            //方法的集合
            let Action ={
                create:function (data,view) {
                    if(data.length){
                        for(let i =0;i<data.length;i++){
                            //将格式化的字符串缓存到html中
                            html += formateString(tpl[view],data[i]);
                            console.log(html);
                        }
                    }else{
                        //格式化缓存
                        console.log(html);
                        html += formateString(tpl[view],data);
                    }
                },
                display:function (container,data,view) {
                    if(data){
                        this.create(data,view);
                    }
                    //展示模块
                    document.getElementById(container).innerHTML =html;
                    html ='';
                }
            };
        //命令接口
        return function excute(msg) {
            //解析命令
            msg.param = Object.prototype.toString.call(msg.param)==='[object Array]'?msg.param:[msg.param];
            Action[msg.command].apply(Action,msg.param);
        }

    })();
    // viewCommand({
    //     command:"create",
    //     param:[{
    //         src:"http://5b0988e595225.cdn.sohucs.com/images/20181026/0419d2e805484d1f828be3d4d1957339.jpeg",
    //         text:"初音"
    //     },'product']
    // });
    viewCommand({
        command:"display",
        param:[
            'show'
            ,{
            src:"http://5b0988e595225.cdn.sohucs.com/images/20181026/0419d2e805484d1f828be3d4d1957339.jpeg",
            text:"初音"
        },'product']
    });

</script>
</body>
</html>