jQueryプラグインをエンバーアプリケーションに統合する方法

キーポイント

JQueryプラグインをEmberアプリケーションに統合すると、jQueryプラグインのシンプルさと汎用性とEmberの堅牢性とスケーラビリティを組み合わせることにより、その機能とユーザーエクスペリエンスを向上させることができます。
jQueryプラグインをエンバーアプリケーションに統合し、最初にNPMパッケージマネージャーを使用してjQueryをインストールし、次に関連するエンバーコンポーネントにプラグインをインストールします。
エンバーコンポーネントのjQueryプラグインの初期化は、
• の代わりにdidInsertElementの代わりにthis.$を使用して、このコンポーネントのみでプラグインが初期化されていることを確認し、他のコンポーネントに干渉しません。 $
冗長イベントハンドラーを避けるために、コンポーネントをDOMから削除しようとしているときに、プラグインを使用して設定されたイベントを削除する必要があります。
• willDestroyElement

この記事は、クレイグ・ビルナーによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！

jQueryの人気を考えると、特にEmberなどのフレームワークを使用する場合、Web開発の分野で重要な役割を果たしています。頻繁に使用されることは驚くことではありません。このフレームワークのコンポーネントは、プロジェクトで単一の責任を引き受けるように設計されているため、jQueryプラグインに似ています。この記事では、シンプルなエンバーコンポーネントを開発します。このチュートリアルは、jQueryプラグインをエンバーアプリケーションに統合する方法を示しています。このコンポーネントは、プラグインのラッパーとして機能し、画像サムネイルのリストを表示します。サムネイルをクリックするたびに、その大きなバージョンは画像プレビューターに表示されます。これは、クリックされたサムネイルの

属性を抽出することによって行われます。次に、Previewerの srcsrcプロジェクトの設定src

まず、新しいEmberプロジェクトを作成しましょう。まず、CLIで次のコマンドを実行します：

完了後、次のコマンドを実行してプロジェクトを作成できます。

これにより、

npm install -g ember-cli

というフォルダーに新しいプロジェクトが作成され、必要な依存関係がインストールされます。次に、

を書いてディレクトリに移動します。このプロジェクトには、このチュートリアルで編集するさまざまなファイルが含まれています。編集する必要がある最初のファイルは、

ファイルです。それを開き、現在のエンバーバージョンを2.1.0に変更します。このプロジェクト用に作成したjQueryプラグインは、Bowerパッケージとして利用できます。このラインをプロジェクトに含めることができます

ember new emberjquery

ファイルに追加できます：

emberjquery cd emberjqueryさあ、プラグインとEmberの新しいバージョンをインストールするには、次のコマンドを実行します。

npm install -g ember-cli

このプラグインはEmberコンポーネントではないため、必要なファイルを手動で含める必要があります。 ember-cli-build.jsファイルで、returnステートメントの前に次の2行を追加します。

ember new emberjquery

これらの行は2つのファイルをインポートし、ビルドに含めます。 1つはプラグインファイル自体、もう1つはプラグインのCSSファイルです。 StyleSheetはオプションであり、プラグインを自分でスタイリングする予定がある場合は除外できます。

新しいプラグインコンポーネントを作成しますアプリケーションにプラグインを含めた後、次のコマンドを実行して新しいコンポーネントの作成を開始しましょう。 このコマンドは、クラスファイルとテンプレートファイルを作成します。テンプレートファイルで、

ファイルからコンテンツを貼り付けます。スクリプトを除く、コンテンツを

タグに配置します。現時点では、テンプレートファイルは次のようになります。

クラスファイルで、

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

：

という名前の関数を追加します bower_components/jquerypic/index.html 私たちは今、重要な時点にいます。 jQueryを使用すると、以下に示すように、通常、プラグインの初期化が

関数で発生します。

bower install

ただし、Emberコンポーネントの場合、この初期化はdidInsertElementという名前の特別な関数で発生します。この関数は、コンポーネントの準備ができたときに呼び出され、DOMに正常に挿入されています。この関数にコードを包むことで、2つのことを保証できます。

// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");

return app.toTree();
};

プラグインは、このコンポーネントのみで初期化されています

document.readyプラグインは、他のコンポーネント

に干渉しません

ember generate component jquery-pic

プラグインを初期化する前に、現在の状態のコンポーネントを使用しましょう。これを行うには、次のコマンドを使用してインデックステンプレートを作成します。 didInsertElement

