javascript - Using self-executing anonymous functions inside the revealing module pattern - Stack Overflow

admin管理员组

文章数量:1025235

Just wanted to know if it was a good JavaScript practice.

Let's say I have many Web pages that all call an initialization function "init()", would it be the right thing to use an IIFE inside my pattern to run the function everytime the script is loaded?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());

Just wanted to know if it was a good JavaScript practice.

Let's say I have many Web pages that all call an initialization function "init()", would it be the right thing to use an IIFE inside my pattern to run the function everytime the script is loaded?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());

• javascript
• design-patterns
• iife

Share Improve this question Follow edited Oct 5, 2011 at 10:32 AakashM 63.4k1717 gold badges153153 silver badges189189 bronze badges asked Oct 4, 2011 at 17:43 Frank ParentFrank Parent 2,1642020 silver badges3333 bronze badges 1

• 1 You have to show more relevant code, before we can offer the right answer for your case. Using anonymous functions is often a good practice, because less variables are leaked. – Rob W Commented Oct 4, 2011 at 17:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This is a pretty subjective area, but here's my take:

• When you use the module pattern, you're providing a contained set of functionality to the rest of your code. It's essentially a mini-library.

• In general, I wouldn't expect a library to do anything when I load it, other than initialization steps that are entirely internal to the library (e.g. setting up the configuration, instantiating a few necessary objects, etc) - nothing that actually affects the DOM or otherwise significantly alters the environment (which is why I've never been entirely fortable with libraries like Date.js or Prototype that change the prototypes of basic objects).

• There are a couple of reasons for this, but the main one is that I don't want to have to worry about the load order of my libraries/modules, other than simply managing dependencies. Independent modules shouldn't affect each other at all. When you manipulate the DOM in your module at load time, sooner or later you'll realize that another piece of your code is expecting the DOM to be in a certain state at a certain time, and that you now have to care about whether you load your module before or after that time. This is an extra bit of plexity that's essentially hidden in the script tag that loads your module.

• The other issue here is portability and adaptability. Maybe you'll want to use your module in another project with another DOM setup. Maybe you'll want to pass a different DOM element or config variable to the init() function on a specific page. If you execute init() automagically, you lose the opportunity for configuration.

So what I generally do is to set the init() method as an attribute of the returned module object:

var foo = (function() {

    function init() {
        // Do something crazy that's gonna be the same across all my web pages
    }

    //...

    return {
        init: init,
        // etc
    }
}());

and then call it as needed elsewhere in my code:

foo.init();

Yes, this adds an extra line of redundant code to the initialization for all my pages (though this is probably just one other script anyway, so the added weight is all of 11 characters). But it allows me a more fine-grained control over when the module is initialized, and offers a hook for configuration arguments when I (inevitably) determine I need them later.

Is the init() function the same across web pages? If so, this is what I'd do:

var foo = (function()
{
    init();
    return {};
}());

If not, I don't see a reason to use an IIFE, and would simplify your original code like so:

var foo = (function()
{
    /* body of the original IIFE here */
    return {};
}());

Just wanted to know if it was a good JavaScript practice.

Let's say I have many Web pages that all call an initialization function "init()", would it be the right thing to use an IIFE inside my pattern to run the function everytime the script is loaded?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());

Just wanted to know if it was a good JavaScript practice.

Let's say I have many Web pages that all call an initialization function "init()", would it be the right thing to use an IIFE inside my pattern to run the function everytime the script is loaded?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());

• javascript
• design-patterns
• iife

Share Improve this question Follow edited Oct 5, 2011 at 10:32 AakashM 63.4k1717 gold badges153153 silver badges189189 bronze badges asked Oct 4, 2011 at 17:43 Frank ParentFrank Parent 2,1642020 silver badges3333 bronze badges 1

• 1 You have to show more relevant code, before we can offer the right answer for your case. Using anonymous functions is often a good practice, because less variables are leaked. – Rob W Commented Oct 4, 2011 at 17:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This is a pretty subjective area, but here's my take:

• When you use the module pattern, you're providing a contained set of functionality to the rest of your code. It's essentially a mini-library.

• In general, I wouldn't expect a library to do anything when I load it, other than initialization steps that are entirely internal to the library (e.g. setting up the configuration, instantiating a few necessary objects, etc) - nothing that actually affects the DOM or otherwise significantly alters the environment (which is why I've never been entirely fortable with libraries like Date.js or Prototype that change the prototypes of basic objects).

• There are a couple of reasons for this, but the main one is that I don't want to have to worry about the load order of my libraries/modules, other than simply managing dependencies. Independent modules shouldn't affect each other at all. When you manipulate the DOM in your module at load time, sooner or later you'll realize that another piece of your code is expecting the DOM to be in a certain state at a certain time, and that you now have to care about whether you load your module before or after that time. This is an extra bit of plexity that's essentially hidden in the script tag that loads your module.

• The other issue here is portability and adaptability. Maybe you'll want to use your module in another project with another DOM setup. Maybe you'll want to pass a different DOM element or config variable to the init() function on a specific page. If you execute init() automagically, you lose the opportunity for configuration.

So what I generally do is to set the init() method as an attribute of the returned module object:

var foo = (function() {

    function init() {
        // Do something crazy that's gonna be the same across all my web pages
    }

    //...

    return {
        init: init,
        // etc
    }
}());

and then call it as needed elsewhere in my code:

foo.init();

Yes, this adds an extra line of redundant code to the initialization for all my pages (though this is probably just one other script anyway, so the added weight is all of 11 characters). But it allows me a more fine-grained control over when the module is initialized, and offers a hook for configuration arguments when I (inevitably) determine I need them later.

Is the init() function the same across web pages? If so, this is what I'd do:

var foo = (function()
{
    init();
    return {};
}());

If not, I don't see a reason to use an IIFE, and would simplify your original code like so:

var foo = (function()
{
    /* body of the original IIFE here */
    return {};
}());

本文标签： javascriptUsing selfexecuting anonymous functions inside the revealing module patternStack Overflow