How to use JS self-executing functions and jQuery extensions

This time I will bring you how to use JS self-executing functions and jQuery extensions. What are the precautions for JS self-executing functions and jQuery extensions? The following is a practical case, let’s take a look.

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 the problem of variable name or function name conflicting with other JS code. 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, and the parentheses (parameters passed) will be executed 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 the internally defined init function will be executed:

However, the immediate execution characteristics of self-executing functions make it difficult to call. By defining jQuery extension methods, you can solve this problem and take the initiative in calling and executing 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, the method defined above can be called through $.myMethod() or jQuery.myMethod().

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

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

The extension method defined as above needs to be called through the jQuery selector, such as through the tag selector $("button").myMethod(args)

After understanding JS self-executing functions and jQuery extension methods, we combine the two.

Below we use the characteristics of immediate execution of self-executing functions to define jQuery extension methods:

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

Note that this self-executing function receives a jQuery object as a parameter, and then internally defines 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>

Note:

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 and is executed immediately. Internally, it is jQuery Define an extension method myMethod
and then we can execute the init function by calling $.meMethod() or jQuery.myMethod() after the page is loaded. ​​​​

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of using ref steps in vue2

vue-resource interceptor sets header information Detailed explanation of the steps

Implementing ajax sending asynchronous request method

The above is the detailed content of How to use JS self-executing functions and jQuery extensions. For more information, please follow other related articles on the PHP Chinese website!