Second Jquery Plugin, function/css/javascrpti loader for my local development project

The Problem

I was trying to find a way to externalize my javascript code but couldn't work with basic methods as I wanted to load specific Javascript and CSS aswell as custom made functions separately for each page. So I created a loader which is setup on each page of my development project.

The Solution

jQuery

(function($) {
    $.jLoader = function(options) {
        /*Default Settings*/
        var defaults = {
            functions: new Array(),
            scripts: new Array(),
            styles: new Array()
        };
        
        var plugin = this;
        plugin.settings = {};
        
        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            plugin.getScripts();
            plugin.getStyles();
            plugin.initScripts();
        }        
        plugin.getScripts = function() {
            if(typeof plugin.settings.scripts == 'object') {
                for(Index in plugin.settings.scripts) {
                    //$.getScript(plugin.settings.scripts[Index]);
                    $('head').append('<script type="text/javascript" src="'+plugin.settings.scripts[Index]+'"><\/script>');
                }
            }
        }
        plugin.getStyles = function() {
            if(typeof plugin.settings.styles == 'object') {
                for(Index in plugin.settings.styles) {
                    $('head').append('<link rel="stylesheet" href="'+plugin.settings.styles[Index]+'" type="text/css" />');
                }
            }
        }
        plugin.initScripts = function() {
            if(typeof plugin.settings.functions == 'object') {
                for(Index in plugin.settings.functions) {
                    plugin.settings.functions[Index]();
                }
            }
        }
        plugin.init();
    }
    
    $.fn.jLoader = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('jLoader')) {
                var plugin = new $.jLoader(this, options);
                $(this).data('jLoader', plugin);
            }
        });
    }
    $(function() {
        $.jLoader({
            scripts:(typeof Scripts == 'object') ? Scripts : new Array(), 
            styles:(typeof Styles == 'object') ? Styles : new Array(), 
            functions: (typeof Functions == 'object') ? Functions : new Array()
        });
    });
})(jQuery);

Code (markup):

What it does

This script allows you to create an external javascript file and load all it's dependencies within the page that you want.

For example:
I have a page that requires an autocomplete and this is the only page that requires the functionality so I don't want to include it on every page within the website so I simply create an external javascript document and link it to the individual page with this information:

// Links to all the javascript documents that are needed within this page
var Scripts = new Array('jquery.autoComplete.min.js');

// Links to all the styles that are required in the page
var Styles = new Array('jquery/jquery.autoComplete.css');

var Functions = new Array();

// Create a new link to a function which contains the code for the autocomplete. (This will be automatically called by the loader just define functions as you need)
Functions['locate_member'] = function() {
    $('input[name=member_name]').autoComplete({
        'ajax': base_url + 'admins/ajax_member_list',
        'postVar': 'username'
    });
};

Code (markup):

The Result

All the scripts are loaded and appended to the head tag, all of the css is loaded and appended to the head tag and all the functions are put into the document.ready of the document and therefore function. If javascript is disabled however, the extra css and javascript wont bother to load so maybe a slight optimization.

Any Ideas? Issues?

I am new to jQuery plugin development so I'm likely to have a few problems in my logic. If there's an issue with my code then please let me know so I can learn something new and better my coding style. There is probably a better way to make use of jQuery functionality to do the same thing. Thanks alot!

If the code is useful, share and enjoy.

 

this can be used for static pages, if you site is dynamic (PHP,ASP,etc.) it's better to do it server-side.. you will just print/echo the script tag/css link tag that you need in a certain page..

 

I do a bit of both, it's the way I like to organize I suppose.

my mvc finds a page like
site/index
checks an index.js exists in the javascript directory and loads it if it does(which contains the functions and array definitions)
checks an index.css exists in the css directory and loads it if it does

Then instead of outputting all of the function code for each page within the controller which is included like this

views:
header (would need to dump code in here for each individual page from an array or a large switch statement for each page)
content
footer

I can just load the javascript file automatically e.g. js/site/index.js and everything is loaded for me and I don't have to worry about bloating my php controllers with javascript when it should be handled within the view. The view would require the large switch statement or array of things to load when the document.ready is called.

If you understand my gibberish explanations

 

what framework are you using?

 

Codeigniter the latest with a customer CI_Controller