js組件之間的通訊

應用場景：

1.在刷微博的時候，滑到某個頭像上，會出現一張usercard（用戶名片）, 微博列表區有這個usercard， 推薦列表也有這個usercard，評論區也有。

2.在網上購物時，購物車安靜的停留在頁面的角落裏，不聲不響。你在頁面上買了零食買了書，購物車仍是安靜的呆着，猛然間點開一看，安靜的購物車已經躺滿了。

以上兩種，在模塊化滿天飛的今天，固然不可能面向過程的一一開發，你不能在微博列表，微博推薦和評論中逐一把用戶名片功能開發一遍。實際上，常見

的作法是將usercard做爲一個組件，固然，comment也是一個組件。購物車也是一個組件。怎麼能夠作到鼠標放到評論和回覆的用戶頭像上顯示名片呢？這裏就涉及到了組件之間互相通訊的機制。

組件的通訊方法有多種，API 觀察者 均可以。最好的方案我認爲是使用事件機制。

全部組件之間能夠經過一個叫eventbus通用組件進行信息的交互。

1. 在usercard組件中，能夠監聽 eventbus 的一個 usercard:show 事件。

2. 在須要展現usercard的組件中，能夠觸發eventbus的這個事件，必要的話傳入對應的參數。

其實以前的時候也常常接觸這樣的用法，此次從一個博客中看到，就有了本身動手寫的想法，一寫之下發現也很簡單，不知道是否是還有不少本身目前沒想到的，先記錄下來。

先看下這個事件機制組件（AMD規範下的代碼）

define(function (require) {
    var config = {};

    // 用於事件的存儲;
    config.eventList = {};

    /*
    * 事件定義
    * @param {string} 事件的名稱；
    * @param {function} function
     */
    config.on = function (name, func) {
        var me = this;
        if (!me.eventList[name]) {
            me.eventList[name] = func;
        }
        else {
            alert('這個方法名已經被用過了，請換一個名字');
        }
    };

    /*
    * 事件觸發
    *@param {string} 事件名稱;
    *@param {obj} 事件中的參數
     */
    config.emit = function (name, data) {
        var me = this;
        if (me.eventList[name]) {
            me.eventList[name](data);
        }
        else {
            alert('沒有找到對應的方法');
        }
    };

    return config;
});

一個是定義，一個是觸發。看起來很簡單的樣子。如今寫兩個組件來試一下吧

第一個組件，usercard，須要在這裏定義 usercard:show事件。

define(function (require) {
    var eventBus = require('eventBus');
    var config = {};

    config.add = function () {
        var obj = {
            name: 'usercard',
            type: 'mouseover'
        };
       // 這裏定義eventbus的事件
        eventBus.on('usercard:show', function (data) {
            obj = $.extend(obj, data);
            data.node.title = data.sid;
            data.node.style.backgroundColor = 'red';
        });
    };

    return config;
})

再寫一個組件 comment 用於觸發eventbus的

define(function (require) {
    var eventBut = require('eventBut');
    var config = {};

    var DomEvent = {

    };

    function domEvents() {
        $("#commentList").delegate('dt', 'click', function (e) {
            var target = e.target;
            var sid = target.getAttribute('sid');
           // 觸發事件
            eventBut.emit('usercard:show',{
                sid: sid,
                node: target
            });
        });
    }

    config.init = function () {
        domEvents();
    }

    return config;

});

寫一個頁面 來加載

<script>
    require(['comment', 'userCard'], function (comment, usercard) {
        usercard.add();
        comment.init();
    })
</script>

測試了一下 是能夠的~~