js之模塊通信

Vixb 發布于2019-08-20 17:36 / 910人閱讀

摘要：模塊通信實現功能預覽視頻模塊加載器使用目錄結構具體代碼

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 通信模塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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