JS 自己実行関数と jQuery 拡張機能の使用方法

今回は、JS 自己実行関数 と jQuery 拡張機能の使い方、JS 自己実行関数 と jQuery 拡張機能の 注意事項 についてお届けします。以下は実践的なケースです。見てみましょう。

通常、JS コードを別の JS ファイルに記述し、そのファイルをページに導入します。ただし、導入後、変数名や関数名が他の JS コードと競合する問題が発生することがあります。では、この問題をどうやって解決すればいいのでしょうか？スコープの分離。 JS では、スコープは関数によって分割されます。JS コードを呼び出し用の関数にカプセル化すると、変数名と関数名の競合の問題を回避できますが、カプセル化された関数自体が他の関数と重複する可能性があるため、これは確実ではありません。名前、解決策: self。 - 関数の実行。

自己実行関数は、一対のかっこを使用して 匿名関数

を追加する (パラメーターを渡す) とすぐに実行されます。関数には名前がないため、スコープの絶対的な分離と関数名の競合が実現されます。基本的な形式は次のとおりです:

(function () {
  console.log('do something');
})();

たとえば、custome.js ファイルにいくつかの JS ロジックを記述し、それを関数 init にカプセル化しました。以下に示すように、自己定義関数 init を自己実行関数でラップします。 りー HTML にcustome.js を導入すると: 、自己実行関数がすぐに実行され、その後内部で定義された init 関数が実行されます:

ただし、自己実行関数の即時実行の特性により、呼び出しが困難になります。 jQuery 拡張メソッドを定義することで、この問題を解決し、自己実行関数を呼び出して実行する主導権を得ることができます。

まず、jQuery 拡張メソッドを定義する基本的な形式を見てみましょう:

(function () {
  function init() {
    console.log('execute init...');
  }
  init();
})();

このようにして、上記で定義したメソッドを $.myMethod() または jQuery.myMethod() を通じて呼び出すことができます。

jQuery 拡張メソッドを定義する別の方法もあります: .fn

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

上記のように定義された拡張メソッドは、

タグ セレクター

$("button").myMethod(args)

など、jQuery セレクターを通じて呼び出す必要があります。 JS の自己実行関数と jQuery 拡張メソッドを理解した後、この 2 つを組み合わせます。

以下では、自己実行関数の即時実行機能を使用して jQuery 拡張メソッドを定義します:

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

この自己実行関数はパラメータとして jQuery オブジェクトを受け取り、実際の論理コードの init 関数を実行する jQuery の拡張メソッド myMethod を内部的に定義することに注意してください

電話:

りー

説明:

jQuery ファイルが導入されると、jQuery オブジェクトがグローバルに利用可能になります。

次に、カスタム JS ファイル customer.js が導入され、自己実行関数がパラメータとして jQuery オブジェクトを受け取り、即座に内部的に実行されます。 jQuery の拡張メソッド myMethod を定義します

その後、ページがロードされた後に $.meMethod() または jQuery.myMethod() を呼び出して init 関数を実行できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2でrefを使用する手順の詳細な説明

ヘッダー情報を設定するためのvue-resourceインターセプター

Ajax送信非同期リクエストメソッドの実装

以上がJS 自己実行関数と jQuery 拡張機能の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。