Introduction au chaînage de méthodes dans les compétences Javascript_javascript

Quand je cherchais comment concevoir une API Javascript, j'ai découvert que le chaînage de méthodes semble très puissant et intéressant, et c'est quelque chose que nous avons souvent vu dans le passé. .

Chaînage de méthodes Javascript

Il y a cette explication sur Wikipédia :

Copier le code Le code est le suivant :

Le chaînage de méthodes, également connu sous le nom d'idiome de paramètre nommé, est une syntaxe courante pour appeler plusieurs appels de méthode dans les langages de programmation orientés objet. Chaque méthode renvoie un objet, permettant aux appels d'être enchaînés dans une seule instruction. Le chaînage est un sucre syntaxique qui élimine. le besoin de variables intermédiaires. Une chaîne de méthodes est également connue sous le nom d'épave de train en raison de l'augmentation du nombre de méthodes qui se succèdent dans la même ligne, ce qui se produit à mesure que de plus en plus de méthodes sont enchaînées, même si des sauts de ligne sont souvent ajoutés entre elles. méthodes.

Prenez un outil de traduction et traduisez-le :

Copier le code Le code est le suivant :

Le chaînage de méthodes, également connu sous le nom de méthode de paramètre nommé, est une syntaxe courante permettant d'appeler plusieurs méthodes dans les langages de programmation orientés objet. Chaque méthode renvoie un objet, permettant aux appels d'être connectés entre eux dans une seule déclaration. Les liens sont du sucre syntaxique, éliminant le besoin de variables intermédiaires. Le chaînage de méthodes est également connu sous le nom de désastre car le nombre de méthodes qui se succèdent sur la même ligne augmente à mesure que plusieurs méthodes sont verrouillées, même si des sauts de ligne sont généralement ajoutés entre les méthodes.

Chaînage de méthodes utilisant

Selon l'inspection visuelle, jQuery est probablement la chaîne de méthodes la plus utilisée.

Copier le code Le code est le suivant :

// chaînage
$("#person").slideDown('lent')
.addClass('groupé')
.css('margin-left', '11px');

Nous pouvons appeler cela avec une utilisation comme celle-ci. jQuery s'appuie fortement sur les liens. Cela permet d'appeler facilement plusieurs méthodes d'un même sélecteur. Cela rend également le code plus propre et évite d'exécuter plusieurs fois la même sélection (amélioration des performances). Lorsqu'il n'y a pas de chaîne de méthodes, cela ressemble à ce qui suit

Copier le code Le code est le suivant :

var p = $('#personne');
p.slideDown('lent');
p.addClass('grouped');
p.css('margin-left', '11px');

Il ressemble beaucoup au constructeur du modèle de conception. La différence est que p est ici une méthode au lieu d'une classe.

Exemple de chaîne de méthodes Javascript

Quand nous avons parlé des fonctions d'ordre supérieur Javascript auparavant, nous avons parlé de print('Hello')('World'), et le résultat de cette utilisation peut devenir comme ceci.

Copier le code Le code est le suivant :

fonction f(i){
fonction de retour(e){
je =e;
Fonction de retour(e){
je =e;
Fonction de retour(e){
alert(i e);
};
};
};
};
f(1)(2)(3)(4); //10

Ceci est un exemple tiré d'Internet, mais c'était aussi la dernière fois que j'écrivais un appel en chaîne. Il a l'air extrêmement faible.

Copier le code Le code est le suivant :

var func = (function() {
    return{
        add: function () {
            console.log('1');
            return{
                result: function () {
                    console.log('2');
                }
            }
        }
    }
})();

func.add().result();

其實應該在每個function都要有個return this，於是就有了:

複製程式碼 程式碼如下:

Func = (function() {
    this.add = function(){
        console.log('1');
        return this;
    };
    this.result = function(){
        console.log('2');
        return this;
    };
    return this;
});

var func = new Func();
func.add().result();

當然我們也可以將最後的兩句

複製程式碼 程式碼如下:

var func = new Func();
func.add().result();

變成

複製程式碼 程式碼如下:

new Func().add().result();

其他

最後作為一個迷惑的地方的小比較:

Method Chaining VS prototype Chaining

原型鏈與方法鏈在某些方面上是差不多的，不同的地方或許在於

1.原型鍊是需要用原型
2.方法鏈則是用方法