Naming convention for helper functions and self created objects

Question

I have the following Javascript folder structure:

- js 
    - libs 
        - Backbone 
        - Underscore 
        - Require 
        - Etc 
    - models 
    - templates 
    - views 
    - app.js 
    - main.js 
    - router.js 

In order to avoid cluttering the front end router with callback functions, ideally I want to delegate the functionality to external modules and have at maximum 1 line of code per route. This way I keep a very clean overview and I should never actually touch the router again when delegate functionality changes.

For example:

var Router = Backbone.Router.extend({ 

    /* --- 1. Route management --- */ 

    routes: { 
        '': 'landing_page', 
        '(/)login': 'auth_redirect', 
        '(/)home': 'auth_redirect' 
        }, 
    landing_page: function(){ 
        this.navigate("/login", {trigger:true}); 
    }, 
    auth_redirect: function(){ 
        //Checks if the user is authenticated; 
        //Returns either "true" or "false" 
        $.get('/ingeb/api_v1/auth', _.bind(function(response){ 
            var success = $.parseJSON(response)['success']; 
            if (success === false){ 
                this.renderView(Login_view); 
            }else if(success === true){ 
                this.renderView(Home_view); 
            }; 
        }, this)); 
    }, ... 

I would like to delegate the code that handles the authentication check and redirection to an external module. I want to do the same for helper functions that I can call as static methods (no need to instantiate) throughout the entire application.

Since my folder structure is very clean now, I would like to keep it this way.

Is there any best practice to order these:

• Delegate objects;
• Helper function;

in a clean folder structure ?

Answer 1

Here's what yeoman generated app folder hierarchy looks like

.
├── bower_components
├── images
├── scripts
│   ├── collections
│   ├── helpers
│   ├── lib
│   ├── models
│   ├── routes
│   ├── templates
│   ├── vendor
│   ├── views
│   └── main.js
└── styles
    └── fonts