jQuery_jquery の使用に影響を与える 14 の側面

幸いなことに、人々は通常、さまざまなプラグインから選択できます。ただし、1 つしか使用しない場合でも、それを使用する価値があるかどうかを判断してください。コードベースに不正なコードを決して導入しないでください。

プラグインが必要ですか?

まず最初に、プラグインが必要かどうかを判断します。必要がない場合は、ファイル サイズと時間の両方を節約できます。

1. 自分で書いた方が良いですか？

関数が非常に単純な場合は、自分で作成してください。 jQuery のプラグインにはさまざまな機能がバンドルされていることが多く、過剰になる可能性があります。この場合、単純な関数を手動で作成する方が合理的であることがよくあります。もちろん、作業量にはある程度の目安があります。

たとえば、より高度な機能が必要な場合は、jQuery UI のアコーディオンが適しています。ただし、パネルの開閉だけが必要な場合は。 Web サイトで jQuery UI をまだ使用していない場合は、jQuery の slideToggle() または animate() を検討してください。

2. 同様のプラグインを既に使用していますか?

プラグインでは必要なことすべてが解決できないと知り、それを補う別のプラグインを探したくなるものです。しかし、同じアプリケーションに 2 つの同様のプラグインを含めると、間違いなく JavaScript が肥大化します。すべてのニーズをカバーするプラグインを見つけることができますか?そうでない場合、これらのプラグインの 1 つを拡張して必要なものをすべてカバーできますか?同様に、プラグインを拡張するかどうかを決定するときは、利点と開発時間の比較を検討してください。

たとえば、jQuery のライトボックスはギャラリーにポップアップ写真を表示する優れた方法であり、simpleModal はモーダル情報をユーザーに表示する優れた方法です。しかし、なぜあなたの Web サイトでは両方の方法が使用されているのでしょうか?どちらかを簡単に拡張して、両方のニーズをカバーできます。さらに良いのは、Colorbox など、すべてをカバーするプラグインを見つけることです。

3.JavaScript が必要ですか?

場合によっては、JavaScript が必要ありません。ホバー関数や CSS3 トランジション関数などの CSS 擬似セレクターは、JavaScript ソリューションよりもはるかに高速に、さまざまな動的効果をカバーできます。さらに、多くのプラグインはスタイルのみを提供しますが、マークアップと CSS を使用する方が良いのではないかと思います。

動的コンテンツを表示し、条件付きプロンプトが必要な場合は、jQuery ツールチップが不可欠です。ただし、少数の場所でのみヒントが必要な場合は、純粋な CSS を使用することをお勧めします (この例を参照)。静的プロンプトの場合は、さらに一歩進んで CSS3 トランジションを使用してアニメーション化することができますが、アニメーションは特定のブラウザーでのみ機能することを忘れないでください。

プラグインをレビューすると、プラグインの品質が低いことを示す一連の警告サインが表示されます。ここでは、JavaScript から CSS、マークアップまで、プラグインのあらゆる側面を見ていきます。プラグインの配布方法も検討します。プラグインに警告があると、そのプラグインは考慮の対象から除外されます。幸運にも複数のプラグインから選択できる場合は、これらの注意事項が選択肢を絞り込むのに役立ちます。ただし、選択肢が 1 つしかない場合でも、警告が多すぎる場合は諦めたほうがよいでしょう。事前に頭痛を軽減することができます。

4. 奇妙なオプションまたはパラメータの構文

jQuery を使用する場合、開発エンジニアは関数がパラメータをどのように受け入れるかについて懸念します。プラグイン開発者が特殊な構文を使用している場合、jQuery または JavaScript のプログラミング経験があまりないと考えるのが自然です。

一部のプラグインは jQuery オブジェクトをパラメーターとして受け入れますが、オブジェクトの連鎖を許可しません (例: $('a').myPlugin(); の代わりに $.myPlugin( $('a') );これは大きな警告です。

コード:

$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));

5. ドキュメントがほとんどないか、まったくありません

ドキュメントがなければ、プラグインを使用することは非常に困難です。なぜなら、プラグインは質問に対する答えを探すときに最初に思いつく場所だからです。ファイルにはさまざまな形式があり、適切なドキュメントが最適ですが、優れたコード コメントも同様に優れています。ドキュメントがない場合、またはブログに載せる単純な例にすぎない場合は、他のオプションを検討することをお勧めします。優れたドキュメントを見ると、プラグインの作成者があなたのようなユーザーを気にかけていることがわかります。また、彼らが他のプラグインを調査し、優れたドキュメントの価値を認識していることも示しています。

6. サポート実績が乏しい

サポートが不足していると、問題が発見されたときに助けを得るのが難しくなります。さらに懸念されるのは、プラグインがしばらく更新されていないことを示していることです。オープンソース ソフトウェアの利点の 1 つは、多くの注目を集め、デバッグや改善に役立つことです。作者がこれらの人々について語らない場合、プラグインは更新されません。

検討していたプラグインが最後に更新されたのはいつですか?最後にメッセージに返信したのはいつですか?すべてのプラグインに jQuery プラグイン Web サイトのような強力なサポート システムが必要なわけではありません。更新されていないプラグインには注意してください。

過去の技術サポート記録があり、作成者がバグや要件の強化に対応していることは、緑色の兆候です。サポート フォーラムがあるということは、プラグインが十分にサポートされていることを示します。作成者ではない場合でも、少なくとも問題の解決に役立つフォーラムが存在します。

