Lauiui フレームワークを使用して Ajax モジュールをカプセル化する具体的な手順

layui は、独自のモジュール仕様を使用して記述されたフロントエンド UI フレームワークです。ネイティブ HTML/CSS/JS の記述および構成形式に従います。しきい値は非常に低く、箱から出して使用。

(学習ビデオ共有: プログラミングビデオ)

日常的には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;http://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 にアクセスして、以下の図の戻り結果を確認してください。モジュールが正常にカプセル化されたことを証明します。

関連する推奨事項: layui チュートリアル

以上がLauiui フレームワークを使用して Ajax モジュールをカプセル化する具体的な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。