layuiプロジェクトで関数layui.defineを使用する方法の紹介

前書き:

1.layui.define を深く理解し、適切に使用している場合、この記事は時間の無駄です。

2.「JavaScript モジュール開発」について聞いたことがなく、ましてや理解したことがない場合。それから、まずインターネットで「JavaScript モジュラー開発」とは何なのかを検索することをお勧めします。これは、後で説明する内容を理解するために非常に重要です。もちろん、この本の著者の概念をよりよく理解するのにも役立ちます。ライユイは表現したいと思っています。

推奨: layui フレームワーク チュートリアル

Layui を使用するとき、よく

layui.use([], function(){})

を使用しますが、注意深い友人は、layui には別の関数があることに気づくでしょう。 layui.define と呼ばれます。これは何に使用されますか?

私たちは以前、次のようなコードのような、モジュール化の概念を持たないコードを記述していました。

function entry(type) {
  if (type === 1) { handle1() }
  else if (type === 2) { handle2() }
  else { handleall() }
}

function handle1(){}
function handle2(){}
function handleall(){}

長期にわたる実践により、プログラマは JavaScript のモジュール化が不可欠であることを理解するようになりました。モジュール化の実現に関しては、企業ごとに独自の考え方や実装が存在します。彼らは考えられるすべての問題を考慮しているため、そのモジュール性を使用する必要がある複雑な構成も生じます。

layui は独自の読み込み方法を採用しており、他のモジュール実装と比較して比較的軽量です。独自のモジュール性を実現するために定義および使用する 2 つのコア関数がありますが、場合によっては混乱を招く可能性があります。会社の友人が使用中に「layui の定義関数は使用関数と似ていると思うのですが、どうすれば正しく使用できますか?」と尋ねました。

layui ドキュメントに記載されているように、関数layui.define はコンポーネントを拡張するために使用されます。関数の使用は、このコンポーネントをロードして使用することです。しかし、どのような種類のコードがコンポーネントとしてカウントされるのでしょうか? 拡張コンポーネントのページでは、優れた作成者が結果を共有していることも確認できます。しかし、これらのコンポーネントにはすべて、ビジネスに関与していないという共通点があることがわかります (これはナンセンスではありません。ビジネスを行う人が使用する場合)。

つまり、ビジネスが設計されると、それはコンポーネントではなくなりますが、この時点で名前をインターフェースに変更できます。そうすれば、関数の定義と使用の違いが理解しやすくなります。関数定義はコンポーネントまたはインターフェイスを定義することであり、関数使用はそれらのコンポーネントまたはインターフェイスを使用することです。他の人に使用してもらいたいコンポーネントまたはインターフェイスを作成する場合は、関数 define を使用しますが、関数が内部実行のみであり、他の人が呼び出す必要がない場合は、関数 use を使用します。

この時点で、この 2 つの違いを明確に理解できれば、次のアーキテクチャを持つ単純な Layui プロジェクトがより明確になるはずです。

まず、ここから簡単な構築プロジェクト layui.test.project をダウンロードする必要があります。

次に、ツールを使用してプロジェクトを開くと、ファイル ディレクトリがはっきりと確認できます。

ここでは、index.single.html に表示されている多数のlayui.defineが使用されています。ここでは、layuiのcdnを設定し、グローバルlayuiパラメータを設定します。そして最後に、私たちが使用するビジネススクリプトです。

layui.config.js を開くと、内容がはっきりとわかります。2 つのコンポーネント (名前に注意してください) を定義しました。これらにはビジネス ロジックがありません。そこで、これを lib フォルダーに配置しました。このフォルダーは、ビジネス以外のパブリック コンポーネントを保存するために使用されます。よく使うので事前に設定しておきました。

次に、エントリ スクリプト main.single.js に進みます。これは、layui 独自のモジュール jquery と form、および先ほど定義したモジュール ロガーなどを使用します (これらは他のモジュールにエクスポートしないため)。使用するので、関数使用を使用します。その中に、簡単なテストロジックを作成しました。

次に、ここでは api、const、utils がまったく使用されていないことに気づくかもしれません。

api 名前は、バックエンド インターフェイスでの処理を提供することを意味します。layui には jquery が付属しているため、jquery.ajax を使用してバックエンド インターフェイスを呼び出します。コールバック関数は一部の初心者にとって悪夢である場合があります。チェーン内で呼び出すことができる jquery の deffer オブジェクトを使用します。

ここでは jquery.ajax をカプセル化していないため、エラー処理とトークン搬送の統一された処理がなく、目に見えないワークロードをロードするため、jquery.ajax をカプセル化するインターフェイスを追加する必要があります。ここでもう一度定義します。コンポーネントlayui.ajax.js

constには定数が格納されます。ここでは、キーワードresponse.jsがインターフェイスを返すように設定されています。もちろん、これはシミュレーション用です。フロントエンドとバックエンドについては十分に議論されており、プロジェクトに直接記述することもできます。

utils にはツール クラスが保存されており、よく使用される変換時間と変換 URL をここに記述できます。

これら 3 つのフォルダーは他のビジネス ページを支援するように構成されているため、基本的にすべて遅延読み込み呼び出しを使用します。これらは関数の定義から始まり、最後に外部呼び出しのインターフェイス名をエクスポートします。事前設定が必要な lib とは異なり、使用する場合は自分で再設定する必要があります。例として utils の読み込みを示します。

layui.extend({
  utils: '/path/to/utils/index'
}).use(['utils'], function(){
  var utils = layui.utils
  // ...
})

注意： 如果你使用ftl，jsp，apsx这些由后台渲染的页面引擎，应该会有一个公共的头部，那么刚刚的全局配置 layui 文件 layui.config.js，你可以在公共的头部加入。

以上がlayuiプロジェクトで関数layui.defineを使用する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。