js之模块通信

Vixb 发布于2019-08-20 17:36 / 825人阅读

摘要：模块通信实现功能预览视频模块加载器使用目录结构具体代码

js模块通信 实现功能

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

模块加载器

使用require.js

目录结构

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

具体代码 index.html




    
    module 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
    };
});

GPU云服务器云服务器通信模块双向语音通信模块无线通信模块 webrtc 通信模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83712.html

【Node之web通信Socket.IO】

摘要：简介是的一个模块，他提供通过进行通信的一种简单方式，协议很复杂，但是提供了服务器和客户端双方的组件，所以只需要一个模块就可以给应用程序加入对的支持。而且还能支持不同的浏览器。它们之间有什么区别呢区别在于的是持久性的。环境：Node v8.2.1; Npm v5.3.0; OS Windows10 在web开发中，我们使用HTTP协议，HTTP协议是基于文本的单向通讯机制，当我们想要从...

xzavier 2019-08-21 16:57 评论0 收藏0
react组件通信实现表单提交

摘要：组件通信实现表单提交昨晚做了一个的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下。并称为前端大框架，就目前来看，尽管发布了也在今年月份发布了，更不在话下，大家要是想学习的话可以去官网学习。 react组件通信实现表单提交昨晚做了一个react的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下React。 showImg(https://segment...

LoftySoul 2019-08-20 18:16 评论0 收藏0
Electron 快速入门

摘要：当一个实例被销毁后，相应的渲染进程也会被终止。之所以命名为，主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后，会返回处理结果。简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰...

Drummor 2019-08-20 17:49 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
前端阅读笔记 2016-11-25

摘要：为了防止某些文档或脚本加载别的域下的未知内容，防止造成泄露隐私，破坏系统等行为发生。模式构建函数响应式前端架构过程中学到的经验模式的不同之处在于，它主要专注于恰当地实现应用程序状态突变。严重情况下，会造成恶意的流量劫持等问题。今天是编辑周刊的日子。所以文章很多和周刊一样。微信不能发链接，点了也木有用，所以请记得阅读原文~ 发个动图娱乐下：使用 SVG 动画制作游戏使用 GASP ...

KoreyLee 2019-08-20 12:32 评论0 收藏0