Я пытаюсь создать небольшое веб-приложение, но я не понимаю, как общаться между различными частями страницы. Я буду использовать свои конкретные функции, чтобы продемонстрировать свой вопрос.
Все мои страницы используют общую панель инструментов. Поскольку эта панель инструментов используется на нескольких страницах, она находится в собственном 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).
Я предполагаю, что я исхожу из объективно-C-фона, я пытаюсь что-то аналогичное названию «супер» в реализации метода.
Один из способов сделать это – инициализировать пустой массив для хранения функций обратного вызова и функции знака для их вызова перед любым другим javascript:
var userSignedInCallbacks = []; var userSignedIn = function() { for (var i = 0; i < userSignedInCallbacks.length; i++) { userSignedInCallbacks[i](); } }
Затем панель инструментов и главная страница js оба просто добавят свои соответствующие обратные вызовы в массив:
userSignedInCallbacks.push(function() { // ... });
Наконец, действия входа на панели инструментов или на главной странице userSignedIn() только userSignedIn() .
Один из способов сделать это – использовать шаблон подписчика издателя для обработки сообщений между различными модулями на вашей странице, чтобы каждый модуль соединялся только с интерфейсом событий.
Я создал здесь очень простой пример. Он не обрабатывает процесс выхода из системы, но вы все еще можете видеть, как вещи могут быть структурированы.
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); });