JavaScript self-executing functions and jquery extension methods

We usually write the JS code in a separate JS file, and then introduce the file to the page. However, sometimes the introduction will encounter the variable name or function name and other JS code to the thoroughfare of the problem. So how do we solve this problem? Scope isolation. In JS, the scope is divided by the function, the JS code is encapsulated into the function to invoke can be the note surface variable name/function name conflict problem, but this is not foolproof, because the package function itself may and other functions, the solution: self-executing function .

The self-executing function packages the anonymous function with a stack of parentheses, and the parentheses (the argument) are executed immediately. Because the function has no name, it realizes the absolute isolation of scope and the conflict of function name. The basic form is as follows:

(function  () {    console.log (111);}) ();

For example, we wrote some JS logic in the Nb-list.js file and encapsulated it in the function init. We use self-executing functions to wrap our own defined function init as follows.

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

When we introduce nb-list.js in HTML, the self-executing function executes immediately and executes the internally defined init function.

But because of the nature of the self-executing function, which makes it difficult to invoke, we need the jquery extension to give the external interface a call to the self-executing function, taking the initiative in its own hands.

The basic form of the jquery extension method:

jquery.extend ({    function  () {        console.log (111);    }});

This way, the method defined above can be called by $.mymethod () or Jquery.mymethod ().

There is another way to define the jquery extension method:. fn

jQuery.fn.extend ({    function  () {        console.log (111);    }});

The extension method defined by. Fn needs to be called through the jquery selector, such as through the tag Selector $ ("button"). MyMethod (args)

Here we combine the two to invoke the self-executing function.

(function  (JQ) {    function  init () {        console.log (111);    }    Jq.extend ({        function  () {            init ();}})    }) (jQuery);

Description, the self-executing function receives the jquery object as a parameter, and then internally defines an extension method MyMethod for jquery, which executes the true logic code init function

Use:

<script src= "Jquery-3.2.1.js" ></script><script src= "Nb-list.js" ></script><script>   $ (function  () {      $.mymethod ();  }); </script>

Description

When the 1.jQuery file is introduced, the jquery object is globally available.

2. A custom nb-list.js file is then introduced, where the self-executing function receives the jquery object as a parameter, executes it immediately, and internally provides an extension method for jquery MyMethod

3. Finally, we can call the MyMethod function to execute the internal self-executing function after the page load is complete.

JavaScript self-executing functions and jquery extension methods