JavaScript の自己実行関数と jQuery 拡張メソッド

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

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

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

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

(function () {

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

  init();
})();

custome.js を HTML: に導入すると、自己実行関数がすぐに実行され、その後、内部で定義された init 関数が実行されます。

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

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

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

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

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

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

上記の方法で定義された拡張メソッドは、ラベル セレクター $("button") などの jQuery セレクターを通じて呼び出す必要があります。 myMethod( args)

JS の自己実行関数と jQuery 拡張メソッドを理解した後、この 2 つを組み合わせます。

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

(function (jq) {

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

  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

説明: この自己実行関数は、jQuery オブジェクトをパラメーターとして受け取り、内部で拡張機能を定義します。 jQuery のメソッド myMethod。このメソッドは、実際のロジック コードの init 関数を実行します。

呼び出し:

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

説明:

jQuery ファイルが導入されると、jQuery オブジェクトがグローバルに利用可能になります。
その後、カスタム JS ファイルが使用されます。 js が導入され、その中の自己実行関数は jQuery を受け取ります オブジェクトはパラメーターであり、すぐに実行されます jQuery 用に拡張メソッド myMethod が内部で定義されています
そして $.meMethod() または jQuery を呼び出すことで init 関数を実行できます。ページがロードされた後の .myMethod()

関連する推奨事項:

js 関数の自己実行関数

JavaScript 自己実行関数の擬似名前空間カプセル化方法_JavaScript スキル

クロージャーの使用と自己実行多数のグローバル変数の問題を解決するための JavaScript の関数_JavaScript スキル

以上がJavaScript の自己実行関数と jQuery 拡張メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。