jQueryの初期ロードメソッドの競合

フロントエンド開発者にとって jQuery は欠かせないツールとなっていますが、人それぞれ使用習慣や使用方法があると思います。ただし、仕事上で問題が発生することもあるので、今日は jQuery の初期読み込みメソッドの競合を解決する方法について説明します。

問題の説明

jQuery を使用して Web サイトを構築する場合、通常、ページが読み込まれるときに jQuery ライブラリ ファイルを導入し、初期の jQuery 操作を実行します。ただし、場合によっては、ページ上の一部のコンポーネントまたはプラグインが適切に動作できず、コンソールに次のエラーが報告されることがあります。

Uncaught TypeError: $(...).methodName is not a function

これは、初期化メソッドに競合があるためです。 jQuery ライブラリ ファイルが正しく呼び出されないため、メソッドの問題です。

解決策

1. jQuery.noConflict() を使用します。

jQuery.noConflict() は、jQuery によって提供されるメソッドで、2 つの異なるバージョン間の競合を排除するために使用できます。 jQueryライブラリ。次のように、最初の jQuery ライブラリをページに導入し、noConflict() メソッドを呼び出してそれを変数に割り当て、コンポーネントを参照するだけです。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
  $j('#example').datepicker();
});
</script>

このメソッドは、次の 2 つの jQuery スクリプトに適しています。呼び出し状況ですが、複数のコンポーネントが異なる js ファイルで参照されている場合、noConflict() メソッドを複数回使用すると問題が発生する可能性があることに注意してください。

2. 自己実行関数

自己実行関数を使用すると、コードを別のスコープに分離して、そのコードが他のコードに影響を与えることができなくなります。自己実行関数を使用すると、jQuery ライブラリ ファイル内のメソッドを関数のスコープに制限できます。次に例を示します。

(function($){
  $(document).ready(function(){
    $('#example').datepicker();
  });
})(jQuery);

これにより、jQuery ライブラリ ファイル内の $ が self 内にのみ存在することが保証されます。 -関数を実行すると、他のライブラリファイルと競合しません。

3. $() の代わりに jQuery() を使用します。

jQuery ライブラリ ファイルでは、$() は jQuery のショートカットであり、これも競合の問題の原因になります。競合を避けるために、$() の代わりに jQuery() を使用できます。例:

jQuery(document).ready(function(){
  jQuery('#example').datepicker();
});

この方法では、競合の問題を回避できるだけでなく、コードが読みやすく、理解しやすくなります。

概要

jQuery を使用して Web サイトを開発する場合は、その初期化メソッドの競合に特別な注意を払う必要があります。この問題は、jQuery.noConflict()、自己実行関数を使用するか、$() の代わりに jQuery() を使用することで効果的に回避できます。同時に、開発中はコードの可読性と保守性の向上に注意を払う必要があります。

以上がjQueryの初期ロードメソッドの競合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。