次に、次のコードをテンプレートに追加してコンポーネントを使用します。

• 終了後、次のコマンドでエンバーサーバーにロードします。
このコマンドを使用してサーバーを起動します。選択したブラウザを開き、コマンドラインインターフェイスで指定されたURLにアクセスします。画像プレビューターの下にサムネイルのリストが表示されます。サムネイルをクリックすると、何も起こらないことに注意してください。これは、プラグインイベントハンドラーがまだないためです。やりましょう！しかし、正しい初期化を実行する方法を説明する前に、多くの開発者が犯す間違いをお見せします。このソリューションは一見機能しているようですが、導入するエラーを示すことで最良のソリューションではないことを証明します。

（以下の内容は元のテキストに似ていますが、文は調整され、磨かれ、元の意味を維持しています）<p></p>

{{yield}}
<div class="jquerypic">
  <div class="fullversion-container">
    <img class="full-version lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
  <div class="thumbnails">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
</div>

エンバーコンポーネントの初期化

問題を示すには、まず次のコードを

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});

関数に追加しましょう：

npm install -g ember-cli

ブラウザウィンドウに切り替えると、2つのコンポーネントインスタンスが表示されます。インスタンスのいずれかのサムネイルをクリックすると、エラーに気付くことができます。両方のインスタンスのプレビューターは、クリックするインスタンスだけでなく、変更されます。この問題を解決するには、初期化を少し変更する必要があります。使用する正しいステートメントは次のとおりです

ember new emberjquery

違いは、

の代わりに

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

を使用していることです。 2つのコンポーネントインスタンスが適切に機能するようになりました。あるインスタンスのサムネイルをクリックすると、別のコンポーネントに影響しないはずです。コンポーネントで

を使用する場合、そのコンポーネントのみであるjQueryハンドラーを参照します。したがって、実行するDOM操作は、コンポーネントインスタンスにのみ影響します。さらに、任意のイベントハンドラーは、このコンポーネントでのみ設定されます。グローバルjQueryプロパティthis.$を使用する場合、ドキュメント全体を参照します。これが、初期化が別のコンポーネントに影響する理由です。このエラーを示すためにプラグインを変更する必要があります。これは、将来の記事のトピックかもしれません。ただし、操作コンポーネントのDOMのベストプラクティスは$を使用することです。 this.$ $プラグインを破壊しますthis.$

わかりました、これまでのところ、イベントハンドラーのセットアップ方法を学びました。次に、プラグインで設定したイベントを削除する方法を示します。コンポーネントがDOMから削除されようとしている場合、これを行う必要があります。冗長なイベントハンドラーがそこに垂れ下がることを望まないので、これを行う必要があります。幸いなことに、Emberコンポーネントは

と呼ばれる別のフックを提供します。このフックは、Emberが破壊されようとしているたびに呼び出され、コンポーネントインスタンスがDOMから削除されます。私のプラグインには、プラグインインスタンスで呼び出すことができる

メソッドがあります。この方法は、Emberが提供する特別なフックで呼び出す必要があります。次の関数をコンポーネントに追加します：

willDestroyElement stopEventsこのように

関数を変更します：

bower install

npm install -g ember-cli

didInsertElement関数では、コンポーネントのプロパティにプラグインインスタンスを保存するだけです。これを行い、他の機能でアクセスできるようにします。 willDestroyElement関数では、プラグインインスタンスのstopEventsメソッドを呼び出しています。これはベストプラクティスですが、アプリケーションはこのフックをトリガーすることはできません。したがって、デモクリックハンドラーを設定します。このハンドラーでは、プラグインインスタンスのstopEventsメソッドを呼び出します。これにより、すべてのイベントハンドラーが予想どおり削除されたことを示すことができます。次に、コンポーネントにクリック関数ハンドラーを追加しましょう：

ember new emberjquery

以下に示すように、 <p></p>タグをコンポーネントテンプレートに追加します。 <p></p> このタブをクリックすると、プラグインを破壊する操作を呼び出します。段落をクリックした後、プラグインはクリックイベントに応答しなくなります。イベントを再度有効にするには、

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

フックで行ったようにプラグインを初期化する必要があります。最後のセクションを通して、単純なエンバーコンポーネントを完成させます。おめでとう！

stopEventsdidInsert（結論とFAQのパーツは元のテキストに似ていますが、文は元の意味を調整および磨き、維持することを除いて）

結論

