Javascript/Jquery Charger un rappel et écrire une fonction de base

Question

Cela pourrait être une question en double, mais je ne sais pas comment formuler la recherche. Je ne suis pas familier avec les propriétés JS.

CASE:

Disons que je crée certains types d'éléments tels que le texte, image, audio, vidéo, etc., et suppose que je leur donne les mêmes capacités telles que glisser, faire pivoter, redimensionner, etc. Pour simplifier, permet de considérer ces deux éléments: Texte et Image.

PROBLÈME:

Disons que je dois obtenir la taille de ces deux éléments et mettre ceux à leur div wrapper.

• L'élément de texte est simple, je peux juste obtenir la taille immédiatement et définir la taille de div diviseur.

• L'élément d'image attend la charge de l'image et sa taille ne peut être définie qu'après que la charge se soit produite, c'est-à-dire dans son rappel de charge.

EXEMPLE SIMPLE

function createText(){ 
    var aDiv = createWrapperDiv(); // <div class="element"></div> 
    var anElem = $('<textarea></textarea>') 
    aDiv.append(anElem) 

    // can set immediately 
    aDiv.attr('width', anElem.width()); 
    aDiv.attr('height', anElem.height()); 

    // Some other size-DEPENDENT and size-INDEPENDENT stuff can both be done here. 
    sizeDependentStuff(); 
    sizeIndependentStuff(); 

} 

function createImage(){ 
    var aDiv = createWrapperDiv(); // <div class="element"></div> 
    var anElem = $('<img>') 
    aDiv.append(anElem) 

    // need to wait for element to load. 
    anElem.attr('src',imageUrl) 
    anElem.load(function(e) { 
     aDiv.attr('width', e.currentTarget.width()); 
     aDiv.attr('height', e.currentTarget.height()); 

     // Some other size-DEPENDENT stuff. 
     sizeDependentStuff(); 
    }); 

    // Some other size-INDEPENDENT stuff. 
    sizeIndependentStuff(); 

} 

QU'EST-CE QUE JE VEUX:

Je veux définir une fonction createSimpleElement (quelque chose de semblable à une usine) qui prend le type et fait à la fois sizeDependentStuff et sizeIndependentStuff afin que je puisse réutiliser le même code. Notez que j'ai plus de 2 types et le nombre peut augmenter. Je ne peux pas trouver un moyen approprié d'aborder le processus de chargement.

J'espère que c'est clair et s'il vous plaît considérez que je suis encore dans le processus d'apprentissage.

Merci.

Answer 1

Qu'en est-il de quelque chose comme ça?

function base(parentElement, element){ 
    parentElement.append(element); 
    parentElement.attr('width', element.width()); 
    parentElement.attr('width', element.width()); 
    /*other common properties...*/ 
} 

function createText(){ 
    var aDiv = createWrapperDiv(); 
    var anElem = $('<textarea></textarea>') 
    base(aDiv, anElem);  
} 

function createImage(){ 
    var aDiv = createWrapperDiv(); 
    var anElem = $('<img>') 
    anElem.attr('src',imageUrl) 
    anElem.load(function(e) { 
     base(aDiv, anElem); 
    }); 

    // Some other size-INDEPENDENT stuff. 

    } 
}