Tutorial zum Laui-Verpackungsmodul

layui ist ein sehr einfaches UI-Framework, das von Chinesen entwickelt wurde. Es verwendet eine modulare Lademethode, daher müssen wir während der Verwendung zwangsläufig unsere eigenen Module hinzufügen Ein einfaches Modul.

Empfohlen: Tutorial zur Verwendung von Layui

Im täglichen Gebrauch kann man sagen, dass Ajax weit verbreitet ist, daher fügen wir hier ein eigenes Modul hinzu, um Ajax einfacher zu kapseln verwenden.

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 Struktur wie folgt:

2. Moduldateien schreiben

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

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() Methode ist die Methode zum Definieren von Modulen empfängt 2 Parameter, der erste Parameter ist das abhängige Modul, hier sehen wir, dass wir von jquery abhängen; hier definieren wir den Inhalt des Moduls, das diese Methoden bereitstellen soll. Wir definieren ein obj-Objekt. Das Objekt verfügt über eine Ajax-Methode zum Aufrufen des Ajax von jquery, um unsere Operationen auszuführen. 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 Laui konfigurieren Damit Layui es finden kann, wird diese Konfiguration im Allgemeinen in unserem globalen js abgeschlossen. Hier erstelle ich eine neue global.js-Datei unter asset/js >layui.config() ist die Konfiguration der Laui-Methode. Der Basisparameter stellt das Speicherverzeichnis unseres Moduls dar. Dieses Verzeichnis wird aus dem Zugriffsstammverzeichnis der Website berechnet ist /assets/plugin/layui/modules/ Ordner; Extend definiert unseren tatsächlichen Modulnamen. Der gemeinsame Name vor dem Doppelpunkt im obigen Code stellt den Namen des Moduls dar, den wir in Zukunft beim Laden des Moduls verwenden werden. und das „Common“ nach dem Doppelpunkt stellt hier den Namen unserer Moduldatei dar. Tatsächlich bezieht es sich auf die Datei /assets/plugin/layui/modules/common.js. Wir können das Suffix js weglassen, und das Suffix wird sein beim Laden automatisch hinzugefügt.

4. Verwenden Sie das Modul

Nachdem das Modul definiert wurde, können wir das Modul genauso verwenden wie das integrierte Modul von Laui .html-Datei, in der ich die Ajax-Methode des Moduls verwende, um auf eine Online-Übersetzungsschnittstelle zuzugreifen. Der Dateicode lautet wie folgt:

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

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

Das obige ist der detaillierte Inhalt vonTutorial zum Laui-Verpackungsmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!