16

多くの場合、jQuery を使用する場合、複数のプラグインを含める必要が生じます。特に一部のプラグインが追加のコンポーネント (画像や CSS ファイル) を必要とする場合、これはすぐに厄介な作業になる可能性があります。

次の「推奨される」方法にはどのようなものがありますか。

  • を。必要なファイル/コンポーネント ( .js.cssおよびイメージ) を保守しやすい方法で管理します。
  • b. これらのプラグイン パッケージを最新バージョンに更新してください

私は必ずしもこれを行うためのツールを探しているわけではありません (ただし、この管理を実行できるツールがあれば便利だと思います)。

4

6 に答える 6

11

更新:最近、 BowerComponentBrowserifyがあり、これらすべてを自動的に処理してくれます。

私がしていることを誰もカバーしていないことに驚いています。スクリプトとリソースを管理する方法は次のとおりです。

セットアップに取り組んでいる各プロジェクトがありますSVN。私が含めるほとんどすべてのスクリプトにはSVNミラーがあります(最近はgithubにsvnがあります)。これは、SVN外部を使用して、そのプロジェクトのブランチやバージョン、または必要なものをプロジェクトscriptsフォルダーに直接フェッチできることを意味します。SVNを使用しているため、これらのスクリプトの追跡、管理、更新は簡単です。

プロジェクトがSVNにない場合は、作成した共通のSVNプロジェクトに追加するだけです。たとえば、プロジェクトAとプロジェクトBはどちらもを使用するため、共通のプロジェクトのSVNリポジトリにjquery-project-not-in-svn固執してから、SVN外部を使用します。jquery-project-not-in-svn前に説明したように、プロジェクトAとBはそれを参照します。

これで、管理、フェッチ、および更新について説明します。

スクリプトのインクルードとリクエストについて説明します。

各プロジェクトには、必要なすべてのスクリプト(SVN外部によって管理される)を含む独自のスクリプトディレクトリがあるため、サーバーの負荷を軽減するためにそれらを縮小することを心配する必要があります。各プロジェクトMakefileのルートには、コマンドを含むが含まれていますupdate。このコマンドは以下を実行します:

  • SVN更新を実行します(これにより、すべてのSVN外部が適切に更新されます)
  • それが完了すると、すべてのjsファイルをパックして縮小しscripts/all.jsますscripts/all.min.js

正確なMakefileものを共有することはできませんが、CSSとJavascriptのパッキング/マージとミニファイを処理する公開されているものを共有することはできます。リンクは次のとおりです:http: //github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

これらのことを行うことにより、私たちは次のことを達成しました。

  • 複数のプロジェクトにわたる外部スクリプトリソースの管理
  • 適切なスクリプトリソースの自動更新
  • プロジェクトで使用されているすべてのスクリプトリソースを1つのファイルにパックする
  • 1つのJSリクエストと1つのCSSリクエストのみが実行されるように、そのファイルを縮小します。

幸運なことに、詳細を知りたい場合は、コメントを投稿してください。

于 2010-07-20T08:09:25.750 に答える
2

私自身の個人的な「推奨」方法は、すべてのJavaScriptファイルを1つのインクルードフォルダーに、すべてのCSSファイルを別のフォルダーに、すべての画像を3番目のディレクトリに保持することです。プロジェクトのショートカット関数を作成し、それをまたはのように使用でき<?php scriptlink( 'jquery.tooltip' ); ?>ます<?php stylelink( 'jquery.thickbox' ); ?>。各ショートカット関数は、引数としてファイル名(のみ)を取り、そのリソースタイプの完全なHTMLタグを(順番に)出力します<script type="text/javascript" src="/includes/js/jquery.tooltip.js"></script><link rel="stylesheet" href="/includes/css/jquery.thickbox.css" />

画像を必要とする私が遭遇したほとんどのjQueryプラグインでは、スクリプト自体またはプラグインの呼び出しに使用されるコードで構成変数を指定できます。スタイルシートは、スクリプトをいじくり回すことなく、非常に簡単に含めることができます。

