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