Einführung in die Methode zur Umwandlung traditioneller JQuery-Erweiterungen in Laui-Module

Layui verfügt über eine integrierte JQuery

Es wird nur geladen, wenn das von Ihnen verwendete Modul davon abhängt . und wenn Ihre Seite JQuery per Skript eingeführt hat, wird sie nicht wiederholt geladen. Das integrierte JQuery-Modul entfernt das globale $ und jQuery.

Dies ist die Beschreibung im Laui-Dokument. Es verfügt über integriertes jq, aber die globalen $- und jQuery-Objekte werden entfernt, d. h. die globale externe Schnittstelle im Fenster wird gelöscht.

Implementierung von Drag-and-Drop-Komponenten
Angenommen, siam.js ist eine Erweiterung, die eine Methode wie diese bereitstellt

<div id=&#39;test&#39;>原始内容</div>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
$.fn.siam = function(params){
    var dom = this;
    dom.html(params);
};


setTimeout(function(){
    $("#test").siam(&#39;这是新内容&#39;);
},800);
</script>
// 延迟执行完之后会把div内容变为 > 这是新内容

Das Dies ist das Implementierungsprinzip einiger herkömmlicher jq-Erweiterungen. Für das von Ihnen aufgerufene DOM wird die Verarbeitung des DOM fortgesetzt. Wie am Anfang dieses Artikels erwähnt über eine solche externe Schnittstelle von und mit Elementen anderer Ereignisse ziehbar sein.

Problemkonflikt

Die beiden oben genannten Punkte sind die grundlegenden Ergänzungen zum Problem. In Laui werden die globalen $- und Jquery-Objekte entfernt Die Standarderweiterung Am Ende befindet sich der folgende Code

;(function($, window, document, undefined){
    .....扩展内容
})(window.jQuery || window.Zepto, window, document);

, der darauf basiert, das window.Jquery-Objekt, das Fensterobjekt und das Dokumentobjekt

zu laden und an den entsprechenden Abschluss
zu übergeben zu $, window, document , undefiniert (dasselbe, weil es nicht übergeben wird)

Das im Abschluss verwendete $ hat also keinen Wert und es wird ein Fehler gemeldet, sobald die Erweiterung geladen wird

$ is not defined
或者
Typeerror Cannot Read Property fn of undefined

Ich habe es getestet und die JQ-Datei separat importiert und das Problem ist gelöst. Kein Problem, (aufgrund der von mir verwendeten Vorlagenladereihenfolge wurde das integrierte JQ von Laui zuerst geladen)

Layui-benutzerdefiniertes Modul

Dies ist eine Einführung von der offiziellen Website

layui.code
/**
  扩展一个test模块
**/

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };

  //输出test接口
  exports('mymod', obj);
});

Wir können die Methode des benutzerdefinierten Laui-Moduls verwenden, um andere Module zu übergeben von Laui, damit die Erweiterung das JQ-Objekt in Laui bedienen kann

layui.define(["jquery"], function (exports) {
    var $ = layui.jquery;
    // 把第一行的 ;(function($, window, document, undefined){ 换成以上
    ...扩展内容

    // 把最后一行的换成以下
    var obj = {
    };
    exports("自定义模块名", obj);
});

Verwenden Sie

 layui.use(['form','jquery','自定义模块名'], function (admin, form) {
     var $ = layui.jquery;
     var obj = layui.自定义模块名;

     // 正常使用 即可  比如我的
     $("#test").desta('open');
});

Beachten Sie, dass dieser Artikel keine universelle Methode ist. Es erklärt nur kurz meine Ideen und Lösungen zur Lösung dieses Problems, Sie können es zum Studium heranziehen.

Weitere Informationen zum Laui-Framework finden Sie im Layui-Framework-Tutorial.

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Umwandlung traditioneller JQuery-Erweiterungen in Laui-Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!