Показать сообщение отдельно
  #21 (permalink)  
Старый 23.07.2015, 18:29
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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();
		});
	}
}


Если я Вас правильно понял и улучшил код, то, если не сложно, подскажите, что еще можно исправить/улучшить?

Последний раз редактировалось Lemme, 23.07.2015 в 18:36.
Ответить с цитированием