7. 圧縮版はありません

かなり軽い警告ではありますが、プラグインの作成者がソース コードから縮小バージョンを提供しない場合は、おそらくパフォーマンスにあまり注意を払っていない可能性があります。もちろん、圧縮を自分で行うこともできますが、この警告は時間の無駄ではありません。これは、プラグインにさらに深刻なパフォーマンスの問題が含まれている可能性があるというヒントです。

一方、圧縮、パック、gzip 圧縮されたバージョンをダウンロード用に提供することは、兆候です。

8. 奇妙なマークアップが必要です

プラグインにマークアップが必要な場合、マークアップは高品質である必要があります。意味論的な意味に準拠し、十分な柔軟性を備えている必要があります。フロントエンド テクノロジーが貧弱であることに加えて、奇妙なマークアップによって統合がより困難になる可能性もあります。優れたプラグインは、使用するほぼすべてのマークアップをカバーできますが、悪いプラグインを使用することは、フープを飛び越えるようなものです。

場合によっては厳密なマークアップが必要となるため、一定の範囲内での使用を許可すべきである。基本的に、機能がより具体的であればあるほど、より具体的なマークアップが必要になります。完全に柔軟なマークアップは、自然なドロップイン jQuery オプションから統合するのが最も簡単です。

9. CSS の多用

多くの jQuery プラグインには CSS が含まれており、CSS の品質は JavaScript と同じです。 CSS が多すぎるのは間違いなく悪い兆候です。ただし、何が「終わった」かはプラグインの目的によって異なります。ライトボックスや UI プラグインなどの表示に重点を置いたプラグインには、単純なアニメーション駆動型のプラグインよりも多くの CSS が必要です。適切な CSS スタイルを使用すると、テーマのスタイルに合わせてプログラムを簡単に変更できます。

10. 他に誰も使用していません

jQuery ユーザーの数は膨大で、最もまともなプラグインには、たとえそれが「50 jQuery [空白を埋める]」であっても、おそらく彼らがそれについて書いた何かがあるでしょう。たとえば、単純な Google 検索プラグインを作成し、ほとんど検索結果が得られない場合は、そのプラグインが新しいものでない限り、他のオプションを検討することもできます。また、プラグインの作成を専門とするエンジニアが見つからない場合も同様です。それを変更します。

11. 使用と観察

プラグインをテストする最良の方法は、単純にサーバー上で実行して結果を確認することです。まず、それはいくつかのルールに違反しますか? JavaScript コード スニペットを必ず確認してください。プラグインにスタイル シートが含まれている場合は、各ページでレイアウトとスタイルのエラーを探します。

また、このプラグインの効果はどうですか？遅い場合やページの読み込みに遅れがある場合は、別のプラグインを検討してください。

12. パフォーマンス評価には JSPerf を使用します

プラグインのプレゼンテーションを次のレベルに引き上げ、JSPerf でテストします。ベンチマークでは、一連の操作を複数回実行し、平均実行時間を返します。 JSPerf は、プラグインの実行速度をテストする簡単な方法を提供します。これは、ほぼ同一の 2 つのプラグインを選択する重要な方法です。

13. クロスブラウザテスト

プラグインに多くの CSS が含まれている場合は、サポートするすべてのブラウザでスタイルを必ずテストしてください。 CSS は外部スタイルシートと内部 JavaScript の両方から取得できることに注意してください。

プラグインに CSS がない場合でも、とにかくすべてのブラウザーで JavaScript エラーをチェックしてください (少なくともサポートしている IE の最も古いバージョンでは)。 jQuery のコアはすでにクロスブラウザーの問題のほとんどを処理していますが、プラグインはある程度の純粋な JavaScript を使用する傾向があり、古いブラウザーのルールに違反する傾向があります。

14. 単体テスト

最後に、さらなるクロスブラウザー テスト、つまり単体テストについて検討します。単体テストは、あらゆるブラウザーやプラットフォームをサポートするコンポーネント プラグインをテストする簡単な方法です。プラグインの作成者がダウンロード パッケージに単体テストを含めている場合、そのプラグインはすべてのクロスブラウザーとプラットフォームで動作すると確信できます。残念ながら、単体テスト データを含むプラグインはほとんどありませんが、それは QUnit プラグインを使用して独自の単体テストを実行できないという意味ではありません。

最小限の設定で、プラグインのメソッドが期待した結果を返すかどうかをテストします。 1 つのテストが失敗する限り、このプラグインに時間を無駄にしないでください。ほとんどの場合、単体テストの実行は時間の無駄ですが、QUnit はプラグインの品質を判断するのに役立ちます。

結論

jQuery プラグインの品質を評価する場合は、まずコードの品質を評価します。 JavaScript は最適化されており、エラーは発生していませんか? CSSは調整され有効になっていますか?マークアップの命名は意味論的かつ十分に柔軟ですか?これらの質問はすべて、「このプラグインは使いやすいか?」という最も重要な質問に集約されます。

jQuery のコアは最適化され、エラー チェックされており、コア チーム メンバーだけでなく、jQuery コミュニティ全体によってサポートされています。 jQuery プラグインを同じ基準に従うのは不公平ですが、少なくともいくつかは同じレビュー基準があるべきです。