Подскажите пожалуйста, почему происходит такое поведение кода. Я только учусь и насколько я понял, создавать классы от одно родительского класса это норма. Пытаюсь сделать класс наследник ImageList, c методом, который берет данные из вот этого config.json по сути это src и href для будущего img обернутого в ссылку.
{
"min": "/images/small/image1.jpg",
"max": "/images/big/image1.jpg"
}
На выходе планирую получить вот это:
<li><a href="/images/big/image1.jpg"><img src="/images/small/image1.jpg" alt="image2"></a></li>
Извиняюсь за избыток кода, но вот исходник:
//1.Класс Conrainer
var Container = function (id, className, html) {
this.id = id || '';
this.className = className || '';
};
Container.prototype.show = function () {
document.write(this.render());
};
Container.prototype.remove = function () {
document.getElementById(this.id).remove()
};
//_______________________________________________________
//2.Класс Меню
var Menu = function (id, className, items) {
Container.call(this, id, className,items);
this.items = items;
};
Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;
Menu.prototype.render = function () {
var result = '<ul id="' + this.id + '"class="' + this.className + '">';
for (var i = 0; i < this.items.length; i++) {
result += this.items[i].render();
}
result += '</ul>';
return result;
console.log(result);
};
//________________________________________________
//3.Класс ImageList наследник класса MenuItem
var ImageList = function (id, name) {
Container.call(this);
this.id = id;
this.name = name;
//атрибуты которые присвоим после загрузки config.json
this.init();
this.load();
this.href= '';
this.src = '';
};
ImageList.prototype = Object.create(Container.prototype);
ImageList.prototype.constructor = ImageList;
//________Метод init__________
ImageList.prototype.init = function () {
this.xhr = false;
if (window.XMLHttpRequest) {
this.xhr = new XMLHttpRequest();
}
if (!this.xhr) {
alert('Не удалось создать запрос');
}
this.xhr = new XMLHttpRequest();
this.xhr.onreadystatechange = this.loadImagePath.bind(this);
}
ImageList.prototype.load = function () {
var url = 'http://localhost:8888/config.json';
this.xhr.open('GET', url, true);
this.xhr.send();
}
//метод для загрузки json конфига
ImageList.prototype.loadImagePath = function () {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.responseText);
this.href = data.max;
this.src = data.min;
console.log('success');
}
} else {
console.log('error');
}
}
//собственный метод render
ImageList.prototype.render = function () {
result = '<li><a href="'+this.href+'"><img src="'+this.src+'" alt="' + this.name + '"></a></li>';
console.log(result);
return result;
}
//__________________________________________________
//Создаем конфиг
var items = [
new ImageList('1', 'image1'),
new ImageList('2', 'image2')
];
//____________________________________________________
//Вывод на экран
var menu = new Menu('menu_id', 'menu_class', items);
menu.show();
var list1 = new ImageList('1','image1');
//list1.show();
Логика такая, есть класс ImageList, у него свойства href и src, методом init в этом классе создаю метод xhr(не знаю правильно ли так говорить), далее вызываю метод load для получения данных из config.json и записываю их в свойства this.src и this.href. В конце я создаю в массиве два новых экземпляра ImageList и передаю в класс Menu для записи в DOM методом show(); Все выводится, но вместо src и href у новых экземпляров ImageList свойства this.src и this.href - undefined; Если я просто в консоли после загрузки страницы создаю экземпляр руками, вот так:
var list1 = new ImageList('2','image2');
console.log(list1);
<li><a href="/images/big/image1.jpg"><img src="/images/small/image1.jpg" alt="image2"></a></li>
То в таком случае свойства this.href и this.src заполнены верно, почему так происходит? Добавил в метод loadImagePath() обработку ошибки, что бы в консоль выводил, в итоге выводит 1success 2error. В общем что я делаю не так?
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости