How to mangage javascript files and encapsulate JavaScript/jQuery functions

Question

I need to write & manage a lot of JavaScript code for current project.

I separate them into multiple .js files mainly based on module.

So, now i have for example:

Map.js // deal with google map issue
Common.js // common functions that will share by all modules
User.js // user module js code
Geofence.js // geofence module js code
etc.....

For example, inside my User.js file

what if i want to declare a function that only used inside the User.js file, not accessible by outside. what can i do?

var User = {};

User.registerModule = function () {
    $('#user').click(function () {
        Common.showLeftScrollbar();

        getAllUsers();

        // ...
    });
}

function getAllUsers(){ // how to hide this function
    // get
    return users;
}

So, in my home page, i only need to coordinate with multiple .js files. Access what allows to access.

  $(document).ready(function (data) {

        GoogleMap.initialiseGoogleMap();

        Common.refreshRightScrollbar();

        User.registerModule();

        // ...
    });

It is my first time to write js and not enough time to study a whole book. So, please, in your opinion, is this structure ok with many js code? and how to hide functions that i dont want outside to access?

Fabrizio Calderan · Accepted Answer · 2012-05-11 08:19:53Z

3

to hide that function you have different possibilities

just enclose your code in an immediate self-executed anonymous function

var User = {}; // this should not be enclosed too

(function() {
    User.registerModule = function () {
        $('#user').click(function () {
            Common.showLeftScrollbar();

            getAllUsers();

            // ...
        });
    }

    function getAllUsers(){ // how to hide this function
        // get
        return users;
    }
})();

enclose that function inside User.registerModule function

User.registerModule = function () {
    function getAllUsers() { ... }

    $('#user').click(function () {
        Common.showLeftScrollbar();

        getAllUsers();

        // ...
    });
}

answered May 11, 2012 at 8:19

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Timeless Over a year ago

do i need ; at the start of the anonymous function ?

Fabrizio Calderan Over a year ago

no, you already have a semi-colon inserted at the end of the previous statement : var User = {};

antyrat · Accepted Answer · 2012-05-11 08:15:55Z

1

Place this function inside the scope:

User.registerModule = function () {
    function getAllUsers(){ // how to hide this function
        // get
        return users;
    }
    $('#user').click(function () {
        Common.showLeftScrollbar();

        getAllUsers(); // returns users

        // ...
    });
}

And it will be private.

Now if you try to call this function outside it will be undefined:

getAllUsers(); // undefined.

answered May 11, 2012 at 8:15

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

2 Comments

Timeless Over a year ago

thanks. what if i need to use this function many times inside the User.js file. And does the structure have obvious problem to you?

antyrat Over a year ago

You can use that function inside User.registerModule many times you want. if you need to use it somewhere else, use another scope. Like anononymously function. For example you can scope all your User.js file in (function(){ here goes User.js content })();

Collectives™ on Stack Overflow

How to mangage javascript files and encapsulate JavaScript/jQuery functions

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related