Как разобраться с конструкцией javascipt'a в Bitrix?

Question

[Андрей Белый]

Добры день
Только начинаю разбираться с javascript и есть следующий вопрос:
В компоненте sale.order.ajax, файле order_ajax.php есть следующая конструкция:

createBasketItemImg: function (data) {
			if (!data)
				return;
			var logoNode, logotype;
			logoNode = BX.create('DIV', { props: { className: 'bx-soa-item-imgcontainer' } });

			if (data.PREVIEW_PICTURE_SRC && data.PREVIEW_PICTURE_SRC.length)
				logotype = this.getImageSources(data, 'PREVIEW_PICTURE');
			else if (data.DETAIL_PICTURE_SRC && data.DETAIL_PICTURE_SRC.length)
				logotype = this.getImageSources(data, 'DETAIL_PICTURE');

			if (logotype && logotype.src_2x) {
				logoNode.setAttribute('style',
					'background-image: url(' + logotype.src_1x + ');' +
					'background-image: -webkit-image-set(url(' + logotype.src_1x + ') 1x, url(' + logotype.src_2x + ') 2x)'
				);
			}
			else {
				logotype = logotype && logotype.src_1x || this.defaultBasketItemLogo;
				logoNode.setAttribute('style', 'background-image: url(' + logotype + ');');
			}

			if (this.params.HIDE_DETAIL_PAGE_URL !== 'Y' && data.DETAIL_PAGE_URL && data.DETAIL_PAGE_URL.length) {
				logoNode = BX.create('A', {
					props: { href: data.DETAIL_PAGE_URL },
					children: [logoNode]
				});
			}
			return BX.create('DIV', {
				props: { className: 'bx-soa-item-img-block' },
				children: [logoNode]
			});
		},

В данный момент меня интересует самая первая строчка createBasketItemImg: function (data), если со словом function (data) мне все понятно, то что такое createBasketItemImg: , название функции или что-то другое? Дело в том, что я в данный момент смотрю всякие обучающие видео по JS, читаю документацию и нигде подобной конструкции не видел, объясните пожалуйста...

Comments

[PetrPo]

В целом Aetae правильно говорит в ответах, это свойство объекта, тип свойства = функция

[Андрей Белый]

PetrPo, тогда у меня еще вопрос.
Есть задача продублировать эти данные в блок справа (страница https://www.decorbazar.ru/order/):

Как бы вы это сделали на моем месте? Если не сложно то можно вкратце и желательно по пунктам.
Заранее вам спасибо и низкий поклон :-)

[PetrPo]

Андрей Белый, ты такой интересный, говоришь начал изучать js и сразу захотел скрипт на 8к строк понять.

1. найди функцию editTotalBlock, добавь в конце, перед this.editMobileTotalBlock();

this.totalInfoBlockNode.appendChild(
	BX.create('DIV', {
		props: {className: 'total-block__basket-items'},
		html: this.totalBlockBasketItemsHtml()		
	})
);

2. после этой функции добавь еще две

totalBlockBasketItemsHtml: function() {
	var basketItemsHtml = '';
	
	for(var id in this.result.GRID.ROWS) {
		var item = this.result.GRID.ROWS[id].data;
		basketItemsHtml += this.basketItemHtml(item);
	}
	
	return basketItemsHtml;
},

basketItemHtml: function(item) {
	return `
		<div class="basket-item">
			<span class="basket-item__item-name">${item.NAME}</span>
			<span class="basket-item__item-sum">${item.SUM}</span>
		</div>
	`;
},

сразу говорю написано на скорую руку, вероятно в функцию this.editMobileTotalBlock тоже надо что-то подобное добаввить, соответственно получится дублирование кода. Вот ты после того как мой код вставишь, подумай как его улучшить

UPD
улучшить - это не значит сделать его быстрее или меньше строк и т.д. Это значит как-то сделать его более однотипным, названия переменных продумать, может быть названия функций, так чтобы например потом я взял твой код и понял чего ты делаешь

[Андрей Белый]

PetrPo, спасибо большое )

Answer 1

[Aetae]

Битрикс тут не при чём, а так этот кусок вырван из контекста.
Это скорее всего просто свойство объекта:

var obj = {
  foo: 'bar',
  createBasketItemImg: function(data) {...}
}
obj.createBasketItemImg();

Но может быть и метка выхода из цикла, что врядли.

Comments

[Андрей Белый]

Спасибо, как раз сейчас дошел до объектов и это действительно похоже на них, хорошего дня :-)