Einführung in das Plug-in rewrap-ajax.js

Ich habe in diesem Prozess schon lange keine Tagebücher mehr geschrieben. Man sieht, dass das Schreiben von Fachartikeln in der Vergangenheit abgelöst wurde Herz war voller Leidenschaft oder Feuer, aber jetzt ist es ..

Kürzlich habe ich ein JS-Plug-in geschrieben, es heißt a Ob es gut ist oder nicht, liegt nicht an Ihnen. Der Schlüssel liegt darin, was jeder nutzt.
Natürlich verwende ich es selbst. Aufgrund meiner persönlichen Vorlieben und Vorlieben kann ich die Schreibmethode anderer Ajax-Frameworks nicht ausleihen. Die aktuelle Version ist das Ergebnis einer Aufwärtsintegration von Version 1 Wenn Sie die interne Struktur vollständig verstehen möchten, können Sie mit Version 1 beginnen.

Lassen Sie uns nun über die allgemeine Designstruktur sprechen. Die grundlegende Schreibmethode wurde entwickelt: nativeAjax Die erste Methode ist ein Ajax-Attribut, die zweite eine erfolgreiche Funktion und die dritte eine Fehlerfunktion wie folgt:

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

Geben Sie es dann basierend auf dem obigen Entwurfsmuster an Bei einer zweiten Kapselung werden zunächst die Ajax-Diensteigenschaften festgelegt, dann können wir alle Ajax-Eigenschaften an das Objekt binden. Wenn sie direkt an das angegebene Objekt gebunden sind, müssen wir tatsächlich nur Parameter angeben und übernehmen, wodurch A gespart wird Es wurden viele Dinge getan und der Prozess ist viel einfacher, sodass die Flexibilität nicht sehr hoch sein wird. Wenn wir es intern kapseln möchten, benötigen wir eine hohe Flexibilität und wiederverwendbare Attribute. Daher füge ich die Attribute in die Funktionsfunktion ein und verwende diesen Zeiger, um das Ajax-Attribut intern zu binden, um es aufzurufen, und gleichzeitig kann ich dies tun es intern. Die Neukapselung des Plug-Ins ist das Entwurfsmuster der internen Struktur dieser Version, wie ich es verstehe.

Version 2Die von rewrap-ajax aufgerufene externe Struktur ähnelt dem JQ.fn-Attribut von jq. Es wird von der Objektattributmethode der Kettenstruktur verwendet, wir befinden uns also im Inneren 3f1c4e4b6b16bbbd69b2ee476dc4f83a Verwenden Sie einfach wrap.service(`ajax`, foo), und dann enthält die foo-Funktion das Service-Attribut von Ajax. Wir müssen nur das Ajax-Attribut an diesen Zeiger binden und SUCCESS hat vier Attribute, und alle vier Attribute unterstützen Groß- und Kleinschreibung. Dann sind this.success und this.error zwei Methoden, die die erfolgreiche Datenanforderung und die Fehlerstatuserfassung aufrufen sollen, und sowohl this.success als auch this.error haben einen Parameter.

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 drei rewrap-ajax behält die externe Struktur und diese Schreibmethode von Version zwei bei. Es gibt zwei weitere Funktionen auf diesem Zeiger, nämlich Props- und Methods-Methoden Die Props-Methode ist intern. Die zurückgegebene Struktur ist ein Schlüssel-Wert-Paar-Datenformat mit mehreren Status...-Zuständen, wie zum Beispiel:

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 }

Der Wert, der jedem Zustand entspricht muss ein Array sein [] Speichern, das Innere des Arrays muss ein Objekt sein {}. Die Eigenschaften des Objekts müssen in einem regulären Format vorliegen. Der der Eigenschaft des Objekts entsprechende Wert muss ein Elementelement (oder Knotenknoten) sein , Klassenklasse, ID, Tag-Label usw.), auf die ein Dom-Knoten zugreifen kann.

Die interne Struktur der methods-Methode hat jedoch das Format einer regulären Objektaufruffunktion, bei der der von return zurückgegebene Objektschlüssel die API-Methode ist Unterstützt benutzerdefiniertes Schreiben. Der Wert ist eine Funktionsschreibmethode, dann empfängt die Funktionsmethode einen Parameter (dieser Parameter ist das Statusattribut innerhalb der Requisitenpipeline) und die Methode wird intern mit diesem Zeiger wie folgt geschrieben: this .el(param).add()

Vollständige Struktur:

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()
    }
}

Der Parameter innerhalb dieser.el(param)-Methode ist der ausfließende Statusattributwert über die Requisitenpipeline als Parameter, und das vom Parameter empfangene Ergebnis ist eine Zeichenfolge. Die Ergebnisse von Zeichenfolgen können in Form eines Arrays [] gespeichert werden. Diese Zeichenfolgen verfügen dann über diese API-Methode. Die Add-Methode nach this.el() ist die Add-Methode, die von der aktuellen Zeichenfolge aufgerufen wird. Die Add-Bindungsmethode ist jedoch beispielsweise die API-Methode innerhalb von rewrap-ajax, sodass Sie Ihr benutzerdefiniertes Add-Verfahren extern aufrufen .-Methode zum Implementieren der addClass-Methode. Beachten Sie, dass die benutzerdefinierte add-Methode in this.methods keine Parameter erfordert. Ob die externen Pipeline-Aufrufe jedoch Parameter erfordern, hängt von der addClass-Methode ab (addClass ist die API-Methode in rewrap-ajax). Daher werden die API-Methoden später verfügbar gemacht.

　Für den externen Aufruf werden Requisitenattribute und -methoden über den Bereich $scope abgerufen. Der externe Aufruf lautet wie folgt:

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)
}

Das obige ist der detaillierte Inhalt vonEinführung in das Plug-in rewrap-ajax.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!