Столкнулся с проблемой, есть некая навигация, работает навигация с jsобъектом router, при клике на которую ajax с сервера загружается опр. модуль (html, js, css файлы обернутые в div#module).
Проблема заключается в том что, зайдя в один модуль допустим добавления новой страницы, и перейдя в другой модуль например dashboard и после чего вернувшись обратно в модуль добавления страницы, все js действия выполняются 2 раза. Т.е сам скрипт посути весь модуль находится в который при переходе к другому модулю очищается, т.е физически скриптов на странице нет, но они выполняются. Это как я понял особенность JavaScript, так как решить проблему чтобы js объект удалялся? повторения касаются одного javascipt "класса" объекта, пример ниже:
Это "класс" объект
function Router (){
// объект
var it = this;
// Элемент события
this.element = null;
// ответ сервера
this.data = null;
// обращаться по адресу
this.url = '/';
// Статус присутствия кеша
this.cache = false;
// Время хранения кеша
this.time = 3600;
// Включение cache
this.cacheEnabler = false;
// Событие
this.eventDOM = 'click';
// Класс элемента события
this.classDOM = '';
// Активация истории
this.historyEnabler = true;
// Тип Ajax запроса
this.type = 'GET';
// Настройка ajax запроса
this.param = {
url: '/' , // URL страница
module: '', // Вызов модуля
type: 'router' , // Тип события
data: {} // Передаваемые параметры
};
// Объект ajax loading
this.nanobar = new Nanobar({
bg: '#F4485D',
target: document.getElementById('myDivId')
});
// Метод до отправки Ajax
this.doAjax = function (){
};
// Старт модуля
this.run = function (param){
// Тип события и элемент события
this.eventDOM = param.eventDOM || 'click';
this.classDOM = param.classDOM || '';
// Ловим событие на всем DOM
this.eventAjax();
};
this.eventAjax = function (){
// Тут произвольный код касающийся события всего запроса
$('body').on(this.eventDOM, this.classDOM, function (event){
it.nanobar.go(10);
// Элемент события
it.element = $(this);
// Делаем некоторые манипуляции до отправки
it.doAjax();
it.nanobar.go(45);
// Отправляем Ajax запрос на сервер
it.ajax();
// Сохраняем в историю
it.historyApi();
// Останавливаем всплытие
event.preventDefault();
});
};
// Метод отправки ajax запросов
this.ajax = function (){
// Проверяем присутствие кешированной копии
this.storage();
// Если есть кешированная копия, показываем ее
if (this.cache){
this.successParent();
return true;
}
$.ajax({
url: it.param.url,
data: {
type: it.param.type,
module: it.param.module,
data: it.param.data // дополнительные запросы
},
type: it.type,
dataType: 'json',
success: function (data){
// Ответ сервера
it.data = data;
// основной функционал
it.successParent();
}
});
};
// Основаная обертка при поступлении ответа с сервера
this.successParent = function(){
// При ответе, загруза идет дальше
this.nanobar.go(65);
// Сохранение локальной копии кеша
this.saveCache();
// Произвольный код, зависит от поставленой задачи
this.stop();
// завершение лоадера
this.nanobar.go(100);
};
// Произвольный код по завершениею ajax запроса
this.stop = function(){
};
// History API - создание системы вперед = назад
this.historyApi = function () {
if (!this.historyEnabler) return false;
history.pushState({foo: 'febox'}, 'Title', '/' + this.param.module + '/' + this.param.data.dashboard_module);
};
// LocalStorage Caching
this.storage = function (){
if (!this.cacheEnabler) return false;
// key
var url = it.module;
// Если присутствует кешированный модуль страницы, выдаем его
if ($.jStorage.get(url)){
// Есть кешированная копия
it.cache = true;
// Вытаскиваем кеш
it.data = $.jStorage.get(url);
} else {
// Сохраняем резервную копию
it.cache = false;
}
};
// Метод сохраняет локальную копию страницы
this.saveCache = function (){
if (!this.cacheEnabler) return false;
// Сохраняем только в том случае если нет сохраненной копии
if (it.cache) return false;
// Проверяем есть ли место для хранения в localStorage
if (!$.jStorage.storageAvailable()){
// Если нет, чистим localstorage
$.jStorage.flush();
}
var key = it.module;
var value = it.data;
$.jStorage.set(key, value, { TTL: it.time });
};
// маршрутизация страниц
this.start = function (){
// код
}
}
А это код модуля добавления страницы, вот именно он повторно отправляет Ajax запрос по несколько раз в зависимости сколько раз открыть модуль добавления страницы, хотя в html документе он 1 раз обозначен и при каждом переходе в навигации чистится и на место его приходят другие модули.
// Добавление нового элемента
var add = new Router ();
add.start = function (){
// Работаем с модулем
this.param.module = 'dashboard';
// Действия по завершению
this.stop = function (){
var module = $('.columb-content');
// Очищаем DOM от предыдущего модуля
module.empty();
// вставка данных
module.append(this.data.module);
};
// Запускаем маршрутизацию
this.run({
eventDOM: 'click',
classDOM: '.add-new-page'
});
this.doAjax = function () {
// указываем модуль
this.param.data.dashboard_module = 'content';
this.param.type = 'add_new_page';
};
};
add.start();
UPD:
Я записал видео, где все прекрасно видно