これまでのところ、この方法は私をかなり正気に保っていたので、かなりうまくいくと思います。特定のプラグインを貼り付けた場所で髪を引き裂くことはありません。関数に含めるだけです。(システムは、インクルードディレクトリのサブディレクトリもサポートしているため、<?php scriptlink( 'ui/accordion' ); ?>equalsなどです<script type="text/javascript" src="/includes/js/ui/accordion.js"></script>。)

YMMVはもちろんですが、私が抱えている唯一の問題は、プラグインの作成者がjquery.plugin.pack.jsバージョンの配布を開始するとき、jquery.plugin.min.jsまたはその逆の場合のアップグレードです。これは、実際に探しているファイル名を変更することを忘れないためです。

(これらの単純な関数の実装を省略したため、バージョンによって、指定されたファイル名のさまざまなバリアントがチェックされる可能性があります。引数scriptlink()jquery.plugin、の場合、関数はファイルシステムをチェックして存在するかどうかを確認し、 jquery.plugin.pack.js存在しない場合は検索します。jquery.plugin.min.js、および探していない場合jquery.plugin.jsなど)

于 2010-07-19T22:05:49.867 に答える
2

お使いのバージョンで問題が発生したり、更新されたプラグインで利用可能な新しい機能を使用したい場合を除き、更新しないことをお勧めします. ことわざにあるように、壊れていない場合は、修正しないでください。

于 2010-07-13T00:33:01.263 に答える
2

CDN は優れていますが、デバッグには適していません。デバッグには実際にスクリプトへのローカル アクセスが必要な場合があり、本番モードになるまで CDN は役に立ちません。このため、本番環境に移行するまで、デバッグ バージョンと縮小バージョンの両方を保持し、結果とベンチマークの応答時間を比較したいと考えています。

于 2010-07-20T21:57:16.000 に答える
1

すべての jQuery プラグインは、バージョン番号を含むサブフォルダーに整理されています。

  • /assets/js/plugin.1.4.1/plugin.1.4.1.min.js
  • /assets/js/plugin.1.4.1/images/image.gif

1.4.2 に更新する必要がある場合は、問題なく新しいフォルダーにドロップできます。必要に応じて、サイトのさまざまな部分で特定のバージョンのプラグインを使用することもできます。サイトが大きく、いくつかの異なるプラグインを使用している場合、plugin.js ファイル内のソース コメントを掘り下げることなく、バージョン番号をすばやく確認できると便利です。

プラグインに CSS が必要な場合は、プラグイン CSS からベース スタイルを取り出し、これらをメインのスタイルシートにバンドルします。追加の CSS ファイルを要求すると費用がかかり、10 分の 9 はとにかくカスタマイズされます。画像と同様に、画像のカスタマイズを行う場合は、これらをメインの画像スプライトにバンドルします。それ以外の場合は、画像をその plugin.1.4.1 ディレクトリにリンクします。

はい、レポにさらにいくつかのファイルができますが、それは次のことを意味します。

  • パスを更新するだけでプラグインを簡単にアップグレードできます
  • プラグインの問題を簡単にデバッグできる
  • すべてが壊れた場合は、以前のバージョンにロールバックできます
于 2010-07-19T22:28:21.887 に答える
1

より一般的なプラグインには、Google CDN (コンテンツ配信ネットワーク) を利用できます。Google が最新の状態に保ち、バージョンをすばやく選択/切り替えることができます。また、CDN を使用する他の Web サイトからのキャッシュの利点も得られます。

jQuery の例:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

また、より高いバージョンを自動的に使用する場合は、バージョンを 1.4 (自動 1.4.x 更新) または 1 (自動 1.xx 更新) に変更します。残念ながら、すべてのプラグインが利用できるわけではありませんが、主要なものの多くは利用できます。

于 2010-07-19T22:36:32.623 に答える