このチュートリアルでは、jQueryプラグインが私たちのキャリアにおいて重要な役割を果たしていることがわかりました。その強力なAPIと利用可能なJavaScriptフレームワークにより、これら2つの世界を組み合わせて調和して機能させる方法を理解することは非常に便利です。この例では、コンポーネントはプラグインのラッパーとして機能し、画像サムネイルのリストを表示します。サムネイルをクリックするたびに、その大きなバージョンは画像プレビューターに表示されます。これは単なる例ですが、必要なjQueryプラグインを統合できます。繰り返しますが、コードはGitHubで利用できます。 EmberアプリでjQueryプラグインを使用していますか？それらについて議論したい場合は、以下のセクションでお気軽にコメントしてください。 JQueryプラグインをEmberアプリケーションに統合することについてのFAQ

jQueryプラグインをエンバーアプリケーションに統合する目的は何ですか？

jQueryプラグインをEmberアプリケーションに統合すると、アプリケーションの機能とユーザーエクスペリエンスを大幅に向上させることができます。 jQueryプラグインは、エンバーアプリケーションに簡単に統合できるアニメーション、フォーム検証、インタラクティブな要素など、さまざまな機能を提供します。この統合により、開発者はJQueryとEmberの力を活用して、jQueryプラグインのシンプルさと汎用性とEmberの堅牢性とスケーラビリティを組み合わせることができます。

私のemberアプリケーションにjqueryをインストールする方法は？

emberアプリケーションにjqueryをインストールするには、NPMパッケージマネージャーを使用できます。端末でコマンド

を実行します。これにより、プロジェクトの依存関係にjQueryが追加され、アプリケーションで実行可能になります。

私のemberアプリケーションでjqueryプラグインを使用する方法は？

jQueryをインストールした後、関連するエンバーコンポーネントにインポートして、emberアプリケーションでjqueryプラグインを使用できます。その後、プラグインのドキュメントに従ってプラグインの機能を使用できます。プラグインが使用しているjQueryのバージョンと互換性があることを忘れないでください。

jQueryとEmberの間に互換性の問題はありますか？

しばしば、jqueryとEmberは一緒にうまく機能します。ただし、使用しているJQueryとEmberのバージョンに応じて、互換性の問題がいくつかある場合があります。 jqueryとEmberのドキュメントを常に互換性があることを確認してください。

jqueryをインストールせずにemberのjqueryプラグインを使用できますか？

いいえ、jqueryをインストールせずにエンバーのjqueryプラグインを使用することはできません。 jQueryプラグインはjQueryライブラリの上に構築されており、実行する必要があります。したがって、jQueryプラグインを使用する前に、まずjqueryをインストールする必要があります。

私のemberアプリケーションでjqueryを更新するにはどうすればよいですか？

を実行します。これにより、jQueryが最新バージョンに更新されます。 npm update @ember/jquery emberアプリケーションで複数のjQueryプラグインを使用できますか？

はい、Emberアプリケーションで複数のjQueryプラグインを使用できます。ただし、あまりにも多くのプラグインを使用すると、アプリケーションのパフォーマンスに影響する可能性があることに注意してください。新しいプラグインを追加して、予想どおりに実行されることを確認した後、常にアプリケーションを徹底的にテストしてください。

emberアプリケーションのjqueryプラグインの問題をトラブルシューティングする方法は？

EmberアプリケーションでjQueryプラグインの問題に遭遇した場合は、まず既知の問題やトラブルシューティングのヒントについてプラグインのドキュメントを確認してください。まだ問題が発生している場合は、プラグイン開発者またはEmberコミュニティにお問い合わせください。

プログラミングエクスペリエンスなしで、EmberアプリケーションでjQueryプラグインを使用できますか？

プログラミングエクスペリエンスなしでEmberアプリケーションでjQueryプラグインを使用できますが、JavaScriptとEmberの基本を理解することをお勧めします。これにより、プラグインを効率的に統合して使用する方法を簡単に理解できるようになります。

私のemberアプリケーションでjqueryプラグインを使用する代替手段はありますか？

はい、EmberアプリケーションでjQueryプラグインを使用する代替手段があります。 Ember自体には、jQueryプラグインに同様の機能を提供できるアドオンの豊富なエコシステムがあります。さらに、ネイティブJavaScriptまたは他のJavaScriptライブラリを使用して、同じ結果を達成できます。ただし、jQueryプラグインは通常、よりシンプルで便利なソリューションを提供します。 <p></p>

以上がjQueryプラグインをエンバーアプリケーションに統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。