tysonfury2015, надеюсь, когда нибудь ты отойдешь от той "хрени", которую ты употребляешь, ибо такую ересь можно "нести" только в нетрезвом состоянии.
По делу:
tsigel, попробовал учесть все ваши замечания, кроме методов в 3-4 строки =). Ну и немного изменил хранилище данных (точнее его наполнение), ибо столкнулся с проблемой его переполнения.
class Tysonfury2015_idi_mimo{
/**
* @constructor
* @param {Object} config{url: 'path/to/json', perPage: Integer, output: { container: 'element class/id'}}
*/
constructor(config){
this.config = config;
this.init();
this.storageToken = 'Data__' + Math.round(new Date().getTime() / 1000);
}
/**
* Получет данные в формате JSON по адресу this.config.url
*
* @param {Callback}
*/
getData(success){
fetch(this.config.url)
.then((response)=>{
if (response.status !== 200){
console.error('Response error! Status - '+response.status);
return;
}
response.json().then((response)=>{
success(response);
});
})
.catch((error)=>{
console.error(error);
});
}
/**
* Рабиваем массив с данными по страницам
*
* @param {Array}
*/
splitDataByPages(data){
let pages = [],
header = data.shift(),
numPages = Math.ceil(data.length / this.config.perPage);
for (let i = 0; i < numPages; i++){
pages[i] = [];
for(let j = 0; j < this.config.perPage; j++){
if (data.length === 0) break;
pages[i].push(data.shift());
}
}
this.putDataToStorage({header, pages});
}
/**
* Добавляет данные в sessionStorage
*
* @param data
*/
putDataToStorage(data){
sessionStorage.setItem(this.storageToken, JSON.stringify(data));
}
/**
* Возвращает данные из sessionStorage
*
* @return data
*/
getDataFromStorage(){
return JSON.parse(sessionStorage.getItem(this.storageToken));
}
/**
* Удаляет все данные из sessionStorage , которые относятся к этому классу
*/
clearStorage(){
Object.keys(sessionStorage)
.filter((key)=>{
return /^Data__\d+$/.test(key);
})
.forEach((key)=>{
sessionStorage.removeItem(key);
});
}
/**
* Генерирует основную структуру таблицы
* Таблица (table), заголовок(thead)
*/
makeTable(){
let table = document.createElement('table'),
thead = document.createElement('thead'),
tr = document.createElement('tr'),
header = this.getDataFromStorage().header;
for (let item of header){
let td = document.createElement('td');
td.innerHTML = item.title;
tr.appendChild(td);
}
thead.appendChild(tr);
table.appendChild(thead);
this.table = table;
}
/**
* Генерирует таблицу (tbody) по странице num
*
* @param {Number} num - текущая страница
*/
setPage(num = 1){
num = num < 1 || typeof num !== 'number' ? 1 : num >= this.getDataFromStorage().pages.length ? this.getDataFromStorage().pages.length : num;
let page = this.getDataFromStorage().pages[num - 1],
tbody = document.querySelector(this.config.output.container+' table tbody');
if (!tbody){
tbody = document.createElement('tbody');
}
else {
tbody.innerHTML = '';
}
page.forEach((row)=>{
let tr = document.createElement('tr');
row.forEach((cell)=>{
let td = document.createElement('td');
td.innerHTML = cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
this.table.appendChild(tbody);
}
/**
* Генерирует структуру постраничной навигации
*/
makePagination(){
let numPages = this.getDataFromStorage().pages.length;
if (numPages <= 1) return;
let items = document.createElement('ul');
for (let i = 0; i < numPages; i++){
let item = document.createElement('li');
item.innerHTML = i+1;
items.appendChild(item);
}
items.firstChild.classList.add('active');
this.pagination = items;
}
/**
* Устанавливает слушателей событий
*/
setListeners(){
if (this.pagination){
this.pagination.addEventListener('click', (e)=>{
if (e.target.tagName !== 'LI' || e.target.classList.contains('active')) return false;
document.querySelector(this.config.output.container+' ul .active').classList.remove('active');
e.target.classList.add('active');
this.setPage(+e.target.innerHTML);
});
}
}
/**
* Последовательно вызывает методоы необходимые для генерации, обработки таблицы и навигации по ней
*/
init(){
this.clearStorage();
this.getData((data)=>{
this.splitDataByPages(data);
this.makeTable();
this.setPage(1);
this.makePagination();
let container = document.querySelector(this.config.output.container);
container.appendChild(this.table);
if (this.pagination){
container.appendChild(this.pagination);
}
this.setListeners();
});
}
}
Если я Вас правильно понял и улучшил код, то, если не сложно, подскажите, что еще можно исправить/улучшить?