Question

我试图为我正在开发的某些网页创建一个模块化登录脚本。简而言之，我在主页面上加载脚本，从按下按钮触发主signIn功能，并在主页面上创建一个由外部signIn.js管理的重叠div。外部js设置了一些将在主页面中使用的sessionStorage变量。

模块化的希望是让signIn.js处理来自数据库的身份验证，并使主页面根据需要执行登录过程（在此特定实例中，它为用户提供对其项目的访问权限）。理想情况下，由于其他项目目标，登录不会强制刷新主页面。

我遇到的问题是，如何在不破坏任何模块化感的情况下通知用户已登录的主页？

除了其他努力之外，最有希望的是尝试使用$(document).on('userSignedIn', function() {...});在主页面文档上创建自定义事件，但signIn.js显然无法触发此事件。

有关如何实现这一目标的任何建议，或者我只是完全错了？

修改
所以，这绝对是我遇到的范围相关问题。为了充实这个过程，如果有人发现它相关，signIn.js会向mainPage.html添加一个重叠div。 $("#signInContainerDiv").load("signIn.html")用于将登录表单加载到页面中。事实证明，当我尝试引用$(document)时，它使用的是signIn.html的文档，而不是mainPage.html。在实现之后，我刚刚在mainPage上创建了一个div（signInNotify），它将事件绑定到（$("#signInNotify").on("userSignedIn", function() {...});）并在signIn.js中触发它。

我自己的缺乏经验再次征服了我。

Answer 1

jQuery可以帮助你解决这个问题。以下是trigger

主页中的示例

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

jQuery Page Reference

Answer 2

另一种解决方案是使用像amplify.js这样的库，它具有发布/订阅功能，可用于实现＆＃34;观察者模式＆＃34;。您也可以为此实现自己的库，代码可能是这样的：

// the implementation
function Notify () {
    this.listeners = {};
}

Notify.prototype.subscribe = function (event, callback, context) {
    this.listeners[event] = this.listeners[event] || [];
    this.listeners[event].push({ callback: callback, context: context || null});
};

Notify.prototype.publish = function (event/*, args...*/) {
    var args = Array.prototype.slice.call(arguments, 1);
    (this.listeners[event] || []).forEach(function (x) {
        x.callback.apply(x.callback.context, args);
    });
};
// usage:
// an instance, or can be implemented as a singleton
var global_events = new Notify();
// wherever you want to be notified of login events
global_events.subscribe('login_success', function () {
    // do something with the arguments
}, myContext/*optional*/);
// after success login
global_events.publish('login_success', user_credentials, other_data);
// and all subscribers (listeners) will be called after this

我已将该代码用于类似目的，并且还使用了几次放大器，您可以阅读有关Amplify Pub/Sub的更多信息。

通知外部js更改的变量主页面

2 个答案: