js 观察者模式

javascript 技术

JavaScript

2020-05-15 12:26:55

298

作者:黑夜男神

html 代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>观察者模式</title>
        <style type="text/css">
            .main tr td{ border: 1px solid #ccc }
        </style>
        <script type="text/javascript" src="http://xipwang.cn/js/jquery.min.js"></script>
        <script type="text/javascript"></script>
        <table class="main"  align="center">
            <tr>
                <td><input type="checkbox" name="" id="checkall"><label>全选</label></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox"><label>这个也可以设置全选</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" class="checkbox">
                </td>
            </tr>

        </table>
    </head>
    <body>
    <script type="text/javascript">    
     $(function(){
             //发布订阅
             function  Obserable (){ 
                    this.handlers ={};
             }
             Obserable.prototype ={
                  constructor: Obserable, 
                  subscribe:function(type,callback){  //订阅
                      if( typeof this.handlers[type] == "undefined"){ //判断是否事件类型为undefined如果是则给它创建一个数组对象
                              this.handlers[type] =[];
                      };
                      this.handlers[type].push(callback)   //订阅消息添加进缓存列表  
                  },
                  publish:function(type){       //发布           
                      if(this.handlers[type] instanceof Array) {
                          var  handle = this.handlers[type];
                          for(var i =0 ; i< handle.length; i++){//查找执行对应的回调函数集合 
                                  handle[i](arguments[1]);  
                          }
                       }
                  }                 
               }
             var  pubsub = new Obserable()  //把Obserable实例化
           //第一种方法
             pubsub.subscribe("checkbox",function(result){    //在这里订阅主题
                 if(result){ // 都选上
                     $.each($(".checkbox"),function(){
                         $(this).prop("checked",true);
                     })
                 }else{     // 都不选
                     $.each($(".checkbox"),function(){
                         $(this).prop("checked",false);
                     })
                 }
             })

               // 通过观察全选按钮的$("#checkall")状态变化来发布 
             $("#checkall").change(function(){
                     pubsub.publish("checkbox",$(this).prop("checked"));
             })


             //第二种方法 订阅两种不同的主题
             pubsub.subscribe("checkbox:true",function(){  //第一个主题为全部选上             
                     $.each($(".checkbox"),function(){
                         $(this).prop("checked",true);
                     })                 
             })
             pubsub.subscribe("checkbox:false",function(){ //第二个主题为全部都不选          
                     $.each($(".checkbox"),function(){
                         $(this).prop("checked",false);
                     })                 
             })


             $("#checkall").change(function(){  // 通过观察全选按钮的状态变化来发布
                     var topic ="checkbox:"+$(this).is(':checked')
                     pubsub.publish(topic);

             })


             //当然也可以把$(".checkbox")任意一个元素来当做发布者
             $(".checkbox").eq(3).change(function(){  // 当然也可以来通过$(".checkbox").eq(3)的元素的变化来发布
                     var topic ="checkbox:"+$(this).is(':checked')
                     pubsub.publish(topic)                     
             })


     })
    </script>
    </body>
    </html>    

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号