従来のjquery拡張機能をlayuiモジュールに変換する方法の紹介-ライユイのチュートリアル-php.cn

従来のjquery拡張機能をlayuiモジュールに変換する方法の紹介

尚

リリース： 2019-11-23 13:54:06

転載

2761 人が閲覧しました

従来のjquery拡張機能をlayuiモジュールに変換する方法の紹介

Layui には jquery が組み込まれています

使用しているモジュールがそれに依存している場合にのみロードされます. また、ページに jquery スクリプトが導入されている場合、繰り返し読み込まれることはありません。組み込みの jquery モジュールは、グローバル $ と jQuery を削除します。

これは、layui ドキュメントの説明です。jq が組み込まれていますが、グローバル $ オブジェクトと jQuery オブジェクトが削除されています。つまり、ウィンドウ内のグローバル外部インターフェイスが削除されています。

ドラッグアンドドロップコンポーネントの実装
siam.js は、これと同様のメソッドを提供する拡張機能であると仮定します。

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

ログイン後にコピー

これは、いくつかの従来の JQ 拡張機能の実装原理です。呼び出した DOM に対して、操作の処理が続行されます。この記事の冒頭で述べたように、私はドラッグアンドドロップコンポーネントを使用しています。拡張機能は DOM を処理します。このような外部インターフェイスを通じて、他のイベントの要素とともにドラッグできるようにするためです。

問題の競合

上記の 2 点は、問題に対する基本的な補足です。layui では、グローバル $ オブジェクトと Jquery オブジェクトが削除され、最後に次のコード

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

ログイン後にコピー

があり、ウィンドウの読み込みに依存しています。Jquery オブジェクト、ウィンドウオブジェクト、ドキュメントオブジェクト

が上記のクロージャ
に渡されます。 to $、window、document、unknown (渡されないので同じ)

したがって、クロージャで使用される $ には値がなく、拡張機能がロードされるとすぐにエラーが報告されます

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

ログイン後にコピー

jq ファイルの導入を個別にテストしましたが、問題は解決しました。問題ありません (使用したテンプレートのロード順序により、layui の組み込み jq が最初にロードされました)

layui カスタムモジュール

これは公式 Web サイトからの紹介です

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

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

  //输出test接口
  exports(&#39;mymod&#39;, obj);
});

ログイン後にコピー

layui カスタムモジュールメソッドを使用して、layui の他のモジュールを渡すことができます拡張機能がlayuiでjqオブジェクトを操作できるようにします

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

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

ログイン後にコピー

Use

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

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

ログイン後にコピー

この記事は普遍的な方法ではなく、単にこの問題を解決するための私のアイデアと解決策を簡単に説明します。参考として参照してください。

layui フレームワークの詳細については、layui フレームワークチュートリアルを参照してください。

以上が従来のjquery拡張機能をlayuiモジュールに変換する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。