JS self-executing functions & extension methods

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.