LayUIサードパーティプラグイン開発仕様の詳細説明

この仕様には、合計 4 つの内容があります: 1. プラグインの使用ディレクトリを指定する、2. プラグインの CSS スタイルのプレフィックスを指定する、3. プラグインの統一パッケージ化を指定するプラグイン、4. プラグインの導入方法を指定します。

1. ディレクトリ

まずディレクトリの写真を撮ってみましょう

ディレクトリ構造の説明 (写真で理解します)
mod_name は次のことを表しますプラグインの名前、作成者はサードパーティの作成者を表します

layui                       layui框架目录
├─ css                      layui官方样式目录
├─ font                     layui官方字体目录
├─ images                   layui官方表情目录
├─ lay                      layui官方模块目录
│
├─ mods                     layui插件目录
│  ├─ extend                项目开发者目录
│  │  ├─ mod_name           项目开发者mod_name插件的目录
│  │  │  ├─ mod_name.js     项目开发者mod_name插件本体
│  │  │  ├─ mod_name.css    项目开发者mod_name插件样式
│  │  │  └─ ...
│  │  └─ ...
│  │
│  ├─ author                第三方作者目录
│  │  ├─ mod_name           第三方mod_name插件的目录
│  │  │  ├─ mod_name.js     第三方mod_name插件本体
│  │  │  ├─ mod_name.css    第三方mod_name插件样式
│  │  │  └─ ...
│  │  └─ ...
│  └─ ...
│
├─ layui.all.js             一次性载入layui
└─ layui.js                 模块化载入layui

2. スタイル

Style Scss を使用して作成することをお勧めします。良い巣作り。 umd3.scss のデモをご覧いただくことをお勧めします (デモのあとがきを参照)。

他のフロントエンド フレームワークとの競合など、異なるプラグイン作成者間のスタイルの競合を防ぐため。したがって、lay で始まり、その後に作成者名が続くことを規定します。作成者名 [lay-vlice] を省略してから、btn [lay-vlice-btn] のようにスタイル モジュール名を続けます。好きなだけスタイルを書いてください。多数のプラグインがある場合、相互に競合しないように、プラグイン名を追加することをお勧めします。最終クラスは [lay-vlice-umd-btn] です。

これによりクラスが非常に長くなってしまいます。同じクラスを何度も書くのは面倒ではないでしょうか?これが、Scss の使用をお勧めする理由です。

3. カプセル化

オリジナルのプラグインまたはサードパーティのプラグインには、次の 3 つの状況があります:

1. ネイティブ JS で書かれた基本的なプラグイン(Vue.js など)

2. JQuery に基づいて作成された JQ プラグイン (Select2.js など)

3.layui に基づいて作成された高度なプラグイン (FormSelects .jsなど）。

UMD パッケージ化は、これら 3 つの状況をサポートできます。したがって、プラグインの作成には UMD を使用することをお勧めします。

(1) プリクラスなしの UMD カプセル化 - ネイティブ js

(2) JQuery に基づく UMD カプセル化 - JQ プラグイン

(3) Lauiui ベースの UMD カプセル化記述方法 - 高度なプラグイン

##4. はじめに

時間をかけてプラグイン ローダー ベースのプラグインを書きましたテスト後、公式モジュールとサードパーティのプラグインは正常に導入できますが、コンピュータのパフォーマンスやネットワークの状況によっては、約 100 ～ 400 ミリ秒の遅延が発生します。大きな問題ではありません。ここではこの仕様に基づいて開発されたLayUIプラグインの導入方法を説明します。

まず、私のローダー
mods.js をダウンロードする必要があります。ローダーは [layui/mods/mods.js] にあります。それを入手するための最初のステップは、次のリストを変更することです。ローダー変数。

layui.use を使用してローダーを導入します。次に、公式モジュールまたはサードパーティのプラグインを MOD に導入し、ローダーのコールバックにビジネス コードを記述します。詳細については、私が作成したデモを確認してください (追記でダウンロード)

layui.use('mods',function(mods){
    // umd2和umd3都是扩展插件，所以放到最后。
    mods(['layer','form','umd1','umd2','umd3'],function(layer,form,umd1){
        var $ = layui.$;

        layer.msg();
        form.render();
        umd1.func();
        $.umd2();
        $('body').umd2();

        // umd3扩展
        layer.maxopen();
    });
});

Example

https://cdn.vlice.cn/layui/layui-2.3.0.zip

layui の詳細については、

layui 使用法チュートリアル 列に注目してください。

以上がLayUIサードパーティプラグイン開発仕様の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。