包含另一个 php 文件时如何构建 javascript [英] How to structure javascript when including another php file

问题描述

我正在尝试构建一个小型 Web 应用程序，但我不清楚如何在页面的不同部分之间进行通信.我将使用我的特定功能来演示我的问题.

I am attempting to build a small web application but I'm not clear how to communicate between different parts of the page. I will use my specific functionality to demonstrate my question.

我的所有页面都使用通用工具栏.由于此工具栏在多个页面上使用，因此它位于自己的 PHP 文件中，我使用

All of my pages use a generic toolbar. Since this toolbar is used on multiple pages, it is in its own PHP file, which I include using

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

工具栏包括一个登录按钮.单击时，将打开一个模式登录对话框(在本例中为 Facebook 登录对话框).当用户登录时，他或她的名字会显示在工具栏中，并且登录按钮被注销"按钮取代.由于无论用户查看哪个页面，此行为都是相同的，因此我创建了一个 toolbar.js 文件来以模式显示登录并相应地更新用户名/按钮.

The toolbar includes a log in button. When clicked, this opens a modal login dialog (in this case the Facebook login dialog). When a user logs in, his or her name is displayed in the toolbar, and the log in button is replaced by a 'logout' button. Since this behavior is the same no matter which page the user is viewing, I created a toolbar.js file to display the log in modal and update the username/button appropriately.

但是，在大多数页面上，从工具栏登录或退出也需要更新主页面的内容.我不能保证每个包含 toolbar.php 的页面在登录状态改变时都必须做任何事情，但大多数都会.

However, on most pages, logging in or out from the toolbar needs to also update the contents of the main page. I can not guarantee that every page that includes toolbar.php will have to do anything when the log in status changes, but most will.

同样，反过来也是可能的——某个页面可能在工具栏外有一个登录"按钮.使用时，工具栏需要更新.

Similarly, the reverse is possible - a certain page might have a 'log in' button outside the toolbar. When this is used, the toolbar needs to update.

处理这个问题的最佳方法是什么?

What is the best way to handle this?

当前的实现 - 这可能很糟糕......

Current implementation - this might be awful…

在toolbar.js 中，我基本上是在用户登录时调用一个函数userSignedIn"(以及注销的等价物).toolbar.js，自己实现这个(需要更新它的按钮和用户名标签).

In toolbar.js I am basically calling a function, 'userSignedIn', whenever the user logs in (and an equivalent for log out). toolbar.js, implements this itself (it needs to update its button and user name label).

然后，如果主页(我们称之为 mainPage.php)需要任何额外的东西，我会重新使用这个相同的功能来增加"额外的操作.在加载该页面时，我执行以下操作:

Then, if the main page (lets call it mainPage.php) needs to anything additional, I am re-using this same function to 'tack on' the additional actions. On load of that page, I do the following:

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

customUserSignedIn 是 mainPage.js 中的一个函数，我在其中执行其他操作.我还没有实现相反的解决方案(从mainPage.php登录需要更新toolbar.php).

customUserSignedIn is a function within mainPage.js, where I perform the additional actions. I have not yet implemented a solution for the opposite (sign in from mainPage.php needs to update toolbar.php).

我想来自 Objective-C 的背景，我正在尝试类似于在方法实现中调用super"的东西.

I guess coming from an objective-C background, I am attempting something analogous to calling 'super' in a method implementation.

推荐答案

一种方法是在任何其他 javascript 之前初始化一个空数组来保存回调函数和调用它们的符号函数:

One way to do it is to initialize an empty array to hold callback functions and the sign function to call them, before any of the other javascript:

var userSignedInCallbacks = [];

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

然后，工具栏和主页 js 都会将它们适当的回调添加到数组中:

Then, toolbar and main page js will both just add their appropriate callbacks to the array:

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

最后，工具栏或主页中的登录操作都将调用 userSignedIn().

Finally, the login actions in either the toolbar or main page will both just call userSignedIn().

这篇关于包含另一个 php 文件时如何构建 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！