Introduction à la méthode de transformation de l'extension jquery traditionnelle en module layui

Layui a jquery intégré

Il ne sera chargé que si le module que vous utilisez en dépend , et si votre page a introduit jquery via un script, elle ne sera pas chargée à plusieurs reprises. Le module jquery intégré supprime les $ et jQuery globaux.

Voici la description dans le document layui. Il a jq intégré, mais les objets globaux $ et jQuery sont supprimés, c'est-à-dire que l'interface externe globale dans la fenêtre est supprimée.

Implémentation de composants glisser-déposer
Supposons que siam.js est une extension, qui fournit une méthode comme celle-ci

<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内容变为 > 这是新内容

Ceci C'est le principe d'implémentation de certaines extensions jq traditionnelles. Pour le DOM que vous appelez, il continuera à traiter l'opération. Comme mentionné au début de cet article, j'utilise le composant glisser-déposer. être déplaçable via une telle interface externe et avec des éléments d'autres événements.

Problème de conflit

Les deux points ci-dessus sont les compléments de base du problème Dans layui, les objets globaux $ et Jquery sont supprimés et. l'expansion par défaut Il y a le code suivant

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

à la fin, qui repose sur le chargement de l'objet window.Jquery, de l'objet window, de l'objet document

et de son passage à la fermeture ci-dessus
correspondante à $, window, document , undefined (le même car il n'est pas passé)

Donc le $ utilisé dans la fermeture n'a aucune valeur, et une erreur sera signalée dès le chargement de l'extension

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

Je l'ai testé et importé le fichier jq séparément et le problème est résolu pas de problème (en raison de l'ordre de chargement du modèle que j'ai utilisé, le jq intégré de layui a été chargé en premier)

module personnalisé layui

Ceci est une introduction du site officiel

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

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

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

Nous pouvons utiliser la méthode du module personnalisé layui pour transmettre d'autres modules de layui pour que l'extension puisse faire fonctionner l'objet jq dans layui

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

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

Utiliser

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

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

Notez que cet article n'est pas une méthode universelle, il explique simplement brièvement mes idées et solutions pour résoudre ce problème, vous pouvez vous y référer pour étude.

Pour plus de connaissances sur le framework layui, veuillez prêter attention au tutoriel sur le framework layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!