Spezifische Schritte zur Verwendung des Laui-Frameworks zum Kapseln des Ajax-Moduls

layui ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist extrem niedrig und es ist einsatzbereit.

(Teilen von Lernvideos: Programmiervideo)

Im täglichen Gebrauch kann man sagen, dass Ajax weit verbreitet ist. Deshalb fügen wir hier ein eigenes Modul hinzu, um Ajax für eine einfache Verwendung zu kapseln.

Hinweis: Das Laden des Moduls erfordert die Unterstützung einer Serverumgebung. Bevor Sie dieses Tutorial lesen, richten Sie bitte eine lokale Serverumgebung in Ihrer Nähe ein. Dies ist nicht Gegenstand dieses Tutorials. Bitte Baidu selbst.

1. Erstellen Sie das Projektverzeichnis

Laden Sie zunächst das Laui-Paket von der Laui-Website herunter und platzieren Sie es in Ihrem eigenen Projekt. Nach dem Hinzufügen von Lauii ist die Verzeichnisstruktur wie folgt

2, Moduldateien schreiben

Jetzt erstelle ich einen neuen Modulordner unter dem Laui-Ordner des Plugins, um unsere eigenen Moduldateien zu speichern, und erstelle in diesem Ordner eine neue common.js-Datei, um unser erstes Modul zu schreiben Der Inhalt lautet wie folgt: Die Methode

layui.define([ 'jquery' ],  function (exports){ 
     var  $ = layui.jquery;
     var  obj = {
         ajax:  function  (url, type, dataType, data, callback) {
             $.ajax({
                 url: url,
                 type: type,
                 dataType: dataType,
                 data: data,
                 success: callback
             });
         }
     };
     //输出接口
     exports( 'common' , obj);
});

layui.define() ist die Definitionsmodulmethode vonlayui. Der erste Parameter ist das abhängige Modul Der Inhalt des von uns definierten Moduls besteht darin, diese Methoden bereitzustellen. Wie Sie oben sehen können, definieren wir ein Obj-Objekt, das über eine Ajax-Methode verfügt, die zum Aufrufen von Jquerys Ajax zur Ausführung unserer Operationen verwendet wird. Wenn Sie andere JQuery-Plug-Ins kapseln, fügen Sie einfach den JS-Code des Plug-Ins in die Rückrufmethode vonlayui.define() ein.

exports() ist die Ausgabeschnittstelle. Diese Methode hat auch zwei Parameter. Der erste ist der Name des Ausgabemoduls und der zweite ist das auszugebende Objekt.

Jetzt ist unser Modul geschrieben. Wenn wir später Methoden hinzufügen müssen, fügen Sie einfach Methoden zum Objekt obj hinzu. Jetzt ist unsere Verzeichnisstruktur wie folgt:

3. Richten Sie das Laui-Ladekomponentenverzeichnismodul ein.

Nachdem das Modul geschrieben wurde, müssen wir Lauii so konfigurieren, dass es unser Modul finden kann global js Abgeschlossen, hier erstelle ich eine neue global.js-Datei unter asset/js. Der Inhalt der Datei lautet wie folgt:

layui.config({
     base:  '/assets/plugin/layui/modules/'       //自定义layui组件的目录
}).extend({  //设定组件别名
     common:    'common' ,
});

layui.config() ist die Konfigurationsmethode vonlayui Der Zugriff auf dieses Verzeichnis erfolgt über das Stammverzeichnis. Wie Sie dem vorherigen Schritt entnehmen können, befindet sich der Speicherpfad meines Moduls im Ordner /assets/plugin/modules/ definiert in „extend“, das im obigen Code vor dem Doppelpunkt steht, stellt den Namen des Moduls dar, den wir beim zukünftigen Laden des Moduls verwenden, und das „Common“ nach dem Doppelpunkt stellt den Namen unseres Moduls dar Dies bezieht sich tatsächlich auf die Datei /assets/plugin/layui/modules/common.js. Sie können das Suffix js weglassen und das Suffix wird beim Laden automatisch hinzugefügt.

4. Verwenden Sie das Modul

Nachdem das Modul definiert ist, können wir das Modul genauso verwenden wie das integrierte Modul von Laui. Jetzt ändern wir die Datei index.html des Projekts. Darin verwende ich die Ajax-Methode des Moduls, um auf eine Online-Übersetzungsschnittstelle zuzugreifen. Der Dateicode lautet wie folgt:

< script  src = "assets/plugin/layui/layui.js" ></ script >
< script  src = "assets/js/global.js" ></ script >
< script >
     layui.use([&#39;common&#39;], function () {
         var common = layui.common;
         common.ajax(&#39;http://route.showapi.com/32-9&#39;, &#39;post&#39;, &#39;json&#39;, {
             &#39;showapi_appid&#39;: 28043,
             &#39;showapi_sign&#39;: &#39;fd5ce066f69441bfa078c0ad16129b15&#39;,
             &#39;q&#39;: &#39;hello&#39;
         }, function (res) {
             alert(JSON.stringify(res));
         });
     });
</ script >

Besuchen Sie index.html und sehen Sie sich das in der folgenden Abbildung gezeigte Rückgabeergebnis an, das beweist, dass das Modul erfolgreich gekapselt wurde.

Verwandte Empfehlungen: layui-Tutorial

Das obige ist der detaillierte Inhalt vonSpezifische Schritte zur Verwendung des Laui-Frameworks zum Kapseln des Ajax-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!