设计模式知识连载（38）---委托模式:

最新推荐文章于 2022-07-08 11:17:53 发布

宇智波幽助

最新推荐文章于 2022-07-08 11:17:53 发布

阅读量192

点赞数

分类专栏：设计模式文章标签：设计模式委托模式

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78940859

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<body>


<h3>设计模式知识连载（38）---委托模式:</h3>
<p>
    多个对象接收并处理同一请求，他们将请求委托给另一个对象同一处理请求
</p>

<hr>

<div>
    <ul id = 'container'>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
    </ul>
</div>
<hr>
<div id="article">
    <p>第一段文字</p>
</div>

<hr>

<div id="btn_container">
    <button id="btn">demo</button>
</div>


<script type="text/javascript">



    /**
    *   案例一：点击日历，方式一：初始
    */
    // var ul = document.getElementById('container') ;
    // var li = document.getElementsByTagName('li') ;
    // var i = li.length -1 ;
    // for(; i >=0; i--) {
    //  li[i].onclick = function() {
    //      this.style.backgroundColor = 'red' ;
    //  }
    // }

    /**
    *   案例一：点击日历，方式一：委托模式
    */
    var ul = document.getElementById('container') ;
    ul.onclick = function(e) {
        var e = e || window.event ;
        var target = e.target || e.srcElement ;
        if(target.nodeName.toLowerCase() === 'li') {
            target.style.backgroundColor = 'red' ;
        }
    }


    /**
    *   案例二：，方式一：
    */
    var article = document.getElementById('article') ;
    article.onclick = function(e) {
        var e = e || window.event ;
        var target = e.target || e.srcElement ;
        if(target.nodeName.toLowerCase() === 'p') {
            target.innerHTML = '段落内容已修改' ;
        }
    }
    var p = document.createElement('p') ;
    p.innerHTML = '这是我新增加的段落'
    article.appendChild(p) ;


    /**
    *   案例三：，方式一：初始
    */
    var g = function(id) {
        return document.getElementById(id) ;
    }
    // g('btn').onclick = function() {
    //  g('btn_container').innerHTML = '触发了事件' ;
    // } ;

    /**
    *   案例三：，方式二：进阶
    */
    // g('btn').onclick = function(e) {
    //  g('btn_container').innerHTML = '触发了事件' ;
    //  g('btn') = null ;
    // }

    /**
    *   案例三：，方式三：进阶
    */
    g('btn_container').onclick = function(e) {
        var e = e || window.event ;
        var target = e.target || e.srcElement ;
        if(target.id === 'btn') {
            g('btn_container').innerHTML = '触发了事件' ;
        }
    } ;

    /**
    *   案例四：数据分发，方式一：初始
    */
    // 请求banner模块数据
    $.get('./deal.php?q=banner', function(res) {
        // 处理banner模块逻辑
    }) ;
    // 请求aside模块数据
    $.get('./deal.php?q=aside', function(res) {
        // 处理aside模块逻辑
    }) ;
    // 请求article模块数据
    $.get('./deal.php?q=article', function(res) {
        // 处理article模块逻辑
    }) ;
    // 请求member模块数据
    $.get('./deal.php?q=member', function(res) {
        // 处理member模块逻辑
    }) ;
    // 请求message模块数据
    $.get('./deal.php?q=message', function(res) {
        // 处理message模块逻辑
    }) ;

    /**
    *   案例四：数据分发，方式二：进阶
    */
    var Deal = {
        banner : function() {
            // 处理banner模块逻辑
        },
        aside : function() {
            // 处理aside模块逻辑
        },
        article : function() {
            // 处理article模块逻辑
        },
        member : function() {
            // 处理member模块逻辑
        },
        message : function() {
            // 处理message模块逻辑
        },
    }
    $.get('./deal.php?', function(res) {
        // 数据拆包分发
        for(var i in res) {
            Deal[i] && Deal[i](res[i]) ;
        }
    }) ;
</script>    

</body>