js之模塊通信

Vixb 發(fā)布于2019-08-20 17:36 / 903人閱讀

摘要：模塊通信實(shí)現(xiàn)功能預(yù)覽視頻模塊加載器使用目錄結(jié)構(gòu)具體代碼

js模塊通信 實(shí)現(xiàn)功能

預(yù)覽視頻: http://7fvgk8.com1.z0.glb.clo...

模塊加載器

使用require.js

目錄結(jié)構(gòu)

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

云服務(wù)器 GPU云服務(wù)器通信模塊雙向語音通信模塊無線通信模塊 webrtc 通信模塊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83712.html

上一篇：原生js實(shí)現(xiàn)簡單的鏈?zhǔn)讲僮?/a>

相關(guān)文章

【Node之web通信Socket.IO】

摘要：簡介是的一個模塊，他提供通過進(jìn)行通信的一種簡單方式，協(xié)議很復(fù)雜，但是提供了服務(wù)器和客戶端雙方的組件，所以只需要一個模塊就可以給應(yīng)用程序加入對的支持。而且還能支持不同的瀏覽器。它們之間有什么區(qū)別呢區(qū)別在于的是持久性的。環(huán)境：Node v8.2.1; Npm v5.3.0; OS Windows10 在web開發(fā)中，我們使用HTTP協(xié)議，HTTP協(xié)議是基于文本的單向通訊機(jī)制，當(dāng)我們想要從...

xzavier 2019-08-21 16:57 評論0 收藏0
react組件通信實(shí)現(xiàn)表單提交

摘要：組件通信實(shí)現(xiàn)表單提交昨晚做了一個的例子，主要實(shí)現(xiàn)的是提交表單實(shí)現(xiàn)評論的功能，在做之前先簡單介紹一下。并稱為前端大框架，就目前來看，盡管發(fā)布了也在今年月份發(fā)布了，更不在話下，大家要是想學(xué)習(xí)的話可以去官網(wǎng)學(xué)習(xí)。 react組件通信實(shí)現(xiàn)表單提交昨晚做了一個react的例子，主要實(shí)現(xiàn)的是提交表單實(shí)現(xiàn)評論的功能，在做之前先簡單介紹一下React。 showImg(https://segment...

LoftySoul 2019-08-20 18:16 評論0 收藏0
Electron 快速入門

摘要：當(dāng)一個實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。之所以命名為，主要是為了與主進(jìn)程這個概念對應(yīng)。部分在事件觸發(fā)后才能使用。當(dāng)全部窗口關(guān)閉時退出。主進(jìn)程接收到消息并處理之后，會返回處理結(jié)果。簡介 Electron 是一個可以使用 Web 技術(shù)如 JavaScript、HTML 和 CSS 來創(chuàng)建跨平臺原生桌面應(yīng)用的框架。借助 Electron，我們可以使用純 JavaScript 來調(diào)用豐...

Drummor 2019-08-20 17:49 評論0 收藏0
前端每周清單半年盤點(diǎn)之 Angular 篇

摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
前端閱讀筆記 2016-11-25

摘要：為了防止某些文檔或腳本加載別的域下的未知內(nèi)容，防止造成泄露隱私，破壞系統(tǒng)等行為發(fā)生。模式構(gòu)建函數(shù)響應(yīng)式前端架構(gòu)過程中學(xué)到的經(jīng)驗(yàn)?zāi)Ｊ降牟煌幵谟冢饕獙Ｗ⒂谇‘?dāng)?shù)貙?shí)現(xiàn)應(yīng)用程序狀態(tài)突變。嚴(yán)重情況下，會造成惡意的流量劫持等問題。今天是編輯周刊的日子。所以文章很多和周刊一樣。微信不能發(fā)鏈接，點(diǎn)了也木有用，所以請記得閱讀原文~ 發(fā)個動圖娛樂下：使用 SVG 動畫制作游戲使用 GASP ...

KoreyLee 2019-08-20 12:32 評論0 收藏0