自定义广播模式

最新推荐文章于 2024-04-28 16:41:42 发布

一日之寒

最新推荐文章于 2024-04-28 16:41:42 发布

阅读量716

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript jQuery 广播

本文链接：https://blog.youkuaiyun.com/wlvgfe/article/details/52245905

Javascript 同时被 2 个专栏收录

1 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

在android程序中通过注册广播接收者，当系统中发出相应广播后，如果程序中注册了相应的广播接收者，那么就可以进行相应的后续处理操作，例如当系统接收到短信之后，如果注册了与之对应的广播接收者，应用程序就可以接收到这个广播，并进行相应处理，例如保存短信到云上
其实javascript端通过事件同样可以实现这样的功能，简单来说，当我们点击一个绑定了点击事件的按钮之后，就会触发这个按钮的点击事件，进行相应的处理
通过jQuery可以方便的实现自定义事件的事件绑定与触发，进行简单的封装就可以实现简单的类似广播功能

示例Html代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试自定义广播机制</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/modules.js"></script>
    <script type="text/javascript" src="./js/test1.js"></script>
    <style type="text/css">
        .test-list{
            max-width: 400px;
        }
        .test-list li{
            padding:10px;
            list-style: none;
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <div class="test-list">
        <ul>
            <li conversationId=1 data-target="conversation">你好</li>
            <li conversationId=2 data-target="conversation">你好</li>
            <li conversationId=3 data-target="conversation">你好</li>
            <li conversationId=4 data-target="conversation">你好</li>
        </ul>
    </div>
</body>
</html>

javascript代码

modules.js

function BroadCastReceiver(selector){
    var that=this;
    this.registerReceiver=function(action,callback){
        $(document).on(action,selector,callback);
    }
    this.unregisterReceiver=function(action){
        $(document).off(action,selector);
    }
}

function BroadCaster(selector){
    var that=this;
    this.sendBroadCast=function(intent){
        if(!intent instanceof Intent){
            throw new Error("not Intent instanceof object");
        }
        var action=intent.getAction();
        var data=intent.getExtras();
        var filter=intent.getFilter();
        var _targetSelector=(selector!==filter && filter)?
            filter:selector;
        $(_targetSelector).trigger(action,data);
        return that;
    }
}

function Intent(){
    var that=this;
    var _action=null;
    var _filter=null;
    var _data={};
    this.setAction=function(action){
        _action=action;
        return that;
    }
    this.getAction=function(){
        return _action;
    }
    this.setFilter=function(filter){
        _filter=filter;
        return that;
    }
    this.getFilter=function(){
        return _filter;
    }
    this.putExtra=function(name,value){
        _data[name]=value;
        return that;
    }
    this.getExtras=function(){
        return _data;
    }
}

function Shelf(selector,options){
    var that=this;
    var _selector=options.hasOwnProperty("itemSelector")?
        options.itemSelector:null;
    BroadCastReceiver.apply(this,[_selector])
    BroadCaster.apply(this,[_selector]);
}

(function($){
    $.fn.shelf=function(options){
        var DEFAULT={},
            _config=$.extend({},DEFAULT,options),
            _selector=$(this)._selector;
        var _shelf=new Shelf(_selector,_config);
        console.log(_shelf);
        return _shelf;
    }   
})(jQuery);

test1.js

var shelf=$(".test-list").shelf({
    "itemSelector":"[data-target='conversation']"
})
shelf.registerReceiver("attribute-update",function(event,attrs){
    var conversationId=attrs.conversationId;
    $('[conversationId="'+conversationId+'"]').attr({
        "style":"background:red"
    });
})

$(document).on("click","[data-target='conversation']",function(){
    var conversationId=$(this).attr("conversationId");
    var intent=new Intent();
    intent.setAction("attribute-update").putExtra("conversationId",conversationId)
        .setFilter("[conversationId='"+conversationId+"']");
    console.log(intent);
    shelf.sendBroadCast(intent);
})