Como fazer ou qual o nome para "criar uma função"

[Jazara 3]

Eu gostaria de escrever um script "genérico" com funções e ações, para reduzir a carga de scripts para fazer a mesma coisa desta forma:

Eu tenho uma galeria de imagens dentro de um DIV com o id destaques, mais para baixo tenho outra galeria com o nome de id mais_vendidos

 

Então eu só consigo fazer a função de animação de galeria delegando todas as linhas de código para aquele ID, o que infla meu código. EU já vi outros scripts que fazem o que quero, só não entendi pois meu nível de javascript é baixo. Logo o que eu quero é que:

 

function anima_galeria(){

/*todos os códigos de animação aqui*/

}

 

e que eu possa apenas fazer:

$("#destaques").anima_galeria(function(){ var exibir_seta = 1; });

$("#mais_vendidos").anima_galeria( var exibir_seta = 0; );

Então como faz isso? O que devo estudar para conseguir este resultado?

[Omar~ 87]

12 horas atrás, Jazara disse:

O que devo estudar para conseguir este resultad

Prototypes

Além do mais deixar o jquery de lado até conseguir ter um mínimo de habilidade para manipular o javascript (jQuery não é javascript)

Depois você poderá usa-lo tranquilamente de forma efetiva pois já vai ter noção mais ampla do javascript.

 

Exemplo:

$ seria uma função que recebe de parâmetro uma string essa função irá buscar o elemento no documento seu retorno, seria usando o objeto da instância desse elemento.

Porém a função $ seria um prototype de outra função que regularia o que deve ser feito a cada etapa.

Então anima_galeria também seria um prototype da função mãe, que por sua vez pega o retorno de $ e o retorno de anima_galeria e executa o que tem de fazer.

Ou seja $ e anima_galeria  nada mais que são prototypes de outra função

 

Veja que criei exatamente um script que faz isso:

Função mãe reguladora (uma class): https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L29

Função responsável por obter o objeto de trabalho: https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L49

Linha a qual pega todas funções que estão em objetos de diz que o prototype da função mãe serão todas as demais funções:

https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js#L1571

Um exemplo:

<div id="pai">
  <div class="filho"></div>
</div>
<script>
  jsd('#pai').find('.filho').index(0).html('<div style="color:red">Olá mundo</div>');
  // ou
  //jsd('#pai').find('.filho').html('<div style="color:red">Olá mundo</div>');
</script>

 

12 horas atrás, Jazara disse:

$("#destaques").anima_galeria(function(){ var exibir_seta = 1; });

Isso são callbacks, anima_galeria é uma função que executa outra função anônima.

 

12 horas atrás, Jazara disse:

$("#mais_vendidos").anima_galeria( var exibir_seta = 0; );

Isso não é possível uma vez que var é uma global ela não pode ser definida dentro de um parâmetro.

 

Porém o próprio jQuery possui uma função que pode estender funções personalizadas a ele.

A função não sei exatamente como a usa porque não mexo com jquery:

jQuery.extend( /* .... */);

 

Bom, foi mais ou menos isso que entendi sobre sua dúvida.

 

[Jazara 3]

Caro Omar, agradeço, vou estudar sobre o assunto e olhar os links que você me passou.
Entre receber sua resposta e minha postagem eu consegui entender um pouco mais de como usar isso e fiz este código de teste

 

https://jsfiddle.net/alexandrejazara/yg72L6dc/2/

 

Reparei nele que se eu chamar o "script principal" depois da DIV delegada ele dá erro e não roda, mas se eu o fizer antes de delegar ele carrega certinho e consigo manipular as coisas.

 

Talvez seja a falta de conhecimento e experiência para se alcançar o resultado com o carregamento da função pós body ou pós document load.

Já consegui seguir com outro projeto meu que é um editor de texto personalizado. Sei que há vários no mercado, mas acabo sempre com algum conflito de edição no final da postagem na tela, e como também, o exeCommad está sendo descontinuado por navegadores para o uso do contenteditable que já tinha um painel funcional, agora tenho que correr atrás de solucionar isso.

 

Nesta jornada de criação estou descobrindo muitas dificuldades pela falta de conhecimento, já consegui resolver algumas coisas, mas tem coisa que não faço a mínima ideia e os materiais em geral são fragmentados ou com muita informação e pouco "Passo à passo".

Imagino que minha dificuldade para quem é especialista na área deva ser algo trivial, mas pessoas tem diferentes curvas de aprendizagem. E sem grana para investir em um curso, preciso ir buscando conteúdos que possam sanar o meu problema.

Por fim esta luz que você já me ofereceu abriu um caminho para saber o que estudar. Grato de coração.

Compartilho com outras pessoas que venham ler este documento o meu projeto em desenvolvimento do editor.

https://jsfiddle.net/alexandrejazara/v4s21gof/223/

Nele já apliquei o princípio da dúvida aqui apresentada. Deixarei em aberto por uns dias esta postagem caso alguém queria compartilhar mais alguma coisa.