jQuery plugin class type name - javascript

I have searched but have not been able to find any information. I know this isn't typical of jQuery however I need to appease our structure that we have for PHP and make that into the jQuery plugin per my boss.
Is there any way to extend the $.fn to add another name? For example
$.MyTools.useTool('piece of wood','cut');
or
$('#wood').MyTools.useTool('cut');
I guess MyTools would be the class and useTool would be the function. However I have done this in a plugin. We are wanting to have our plugin called MyTools and whenever you use a function in it you need to call MyTools.
Would it be better to do away with the plugin and just create a class?

Yeah, when I want to make a namespace (sort of) like that I do this for all my plugins:
(function( $ ){
if(!$.fn.MyTools) {
$.fn.MyTools = {};
}
$.fn.MyTools.useTool = function() {
// do stuff
};
})( jQuery );

It appears that is no way to do this, so I had to take a different approach and take the official plugin way method by doing $.GLCFormattingCurrency('remove', data);

Related

Is there an equivilant of phpinfo for jquery?

server side background, getting deeper and deeper into client side.
I've got a site with a lot of legacy that I'm new to, and I'm just trying to get a handle on how things are working/what's available.
Is there a way to have jquery tell me(for a page/pages) all its current info and any plugins it can/is use/ing, similar to what phpinfo does?
Some proof of concept how you can get names for all plugins
var plugins = (function() {
var plugins = [];
for(var plugin in jQuery.fn) {
plugins.push(plugin)
}
return plugins;
}());
var filterValue = ['constructor', 'init', 'add', 'parents'] // // you must add all standard methods here
filterValue.forEach(function(value) {
var position = function(value) {
return plugins.indexOf(value);
}
while(position(value) >= 0) {
plugins.splice(position(value), 1)
}
})
console.log(plugins)
You can use the following for jQuery
console.log( jQuery.fn.jquery );
To answer your question directly, No jQuery does not have a mechanism that lists installed plug-ins.
jQuery does not keep such a registry of installed plugins. The jQuery plugin mechanism is to just add a method to the jQuery prototype (right along-side all the other jQuery methods). So, there's no separate list of which methods have been added by some outside agent (e.g. a plug-in). In addition, there's no one-to-one correspondence between methods and a particular plug-in as a single plug-in could add multiple methods.
It would be possible to create a master list (for any specific jQuery version) of what methods are there by default and then enumerate a jQuery object to find out which methods have been added since then, but you'd have to create that master list ahead of time and store it or create the master list immediately after jQuery was loaded before any plug-ins were loaded.
You can always test to see if any specific jQuery plug-in is loaded by just checking to see if any of its signature methods are available on a jQuery object.
So, if you really just wanted to know which of 10 plugins happen to be available in any given page, you could write a quick function that would test for each of the 10 plugins (by looking for the existence of known methods in those plugins) and would return a list of the ones installed, but this has to be done with specific knowledge of each plugin as there is no "generic plugin identification mechanism" since a plug-in is nothing more than a piece of code that adds methods to the jQuery prototype. It doesn't actually have any identity of its own.

Could somebody tell me the benefits of making a jQuery plugin this verbose?

What are the benefits? It's seems like an over-complicated way of doing things, so why wouldn't one just take a simple approach to building such a plugin, like that which is documented within jQuery plugin docs?
Please see here:
http://jsfiddle.net/e2aYH/11/
Compared to..
jQuery.fn.placeKitten = function( options ) {
// default settings:
var defaults = {
...
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
// Plugin code to produce kitten image would go here...
});
};
The author of this work also proceeded to say that he wouldn't bother with a jQuery plugin anyway, and they should never be used, but to make your code 'modularized' instead. Whatever that means if not via a jQuery plugin? and if it means not to use jQuery at all, I see a slew of benefits and efficiency when harnessing jQuery, so I also don't understand this remark.

Difference between creating Jquery plugins with $fn and without it

