Comment passer l'élément sélectionné à 'ceci' dans les fonctions chaînées

Question

J'essaie de comprendre comment fonctionne la fonction chaînée et en particulier comment est-il possible de passer l'élément sélectionné aux fonctions chaînées.

En supposant que nous avons une fonction enchaînée comme suit:

var func = {}; 
func.remove= function() { 
    $(this).remove(); 
} 

Comment puis-je sélectionner un élément par jQuery ou JavaScript et le transmettre à la fonction enchaînée comme suit:

var elm = $("foo"); 
elm.func.remove(); 

OU

var elm2 = document.getElementById("foo"); 
elm2.func.remove(); 

Answer 1

Une fonction chaînée est une méthode qui retourne l'objet sur lequel elle est appelée (ainsi elle peut t renvoie l'élément lui-même sauf si vous étendez les objets DOM natifs, ce qui n'est pas recommandé).

func n'est pas chaîné car ce n'est pas une fonction du tout. remove n'est pas enchaîné avant de ne pas renvoyer l'objet auquel il appartient.

Si vous souhaitez effectuer des fonctions chaînées qui fonctionnent avec un élément, vous devez définir un objet, définir des méthodes chaînées sur cet objet et stocker l'élément en tant que propriété de cet objet.

Par exemple:

function MyConstructor(element) { 
    this._element = element; 
} 

MyConstructor.prototype.doA = function doA() { 
    console.log(this._element); 
    return this; 
}; 

MyConstructor.prototype.doB = function doB() { 
    element.style.display = "none"; 
    return this; 
}; 

var example = new MyConstructor(document.getElementById('foo')); 
example.doA().doB();