What is the best practice for including jQuery ext functions?

Question

Hey everyone,

Currently I have a file that I named JQuery.ext.js which I am including in all of my pages. Inside this file I have numerous functions that do things like the following,

(function($) {


    /**
     * Checks to see if a container is empty. Returns true if it is empty
     * @return bool
     */
    $.fn.isEmptyContainer = function() {
        //If there are no children inside the element then it is empty
        return ($(this).children().length <= 0) ? $(this) : false;
    };

    /**
     * Strip html tags from elements
     * @return jQuery
     */
    $.fn.stripHTML = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

        //Loop through all elements that were passed in
        this.each(function() {
            $(this).html($(this).html().replace(regexp, ""));
        });
        return $(this);
    };

    /**
     * This function will check the length of a textarea and not allow the user to go beyond this length.
     * You should use the onkeypress event to trigger this function
     *
     * @param event event This value should always be event when passing it into this function
     * @param maxlength int The maximum amount of character that the user is allowed to type in a textarea
     */
    $.fn.enforceMaxLength = function(event, maxlength) {
        //Only allow the client code to use the onkeypress event
        if(event.type == 'keypress') {
            //If the client code does not pass in a maxlength then set a default value of 255
            var charMax = (!maxlength || typeof(maxlength) != "number") ? 255 : maxlength;

            //If the user is using the backspace character then allow it always
            if(event.which == 8) { return true; }
            //Else enforce the length
            else { return ($(this).val().length <= charMax); }
        }

        //Will only get here if the event type is not keypress
        return false;
    };
})(jQuery);

Is there another way to do this? or is this the way most people do it?

Thanks for any help, Metropolis

EDITED

Added different plugins to the code and removed the validation plugins

Answer 1

Check out the official plugin authoring guidelines. Also, Mike Alsup detailed a pretty specific and useful development pattern here.

Answer 2

It all depends on the scope of those functions. If you have a very generic list of functions that you constantly use in your applications, I would put them in a separate file, and include them when necessary.

But here's a small note: using proper terms, you are actually using plug-ins, not functions, and you are not being compliant with the authoring guide. I don't think this is a major issue though. :)

Also, the functions you sampled from that file seem to serve as validation routines, so I would put them in a separate validation library. Even better, I would use something like jquery-validate and add custom validation methods with $.validator.addMethod().

Edit:

As to how exactly I would group jQuery functions/plug-ins, I would do it exactly the same as your example:

(function ($) {
   // my list of functions, plug-ins, or classes; as needed by the application
}(jQuery);

But I would group them by functionality. For example: if you have validation, formatting, and animation functions/plug-ins, I would create 3 files: jquery.myvalidation.js, jquery.myformatting.js, etc. The question of when to use a function or a plug-in, depends on whether you need to have access to the "current" jQuery element (use plug-ins), or not (use functions).

The point I'm trying to emphasize here is about grouping things logically, in a modular way to avoid unnecessary coupling and maximize re-use. When you write a jQuery plug-in, it should deal with a very specific piece of functionality (like the autocomplete, scrollTo, or validate plug-ins)