CODEWITHSUNDEEP
javascriptjquery
Timeless
Timeless

Reputation: 7537

How to mangage javascript files and encapsulate JavaScript/jQuery functions

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?

Upvotes: 2

Views: 1607

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

to hide that function you have different possibilities

  1. 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;
    }
})();

  2. enclose that function inside User.registerModule function

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

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

        getAllUsers();

        // ...
    });
}

Upvotes: 3

antyrat
antyrat

Reputation: 27765

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.

Upvotes: 1

Related Questions