JS self-executing functions & 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 in conflict with other JS code problems. So how do we solve this problem? scope isolation. In JS, scopes are broken down by functions, and it is not foolproof to encapsulate the JS code in a function to avoid the problem of variable name/function name collisions, but this is not infallible, because the wrapper function itself is potentially the same as other functions, the solution: self-executing function.

The self-executing function packages the anonymous function with a pair of parentheses, and the parentheses (parameters) 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 (' do something ');}) ();

For example, we wrote some JS logic in the Custome.js file and encapsulated it in the function init . We wrap our own defined functions with self-executing functions init , just like the following.

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

When we introduce custome.js in HTML: <script src="custome.js"></script> the self-executing function executes immediately and executes the internally defined init function;

However, the self-executing function immediately executes the attribute, making it difficult to invoke. By defining the jquery extension method, you can solve this problem and get the initiative of self-executing function call and execution.

The basic form of the jquery extension method:

$.fn.extend ({    ' MyMethod ': function () {        console.log (' do something ');;    }});

Extension methods defined as above need to be called through a jquery selector, such as through a tag Selector$("button").myMethod(args)

Example:

(function () {    function init () {        console.log (' do something ');    }    $.extend ({        ' MyMethod ': function () {            init ()}})    }) ();

Call:

<Scriptsrc= "Jquery-3.2.1.js"></Script><Scriptsrc= "Custome.js"></Script><Script>  $(function() {$.mymethod (); });</Script>

After the page is loaded, the function is executed by calling $.meMethod() or jQuery.myMethod() init

JS self-executing functions & extension methods