js之模块通信

js模块通信

实现功能

预览视频: http://7fvgk8.com1.z0.glb.clo...

模块加载器

使用require.js

目录结构

- index.html
- js
-  | ----lib
- ------  | ---- notify.js
- ------ app.js
- ------ greet.js
- ------ name.js

具体代码

index.html

    
    
    


    

        start to notify
        

    
    

js/app.js

define(['greet'], function (greet) {
    greet.init();
});

js/greet.js

define(['lib/notify', 'name'], function (notify, name) {
    function init () {
        var content = 'hello ';
        var notifyEle = document.getElementById('notify');
        var greetEle = document.getElementById('greet');

        name.receive();
        notifyEle.addEventListener('click', function () {
            notify.send(['greet'], 'getName', {ele: greetEle, preStr: (content + ' ')});
        }, false);
    }

    return {
        init: init
    }
});

js/name.js

define(['lib/notify'], function (notify) {
    function receive () {
        notify.receive(['greet'], 'getName', function (data) {
            data.ele.innerHTML = data.preStr + 'mumu';
        });
    }
    return {
        receive: receive
    }
});

js/lib/notify.js

define(function () {
    var g = window;
    g.notifyReceiverPool = g.notifyReceiverPool || {};

    function send (modules, event, data) {
        modules.forEach(function (module) {
            g.notifyReceiverPool[module][event].callback && g.notifyReceiverPool[module][event].callback(data);
        });
    }

    function receive (modules, event, callback) {
        if (!callback) {
            return;
        }

        modules.forEach(function (module) {
            g.notifyReceiverPool[module] = g.notifyReceiverPool[module] || {};
            g.notifyReceiverPool[module][event] = g.notifyReceiverPool[module][event] || {};
            g.notifyReceiverPool[module][event].callback = callback;
        });
    }

    return {
        send: send,
        receive: receive
    };
});