如何在包含另一個php文件時構建javascript

Question

我正在嘗試構建一個小型Web應用程序，但我不清楚如何在頁面的不同部分之間進行通信。 我將使用我的特定功能來演示我的問題。

我的所有頁面都使用通用工具欄。 由於此工具欄用於多個頁面，因此它位於自己的PHP文件中，我使用它

<?php include("../toolbar.php"); ?>

工具欄包含登錄按鈕。 單擊時，將打開模式登錄對話框（在本例中為Facebook登錄對話框）。 當用戶登錄時，他或她的名字將顯示在工具欄中，登錄按鈕將被“注銷”按鈕替換。 由於無論用戶正在查看哪個頁面，此行為都是相同的，因此我創建了toolbar.js文件以顯示模態中的日志並相應地更新用戶名/按鈕。

但是，在大多數頁面上，登錄或退出工具欄還需要更新主頁面的內容。 我無法保證每個包含toolbar.php的頁面在登錄狀態發生變化時都必須執行任何操作，但大多數頁面會更改。

類似地，反過來也是可能的 - 某個頁面可能在工具欄外面有一個“登錄”按鈕。 使用它時，工具欄需要更新。

處理這個問題的最佳方法是什么？

目前的實施 - 這可能很糟糕......

在toolbar.js中，我基本上在用戶登錄時調用一個函數'userSignedIn'（以及注銷的等價物）。 toolbar.js，實現它本身（它需要更新其按鈕和用戶名標簽）。

然后，如果主頁面（讓我們稱之為mainPage.php）需要額外的任何東西，我將重新使用相同的功能來“粘貼”其他操作。 在加載該頁面時，我會執行以下操作：

var originalUserSignedIn = userSignedIn;
userSignedIn = function() {
    originalUserSignedIn();
    customUserSignedIn();
}

customUserSignedIn是mainPage.js中的一個函數，我在其中執行其他操作。 我還沒有實現相反的解決方案（從mainPage.php登錄需要更新toolbar.php）。

我猜想來自一個Objective-C背景，我正在嘗試類似於在方法實現中調用'super'的東西。

Answer 1

一種方法是在任何其他javascript之前初始化一個空數組來保存回調函數和sign函數來調用它們：

var userSignedInCallbacks = [];

var userSignedIn = function() {
    for (var i = 0; i < userSignedInCallbacks.length; i++) {
        userSignedInCallbacks[i]();
    }
}

然后，工具欄和主頁js都會將相應的回調添加到數組中：

userSignedInCallbacks.push(function() {
    // ...
});

最后，工具欄或主頁中的登錄操作都將只調用userSignedIn() 。

Answer 2

實現此目的的一種方法是使用publisher-subscriber模式處理頁面中不同模塊之間的通信，以便每個模塊僅耦合在事件接口上。

我在這里創建了一個非常簡單的例子 它不處理注銷過程，但您仍然可以看到事情的結構。

HTML

<div id="toolbar">
    <button class="login">Login</button>
</div>

<div id="another-section">
    <button class="login">Login</button>
</div>

<div id="login-dialog">
     <button class="login">Do login!</button>
</div>

JS

//in EventBus.js
var EventBus = {
    subscribers: {},
    publish: function (eventName) {
        var args = Array.prototype.slice.call(arguments, 1),
            subscribers = this.subscribers[eventName] || [],
            i = 0,
            len = subscribers.length,
            s;

        for (; i < len; i++) {
            s = subscribers[i];

            s.fn.apply(s.scope, args);
        }

    },
    subscribe: function (eventName, fn, scope) {
        var subs = this.subscribers[eventName] = this.subscribers[eventName]  || [];
        subs.push({ fn: fn, scope: scope });
    }
};

//in toolbar.js
function Toolbar(el, eventBus) {
    var $el = this.$el = $(el),
        $loginButton = $('button.login', $el);

    $loginButton.click(function () {
        eventBus.publish('userWantsToLogin');
    });

    eventBus.subscribe('userLoggedIn', function () {
        $loginButton.html('Logout');
        //change button handlers to handle logout...
    });
}

//in another-section.js
function AnotherSection(el, eventBus) {
    var $el = this.$el = $(el),
        $loginButton = $('button.login', $el);

    $loginButton.click(function () {
        eventBus.publish('userWantsToLogin');
    });

    eventBus.subscribe('userLoggedIn', function () {
        $loginButton.html('Logout');
        //change button handlers to handle logout...
    });
}

//in main.js
$(function () {
    var $loginDialog = $('#login-dialog');

    $loginDialog.dialog({ autoOpen: false});

    $('button.login', $loginDialog).click(function () {
        EventBus.publish('userLoggedIn');
    });

    EventBus.subscribe('userWantsToLogin', function () {
        $loginDialog.dialog('open');
    });

    new Toolbar('#toolbar', EventBus);
    new AnotherSection('#another-section', EventBus);
});