I'm looking on some Jquery plugins,and I want to build my own. In all tutorials I see syntax like this:
(function($) {
$.fn.myPlugIN = function() {
// Add plugin code here
};
})(jQuery);
But when I look at the code of few popular plugins like iScroll.js, Carousel,js
I see the dont use the $.fn syntax, they write it inside one function
(function(){
function iScroll (el, options) {
var that = this, i;
//some code
}
})();
What are the difference between those function and the use of them?
That's the difference between a jQuery plugin and a basic javascript plugin (or module).
iScroll doesn't use jQuery, it has no reason to be defined as a jQuery plugin. Like most javascript plugins not based on a specific framework, it's based on the very convenient module pattern which lets you define many private variables not cluttering the global namespace. The snippet you show doesn't contain the part where a unique variable is exported in the global namespace.
See source :
if (typeof exports !== 'undefined') exports.iScroll = iScroll;
else window.iScroll = iScroll;
iScroll (and I'm assuming Carousel as well) are not jQuery plugins, so their code-behind syntax will be a bit different.
A jQuery plugin is an extension function that works off jQuery objects. For example, if I create a foo jQuery plugin, I should be able to use that via something like $('#some-element').foo();.
To be able to work this way, jQuery plugins extend the $ prototype by adding functions to the $.fn variable like so:
$.fn.foo = function () {
// foo!
};
iScroll, on the other hand, is not a jQuery plugin. It doesn't work off a jQuery object, so you don't expect it to work like $('#some-element').iScroll();. You use it by invoking iScroll() itself.
var obj = new iScroll('container');
As you'd expect, the difference in means of use will dictate different ways of declaring the plugin in its script file.

Is there a way to trigger an event when inserting html?

It's for a backbone application,
I'm using Jquery html() function to insert my views templates into the layout everywhere, and I would like to be able to trigger an event each time the html() function of jQuery is called to check the html of the page.
Is there a way to do that ?
( Like App.on('html', blablabla...); )
Thank you !
As Marc B suggested DOM MutationEvents is available on some browsers (not many). By default jQuery does not fire any event when using html, but you can define your own behaviour for this, for example:
(function($) {
var html_ref = $.fn.html;
$.fn.extend({
html : function() {
$(document).trigger( 'html_change' );
return html_ref.apply(this, arguments);
}
});
})($);
It should work, didn't test it though. You can use the same with .text method. Now you can simply use:
$(document).bind( 'html_change', function() {
// Hurray! Html changed!
});
That's the idea, use it as you wish.
AFAIK, the jQuery html() method doesn't fire any subscribable events per se, but you could probably roll your own implementation of a simple Observer pattern. I use this across a large number of projects and it provides a great, clean, lightweight way to encapsulate arbitrary event handling across loosely-coupled modules.
However, this is presuming that you have programmatic control over every time the html() method is called - if not, then this would be more difficult, as there is no callback function to hook into.

jQuery plugin method that doesn't take an element

I'm authoring a jQuery plugin in which one of the methods that I'd like to write will not take a selector argument and does not need to pass an element. I'd like it to be available by a call like $.myMethod() like the built in $.ajax() method. Up to now I've tried something like
$.fn.myMethod(options) {
console.log("I've been called");
}
This works when I try $('.a_selector').myMethod() but not when I try $.myMethod().
Is this doable with a jQuery plugin or is it only available for interal functions.
The purpose of this method is to perform an action on some data that is stored in jQuery.data. I recognize that they jQuery.data is associated with an element, but in this case I've hard coded it to the body element to make things easier for the end user.
The functions that are members of $.fn apply to jQuery objects, not to the $ object itself. If you want to create such a method, you only have to write:
$.yourMethod = function() {
// Do something.
};
Now you can call it without a jQuery object:
$.yourMethod();
An elaborate way of declaring such a function can be
$.extend({myMethodA:function(){
//Do something
},
myMethodB:function(){
//Do something else
}
});

Categories