Como reaproveitar um codigo javascript como componente?

Front-end
,
#1

Ola,

Eu tenho umas paginas usando thymeleaf e acabo utilizando algumas funcionalidades em javascript. Para nao ficar repetindo codigo, eu gostaria de saber como eu poderia ter uma funcionalidade similar a um componente react.

por exemplo, eu tenho uma pagina que tem um select de lojas e um input de codigo de barras com um botao pesquisar. eu fiz um codigo javascript para essa pagina onde ela pesquisa o protudo. Isso ja funciona normal detro do meu codigo. A questao é que em todas as paginas que eu preciso pesquisar um produto eu teria que repetir esse codigo, pois cada pagina teria uma montagem visual diferente. por isso queria pegar apenas o retorno do ajax no script que eu teria para cada pagina

por limitacao minha de conhecimento javascript eu nao estou conseguindo saber, como eu posso apenas retornar esse objeto para o script da pagina alvo receber o objeto e fazer o que precisa ser feito. Abaixo segue o codigo que ja funciona.

App.PesquisaProdutoEan = (function() {

	function PesquisaProdutoEan() {
		this.loja = $('#selectLoja');
		this.codigoEan = $('#codigoEan');
		this.pesquisaProdutoEanBtn = $('#pesquisaProdutoEanBtn');
	}
	
	PesquisaProdutoEan.prototype.iniciar = function() {
		this.pesquisaProdutoEanBtn.on('click', onPesquisaProdutoEanBtnClick.bind(this));
	}
	
	function onPesquisaProdutoEanBtnClick(event) {
		event.preventDefault();
		$.ajax({
			url: `/produtos/${this.codigoEan.val()}`,
			method: 'GET',
			contentType: 'application/json',
			data: {
				idLoja: this.loja.val()
			}, 
			success: onPesquisaConcluida.bind(this),
			error: onErroPesquisa.bind(this)
		});		
	}
	
	function onPesquisaConcluida(resultado) {
		console.log(resultado)
	} 
	
	function onErroPesquisa(resultado) {
		console.log(resultado);
	}
		
	return PesquisaProdutoEan;

}());

$(function() {
	var pesquisaProdutoEan = new App.PesquisaProdutoEan();
	pesquisaProdutoEan.iniciar();
});