архитектура модуля / область видимости

Вопрос-ответ JavaScript
1

Решил переделать код под “модуль”, столкнулся с проблемой…как правильно/когда отрисовывать/заполнять темплейт.
к примеру:

(function($) {
 	window.infb = {
 		//...
		init : function(skin) {
			this.renderingTemplate();
			//Отрисовали, вроде все хорошо, НО! дальше нужно заполнить темплейт данными, это делает initInfoBox();
			// this.addEvents();
			this.initInfoBox();
		},
	    renderingTemplate : function(options) {
	  		var conteiner = $('#includedContent');
	  		var skin = 'default';

			this.template = document.createElement('div');
			this.template.next = 0;

			this.template.innerHTML = '<div id="block" class="preview">'+
				'<div class="block-image"><img ></div>'+
				'<div class="block-content">'+
					'<div class="block-content__title">'+
					'</div>'+
					'<div class="block-content__text">'+
					'</div>'+
					'<div class="info-box__note"></div>'+
				'</div>'+
					'<div class="block-content__details">Show details</div>'+
				'<div class="block-buttons">'+
					'<div class="block-buttons__prev"><span>Prev</span></div>'+
					'<div class="block-buttons__next"><span>Next</span></div>'+
					'<div class="block-buttons__find"><span>Find A Store</span><span class="triangle">&#9658</span></div>'+
				'</div>'+
			'</div>';
			//.....
			conteiner.append(this.template);
			//....
		},
  		initInfoBox: function(){
	   		var that = this;
			var jsonResponse = $.getJSON( "src/info_box.json")

			jsonResponse.then(function (data) {
				var img = $('.block-image img', this.template);
				console.log(that.template);
				var title = $('#block-content__title', this.template);
				var description = $('.block-content__text', this.template);
				var note = $('.info-box__note', this.template);
				var prodUrl = $('.block-buttons__find', this.template);
				var srcImg = (!!data[0].img ? 'src/img/'+ data[0].img : '');
				img.src = srcImg;
				title.innerHTML = (!!data[0].title ? data[0].title : '');
				description.innerHTML = (!!data[0].description ? data[0].description : '');
				note.innerHTML = (!!data[0].note ? data[0].note : '');
				that.addEvents();
			});
   		},
   	//............
	}
})(jQuery);

Что получается, мне нужно в initInfoBox() получить тот же this.template что собрали в renderingTemplate(), подумал что стоит вынести этот this.template отдельно и там собрать, что бы был доступен по всему модулю:

		template: {
	template : document.createElement('div'),
	// this.template.skin = skin;
	// this.template.next = 0;

	innerHTML : '<div id="block" class="preview">'+
		'<div class="block-image"><img ></div>'+
		'<div class="block-content">'+
		'<div class="block-content__title">'+
		'</div>'+
		'<div class="block-content__text">'+
		'</div>'+
		'<div class="info-box__note"></div>'+
		'</div>'+
		'<div class="block-content__details">Show details</div>'+
		'<div class="block-buttons">'+
		'<div class="block-buttons__prev"><span>Prev</span></div>'+
		'<div class="block-buttons__next"><span>Next</span></div>'+
		'<div class="block-buttons__find"><span>Find A Store</span><span class="triangle">&#9658</span></div>'+
		'</div>'+
	'</div>',
},
init : function(){
//...
},
initInfoBox: function(){},
//.....

но тоже как-то…криво выглядит, подскажите как лучше это сделать?

2

можно конечно запихнуть вызов initInfoBox внуть renderingTemplate, но тоже как-то через жопу

3

Для тех задач (с осознанием себя через this, что ты используешь лучше использовать не модуль, а класс использовать. Если все приложение работает на модулях, то модуль будет просто экспортировать конструктор класса.

function Infb() {
	this.init();
	this.template = this.renderingTemplate();
	this.initInfoBox();
}

Infb.prototype.renderingTemplate = function () {
	return // ...
};

Infb.prototype.initInfoBox = function () {
	this.template ///
}
4

Вот этого не понял, что-то на подобии такого имелось ввиду?

var Infb = (function () {
	var exports = {};
	exports.init = function(){
		//...
	};
	exports.renderingTemplate = function(){
		//...
	};
	return exports;
}())
5

Извини, я не буду писать конкретный код, потому что твое тестовое задание подразумевает самостоятельное выполнение.

6

ладно, спасибо, дальше сам)