Detailed explanation of JavaScript self-executing functions and jQuery extension methods

This article mainly introduces JavaScript self-executing functions and jQuery extension methods in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

We usually write the JS code in a separate JS file and then introduce the file into the page. However, sometimes after introduction, you will encounter problems with variable names or function names that conflict with other JS codes. So how to solve this problem? Scope isolation. In JS, the scope is divided by functions. Encapsulating JS code into functions for calling can avoid the problem of variable name/function name conflicts, but this is not foolproof because the encapsulated function itself may overlap with other functions. Name, solution: self-executing function.

The self-executing function uses a pair of parentheses to wrap the anonymous function. Adding the parentheses (passing parameters) will execute it immediately. Because the function has no name, absolute isolation of scope and conflict of function names are achieved. The basic form is as follows:

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

For example, we wrote some JS logic in the custome.js file and encapsulated it into the function init. We wrap the self-defined function init with a self-executing function, as shown below.

(function () {

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

  init();
})();

When we introduce custome.js in html: , the self-executing function will be executed immediately , and then execute the internally defined init function:

However, the characteristics of immediate execution of self-executing functions make it difficult to call. By defining jQuery extension methods, you can solve this problem and gain the initiative to call and execute self-executing functions.

First let's take a look at the basic form of defining jQuery extension methods:

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

In this way, you can use $.myMethod() or jQuery.myMethod() Call the method defined above.

There is another way to define jQuery extension methods: .fn

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

The extension method defined in the above way needs to be called through the jQuery selector. For example, after understanding JS self-executing functions and jQuery extension methods through the tag selector $("button").myMethod(args)

, we combined the two.

Below we use the feature of immediate execution of the self-executing function to define the jQuery extension method:

(function (jq) {

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

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

Explanation, this self-executing function receives the jQuery object as a parameter , and then internally define an extension method myMethod for jQuery, which executes the real logic code init function

Call:

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

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

</script>

Description:

After the jQuery file is introduced, the jQuery object is globally available;
The custom JS file custome.js is then introduced, in which the self-executing function receives the jQuery object as a parameter, executes immediately, and internally defines an extension method myMethod for jQuery.
Then we can execute the init function by calling $.meMethod() or jQuery.myMethod() after the page is loaded.

Related recommendations:

Self-executing functions in js functions

Pseudo namespace encapsulation method of javascript self-executing functions_javascript skills

Comparison of several different ways of writing js self-executing functions_javascript skills

The above is the detailed content of Detailed explanation of JavaScript self-executing functions and jQuery extension methods. For more information, please follow other related articles on the PHP Chinese website!