What is the best practice for including jQuery ext functions?
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;
};
})(jQ开发者_JS百科uery);
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
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)
Check out the official plugin authoring guidelines. Also, Mike Alsup detailed a pretty specific and useful development pattern here.
精彩评论