Lauiui パッケージング モジュールのチュートリアル

layui は、中国人によって開発された非常にシンプルな UI フレームワークです。モジュール読み込み方式を使用しているため、使用中に必然的に独自のモジュールを追加する必要があります。このチュートリアルでは、その方法を説明します。単純なモジュールです。

推奨: layui 使用チュートリアル

日常の使用では、ajax は広く使用されていると言えます。そこで、ここでは簡単に ajax をカプセル化する独自のモジュールを追加します。使用。

注: モジュールの読み込みにはサーバー環境のサポートが必要なので、このチュートリアルを読む前に、ローカル エリアでローカル サーバー環境をセットアップしてください。これはこのチュートリアルの範囲外です。Baidu 自身で行ってください。

1. プロジェクト ディレクトリを構築します

まず、layui Web サイトからlayui パッケージをダウンロードし、独自のプロジェクトに配置します。ここでは、新しい空のプロジェクトを使用します。layui を追加した後、ディレクトリは構造は次のとおりです:

2. モジュール ファイルを作成します

ここで、プラグインのlayuiフォルダーの下に新しいモジュール フォルダーを作成し、独自のモジュール ファイルを保存します。このフォルダーに新しい common.js ファイルを作成して、最初のモジュールを作成します。ファイルの内容は次のとおりです:

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() メソッドは、layui のモジュール定義メソッドです。このメソッドは 2 を受け取りますパラメーター、最初のパラメーターは依存モジュールであり、ここでは jquery に依存していることがわかります; 2 番目のコールバック メソッド、ここではそれらのメソッドを提供するモジュールのコンテンツを定義します。 obj オブジェクト。このオブジェクトには、jquery の ajax を呼び出して操作を実行するための ajax メソッドがあります。他の jquery プラグインをカプセル化している場合は、プラグインの js コードをlayui.define() のコールバック メソッドに置くだけです。

exports() は出力インターフェイスです。このメソッドにも 2 つのパラメータがあります。1 つ目は出力モジュールの名前で、2 つ目は出力するオブジェクトです。

これでモジュールが作成されました。後でメソッドを追加する必要がある場合は、obj オブジェクトにメソッドを追加するだけです。

3. コンポーネント ディレクトリ モジュールをロードするlayuiを設定します

モジュールを作成した後、layuiを設定する必要があります。このモジュールでは、通常、この構成はグローバル js で完了します。ここで、assets/js の下に新しい global.js ファイルを作成します。ファイルの内容は次のとおりです:

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

layui .config() は、layui メソッドの設定であり、基本パラメータはモジュールの保存ディレクトリを表します。このディレクトリは、Web サイトのアクセス ルート ディレクトリから計算されます。前の手順からわかるように、モジュールの保存パスは / です。 assets/plugin/layui/modules/ フォルダ ; extend は実際のモジュール名を定義します。上記のコードのコロンの前の common はモジュールの名前を表しており、これは将来モジュールをロードするときに使用する名前です。コロンの後の「common」はモジュール ファイルの名前を表します。ここでは実際、/assets/plugin/layui/modules/common.js ファイルを参照しています。js サフィックスは省略でき、サフィックスは自動的に追加されますロード時。

4. モジュールを使用する

モジュールが定義されたら、モジュールを使用できます。モジュールの使用は、実際には、layui の組み込みモジュールを使用するのと同じです。次に、プロジェクトのインデックスを変更しましょう.html ファイル , このファイルでは、モジュールの ajax メソッドを使用してオンライン翻訳インターフェイスにアクセスします。ファイル コードは次のとおりです:

<script src="assets/plugin/layui/layui.js"></script>
<script src="assets/js/global.js"></script>
<script>
    layui.use([&#39;common&#39;], function () {
        var common = layui.common;
        common.ajax(&#39;//route.showapi.com/32-9&#39;, &#39;post&#39;, &#39;json&#39;, {
            &#39;showapi_appid&#39;: 28043,
            &#39;showapi_sign&#39;: &#39;fd5ce066f69441bfa078c0ad16129b15&#39;,
            &#39;q&#39;: &#39;hello&#39;
        }, function (res) {
            alert(JSON.stringify(res));
        });
    });
</script>

index.html にアクセスして、以下の図の戻り結果を確認してください。モジュールが正常にカプセル化されたことを証明します。

以上がLauiui パッケージング モジュールのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。