ホームページ > 記事 > ウェブフロントエンド > 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(['common'], function () { var common = layui.common; common.ajax('//route.showapi.com/32-9', 'post', 'json', { 'showapi_appid': 28043, 'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15', 'q': 'hello' }, function (res) { alert(JSON.stringify(res)); }); }); </script>
index.html にアクセスして、以下の図の戻り結果を確認してください。モジュールが正常にカプセル化されたことを証明します。
以上がLauiui パッケージング モジュールのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。