Introduction au plug-in rewrap-ajax.js

Je n'ai pas écrit d'articles techniques depuis longtemps. J'ai écrit des journaux au cours de ce processus. L'enregistrement de la vie quotidienne a remplacé la rédaction d'articles techniques. le cœur était plein de passion ou de feu, mais maintenant il l'est ..

Récemment, j'ai écrit un plug-in JS Selon les mots du cercle, cela s'appelle un. roue. Que ce soit bon ou non, cela ne dépend pas de vous. La clé est ce que tout le monde utilise.
Bien sûr, je l'utilise moi-même. En raison de mes préférences et préférences personnelles, je ne peux pas emprunter la méthode d'écriture d'autres frameworks Ajax. La version actuelle est le résultat d'une intégration ascendante à partir de la version 1, donc vous Si vous souhaitez bien comprendre la structure interne, vous pouvez commencer par la version 1.

Parlons maintenant de la structure globale de conception. La version 1 est une méthode de collecte et d'organisation d'amis. La méthode d'écriture de base a été formée. Il suffit d'appeler nativeAjax. Le premier est un attribut ajax, le second est une fonction réussie et le troisième est une fonction d'erreur, comme suit :

nativeAjax(postOption,function(data){
    // 3.1、请求成功回调
    console.log(data);
},function(error){
    // 3.2、请求失败回调,返回HTTP状态码
    console.log(error);
});

Basé sur le modèle de conception ci-dessus, donnez-le. une deuxième encapsulation, tout d'abord Les propriétés du service Ajax sont corrigées, alors nous pouvons lier toutes les propriétés Ajax à l'objet si elles sont directement liées à l'objet spécifié, en fait il suffit de donner et de prendre des paramètres, en enregistrant A. beaucoup de choses ont été faites et le processus est beaucoup plus simple, donc la flexibilité ne sera pas très grande. Si nous voulons l'encapsuler en interne, nous avons besoin d'une grande flexibilité et d'attributs réutilisables, donc je mets les attributs dans la fonction function, donc j'utilise ce pointeur pour lier l'attribut ajax en interne pour l'appeler, et en même temps, je peux le faire en interne. La ré-encapsulation du plug-in est le modèle de conception de la structure interne de cette version telle que je la comprends.

Version 2La structure externe appelée par rewrap-ajax est similaire à l'attribut JQ.fn de jq. Elle est utilisée par la méthode d'attribut d'objet de la structure en chaîne, nous sommes donc à l'intérieur. <script> Utilisez simplement wrap.service(`ajax`, foo), puis la fonction foo contient l'attribut de service ajax. Il suffit de lier l'attribut ajax à ce pointeur. , et SUCCESS a quatre attributs, et les quatre attributs prennent en charge les formats majuscules et minuscules. Ensuite, this.success et this.error sont deux méthodes, qui doivent appeler la demande de données réussie et appeler la capture de l'état d'erreur, et this.success et this.error ont tous deux un paramètre.

wrap.service('ajax',function ajax() {
    // 支持大小写
    this.URL = "query.do"
    this.TYPE = "GET"
    this.SUCCESS = function(data) {
        var val = data;
        console.log(val)
    };
    this.ERROR = function(err) {
        console.log(err)
    };
});

Version trois rewrap-ajax maintient la structure externe et cette méthode d'écriture de la version deux. Il existe deux autres fonctions sur le pointeur this, à savoir les méthodes props et méthodes, parmi lesquelles. la méthode props est interne La structure renvoyée est un format de données de paire clé-valeur, avec plusieurs états... états, tels que :

1 return {
2     State_01: [{ class : ‘.main’, static: 'color', tip: 'message', content: 'container'}],
3     State_02: [{ class : ‘.main’, static: 'color'}],
4     State_03: [{ class : ‘.main’}]
5 }

La valeur correspondant à chaque état d'état doit être un tableau [] Enregistrer, l'intérieur du tableau doit être un objet {}, les propriétés de l'objet sont requises dans un format régulier, la valeur correspondant à la propriété de l'objet doit être un élément Element (ou un nœud nœud , classe, identifiant, étiquette de balise, etc.) accessibles par une attente de nœud dom).

Cependant, la structure interne de la méthode methods est au format d'une fonction d'appel d'objet standard, dans laquelle la clé d'objet renvoyée par return est la méthode API. prend en charge l'écriture personnalisée.L'objet renvoyé est La valeur est une méthode d'écriture de fonction, puis la méthode de fonction reçoit un paramètre (ce paramètre est l'attribut d'état à l'intérieur du pipeline d'accessoires) et la méthode est écrite en interne à l'aide de ce pointeur, comme suit : .el(param).add()

Structure complète :

return {
    addClass: function (scope){
        this.el([scope.class,scope.static]).add()
    },
    removeClass: function (scope){
        this.el([scope.class,scope.tip]).remove()
    },
    pushHtml: function (scope){
        this.el([scope.static,scope.class]).push()
    },
    hasClass: function (scope){
        this.el(scope.define.content).has()
    }
}

Le paramètre à l'intérieur de cette méthode.el(param) est la valeur de l'attribut d'état qui s'écoule via le pipeline d'accessoires en tant que paramètre, et le résultat reçu par le paramètre est une chaîne. Les résultats des chaînes peuvent être stockés sous forme de tableau [], alors ces chaînes ont cette méthode API. La méthode add après this.el() est la méthode add appelée par la chaîne actuelle. Cependant, la méthode de liaison add est une méthode API. Par exemple, addClass est la méthode API dans rewrap-ajax, vous appelez donc votre ajout personnalisé en externe. . pour implémenter la méthode addClass. Notez que la méthode add personnalisée dans this.methods ne nécessite pas de paramètres, mais le fait que le pipeline externe appelle add nécessite des paramètres dépend de la méthode addClass (addClass est la méthode API dans rewrap-ajax). Les méthodes API seront donc exposées plus tard.

　Pour cet appel externe, les attributs et méthodes des accessoires sont obtenus via la portée $scope L'appel externe est le suivant :

this.ERROR = function( $scope, err ) {
    $scope.$props.$el($scope.$props.$scope.define.static).add('error_message')
    $scope.$props.$el($scope.$props.$scope.define.static).push('调用出错 error')
    $scope.$props.$el($scope.$props.$scope.define.tip).remove('show')
    console.log(err)
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!