CODEWITHSUNDEEP
javascriptjqueryoop
homelessDevOps
homelessDevOps

Reputation: 20726

JavaScript structure, right way?

Iam trying to get better in javascript coding. Away from 1000 lines of code in one file. But iam not sure if this is the "right" way:

RequireJS to load files when needed inside "boot.js":

require([
    "library/jquery.form/jquery.form",
    "app/eventManager",
    "app/myapp"
], function() {
    $(function() {
        MyApp.init();
    });
});

MyApp.js

var MyApp = {
init: function() {
    MyApp.mainController();
},

// this is our controller, only load stuff needed..
mainController: function() {

    //controller = set from php/zendframework
    switch (controller) {
        case 'admin':
            MyApp.initAdmin();
            break;
        default:
            break;
    }
},

// action for admin controller
initAdmin: function() {
    //lazy load
    require(["app/admin/admin"], function(){
        MyApp.admin.init();
    });
}};

MyApp.admin.js

MyApp.admin = {
init : function() {
    if (permisson != 'admin') {
        console.log('Permission denied.');
        return false;
    }
    MyApp.admin.dashboard.init();
}

};

MyApp.admin.dashboard = {

init: function() {
    MyApp.admin.dashboard.connectEventHandlers();
    MyApp.admin.dashboard.connectEvents();
    MyApp.admin.dashboard.getUserList('#admin-user-list');
},

connectEvents: function () {
    EventManager.subscribe("doClearCache", function() {
        MyApp.admin.dashboard.doClearCache(url);
    });

    EventManager.subscribe("doDeleteUser", function() {
        MyApp.admin.dashboard.doDeleteUser(url);
    });

},

What other "styles" are common? or this a goodway to structure code? THere a lot of examples in the net, but i was not able to find "real life" code..

And one of biggest "problems" when does i need ".prototype" ?

Upvotes: 3

Views: 680

Answers (5)

Hasith
Hasith

Reputation: 1767

In case you are building something more complex, for example with multiple product modules and sub modules, I recommend creating a context hierachy for your modules. Also make the UI components to be self-contained so that you have templates, css, logic, assets, localization etc for a particular UI component in a single place.

enter image description here

If you need to refer a reference architecture for large scale js development see http://boilerplatejs.org. I'm the main author of it and it demonstrates a lot of patterns that are useful in complex product development.

Upvotes: 1

redsquare
redsquare

Reputation: 78667

One change I would make to your code is to avoid repeating 'event' strings everywhere. You could reduce this by doing something like:

var app = {

      events : {

         someEvent : "someEvent"

      }

}

EventManager.subscribe(app.events.someEvent, someFn);

EventManager.publish(app.events.someEvent);

I would also avoid calling console.log directly and use a wrapper such as this which provides a fallback if not console is available

N.B Angus Croll has a decent blog where he mentions js structure/namespacing etc

and there is some really good knowledge being shared over at JsMentors from well versed js ninjas

Upvotes: 2

fifigyuri
fifigyuri

Reputation: 5899

Require.js is great tool, you can use it also on the client side. But be careful when you use it on mobile. In such case you should either use the editor to navigate better in one file or use thing like sprocket. It is a "precompiler", does not put any additional library to your code.

I passed through your sliced up code. Probably you should define the different parts as modules, read the requirejs documentation for defining modules, it gives good assistance.

But think twice whether you really need for organizing your code an extra library.

Upvotes: 1

Macy Abbey
Macy Abbey

Reputation: 3887

I defer to Douglass Crockford on all matters pertaining to JavaScript best practices.

Here is his homepage: http://javascript.crockford.com/.

Here is a great book on what to do and what not to do in JavaScript. http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb

Here is his amazing tool which can automatically tell you if you are employing any worst practices. http://www.jslint.com/

As to the prototype question, you use prototype when you want to employ prototypal inheritance, or create a "static" class function which will be present for all instances of that class without consuming memory for each instance.

Upvotes: 1

Kristopher Johnson
Kristopher Johnson

Reputation: 82535

JavaScript Patterns is a good reference for various ways of structuring code.

It would also be a good idea to study the source code of libraries such as jQuery.

Upvotes: 4

Related Questions