I am want to build a plugin with accessible methods and options, this for a complex plugin.
I need the methods to be accessible outside the plugin because if somebody ads something to the DOM it needs to be updated(so we dont need the run the complete plugin again).
I have seen in the past that there are plugin that do it like this, but I cant find them, so I cant take a look at them. I am still new to javascript so any help would be nice.
It would be nice if we still can globally override the options.
How I want to use the plugin:
// options
$('#someid').myplugin({name: 'hello world'});
// methods(would be nice if we can use this)
$('#someid').myplugin('update');
// my old plugin wrapper
;(function($, window, document, undefined){
$.fn.pluginmyPlugin = function(options) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function() {
var obj = $(this);
// the code
});
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: '',
...
};
})(jQuery, window, document);
Update
So after looking at the jQuery docs I have build the following code, please let me know if there's something wrong with the code, if it can be build better...
;(function($, window, document, undefined){
var methods = {
init : function( options ) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function(){
alert('yes i am the main code')
});
},
update : function( ) {
alert('updated')
}
};
$.fn.pluginmyPlugin = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on this plugin' );
}
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: 'john doe',
//....
};
})(jQuery, window, document);
An alternative:
var Plugin = function($self, options) {
this.$self = $self;
this.options = $.extend({}, $.fn.plugin.defaults, options);
};
Plugin.prototype.display = function(){
console.debug("Plugin.display");
};
Plugin.prototype.update = function() {
console.debug("Plugin.update");
};
$.fn.plugin = function(option) {
var options = typeof option == "object" && option;
return this.each(function() {
var $this = $(this);
var $plugin = $this.data("plugin");
if(!$plugin) {
$plugin = new Plugin($this, options);
$this.data("plugin", $plugin);
}
if (typeof option == 'string') {
$plugin[option]();
} else {
$plugin.display();
}
});
};
$.fn.plugin.defaults = {
propname: "propdefault"
};
Usage:
$("span").plugin({
propname: "propvalue"
});
$("span").plugin("update");
This absurdly resembles the Twitter Bootstrap's JavaScript template. But, it wasn't completely taking from there. I have a long history of using .data().
Don't forget to wrap it appropriately.
If you want to use the plugin like this:
// Init plugin
$('a').myplugin({
color: 'blue'
});
// Call the changeBG method
$('a').myplugin('changeBG')
// chaining
.each(function () {
// call the get method href()
console.log( $(this).myplugin('href') );
});
or if you need independent Plugin instance per element:
$('a').each(function () {
$(this).myplugin();
});
you will want to setup your plugin like this:
/*
* Project:
* Description:
* Author:
* License:
*/
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.
// window is passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).
var pluginName = "myplugin",
// the name of using in .data()
dataPlugin = "plugin_" + pluginName,
// default options
defaults = {
color: "black"
};
function privateMethod () {
console.log("private method");
}
// The actual plugin constructor
function Plugin() {
/*
* Plugin instantiation
*
* You already can access element here
* using this.element
*/
this.options = $.extend( {}, defaults );
}
Plugin.prototype = {
init: function ( options ) {
// extend options ( http://api.jquery.com/jQuery.extend/ )
$.extend( this.options, options );
/*
* Place initialization logic here
*/
this.element.css( 'color', 'red' );
},
destroy: function () {
// unset Plugin data instance
this.element.data( dataPlugin, null );
},
// public get method
href: function () {
return this.element.attr( 'href' );
},
// public chaining method
changeBG: function ( color = null ) {
color = color || this.options['color'];
return this.element.each(function () {
// .css() doesn't need .each(), here just for example
$(this).css( 'background', color );
});
}
}
/*
* Plugin wrapper, preventing against multiple instantiations and
* allowing any public function to be called via the jQuery plugin,
* e.g. $(element).pluginName('functionName', arg1, arg2, ...)
*/
$.fn[pluginName] = function ( arg ) {
var args, instance;
// only allow the plugin to be instantiated once
if (!( this.data( dataPlugin ) instanceof Plugin )) {
// if no instance, create one
this.data( dataPlugin, new Plugin( this ) );
}
instance = this.data( dataPlugin );
/*
* because this boilerplate support multiple elements
* using same Plugin instance, so element should set here
*/
instance.element = this;
// Is the first parameter an object (arg), or was omitted,
// call Plugin.init( arg )
if (typeof arg === 'undefined' || typeof arg === 'object') {
if ( typeof instance['init'] === 'function' ) {
instance.init( arg );
}
// checks that the requested public method exists
} else if ( typeof arg === 'string' && typeof instance[arg] === 'function' ) {
// copy arguments & remove function name
args = Array.prototype.slice.call( arguments, 1 );
// call the method
return instance[arg].apply( instance, args );
} else {
$.error('Method ' + arg + ' does not exist on jQuery.' + pluginName);
}
};
}(jQuery, window, document));
Notes:
This boilerplate will not use .each() for every method call, you
should use .each() when you need
Allow re-init plugin, but only 1
instance will be created
Example of destroy method is included
Ref: https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/jQuery-boilerplate-and-demo
Have you tried the jQuery UI Widget Factory?
There was a bit of a learning curve, but I love it now, handle the options, and defaults and allows methods, keeps everything wrapped up tight very fancy :)
EDIT
The jQuery UI Widget Factory is a separate component of the jQuery UI Library that provides an easy, object oriented way to create stateful jQuery plugins.
– Introduction to Stateful Plugins and the Widget Factory.
I don't think the extra overhead is much to be worried about in most circumstances. These days I write in coffescript and everything is compiled, minified and gzipped, so a few extra lines here and there doesn't make much of a difference. My research in website speed seems to indicate that the number of HTTP requests is a big deal - indeed the former colleague that put me on this track worked for a browser based game and was all about speed speed speed.
Here is the latest boilerplate https://github.com/techlab/jquery-plugin-boilerplate
Also you can use the create-jquery-plugin npm CLI utility. just run
npx create-jquery-plugin
Related
We just upgraded our jQuery version from v1.7 to v3.4.1. We have code which passes a jQuery object (which doesn't yet exist in the DOM, and I'm guessing is the root cause of this problem) to a function. However, when attempting to handle this newly created variable, it only returns the root jQuery function itself: jQuery.fn.init {}
This SO answer helped me realize the issue: Help understanding jQuery's jQuery.fn.init Why is init in fn
Actual Snippet:
create: function (params) {
console.log('params.target:', params.target);
var $target, id;
if (_.isString(params.target)) {
if (params.target.charAt(0) === '#') {
$target = $('#send-to-friend-dialog');
console.log('$target1: ', $target);
} else {
$target = $('#' + params.target);
}
} else if (params.target instanceof jQuery) {
$target = params.target;
} else {
$target = $('#dialog-container');
}
console.log('$target.length: ', $target.length)
// if no element found, create one
if ($target.length === 0) {
console.log('$target2 : ', $target);
if ($target.selector && $target.selector.charAt(0) === '#') {
id = $target.selector.substr(1);
$target = $('<div>').attr('id', id).addClass('dialog-content').appendTo('body');
}
}
// create the dialog
console.log('$target3: ', $target);
this.$container = $target;
this.$container.dialog($.extend(true, {}, this.settings, params.options || {}));
return this.$container;
},
Output in v1.12.4: https://i.imgur.com/4xg1u1s.png
Output in v3.4.1: https://i.imgur.com/QPITza9.png
So while it is defined, the object itself is a very different output in both versions and I'm wondering why?
Thank you!
The jQuery .selector property was deprecated in 1.7, and removed in 3.0. See https://api.jquery.com/selector/. This was an internal interface, not intended to be used by applications.
You'll need to redesign your code so it doesn't need this. The documentation suggests an alternative:
For example, a "foo" plugin could be written as $.fn.foo = function( selector, options ) { /* plugin code goes here */ };, and the person using the plugin would write $( "div.bar" ).foo( "div.bar", {dog: "bark"} ); with the "div.bar" selector repeated as the first argument of .foo().
I have a question of which someone might find this much simpler than I do, but alas, I don't have much experience with custom jQuery plugins.
The previous developer at my place of work left me with a lot of left-over plugins that don't seem to work very well, most which I've been able to fix but this which has been bugging me for a while.
It is a custom Multiple Suggestion plugin (called multisuggest) written in jQuery, and it has a set of functions that it uses internally (*e.g. setValue to set the value of the box, or lookup to update the search)*
It seems he's tried to call these plugin functions from an external script (this exteranl script specifically imports newly created suggestions into the multisuggest via user input and sets the value) like this:
this.$input.multisuggest('setValue', data.address.id, address);
This seems to call the function as it should, except the second and third parameters don't seem to be passed to the function (setValue receives nothing), and I don't understand how I can get it to pass these. It says it is undefined when I log it in the console. The functions are set out like this (I've only including the one I'm using and an internal function from multisuggest called select that actually works):
MultiSuggest.prototype = $.extend(MultiSuggest, _superproto, {
constructor : MultiSuggest,
select: function () { // When selecting an address from the suggestions
var active, display, val;
active = this.$menu.find('.active');
display = active.attr('data-display');
val = active.attr('data-value');
this.setValue(display, val, false); // This works, however when I do it as shown in the above example from an external script, it doesn't. This is because it doesn't receive the arguments.
},
setValue : function(display, value, newAddress) { // Setting the textbox value
console.log(display); // This returns undefined
console.log(value); // This returns undefined
if (display && display !== "" &&
value && value !== "") {
this.$element.val(this.updater(display)).change();
this.$hiddenInput.val(value);
this.$element.addClass("msuggest-selected");
}
if(newAddress === false){
return this.hide();
}
},
});
Why does it listen to the function, but not the values passed to it? Do I need to include an extra line of code somewhere to define these arguments?
Anyone with jQuery experience would be of great help! This is bottlenecking progress on a current project. Thanks for your time!
EDIT:
I've missed out the code of how the arguments are trying to be passed from the external script to the internal function of the plugin. Here is the plugin definition with how the external call is handled, can anyone see a problem with this?
$.fn.multisuggest = function(option) {
return this.each(function() {
var $this = $(this), data = $this.data('multisuggest'), options = typeof option === 'object' && option;
if (!data) {
$this.data('multisuggest', ( data = new MultiSuggest(this, options)));
} else if (typeof(option) === 'string') {
var method = data[option];
var parameters = Array.prototype.slice.call(arguments, 1);
method.apply(this, parameters);
}
});
};
The "usual" plugin supervisor looks like this :
// *****************************
// ***** Start: Supervisor *****
$.fn.multisuggest = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
}
};
// ***** Fin: Supervisor *****
// ***************************
All the looping through this should be inside the method functions, not in the supervisor.
I'm a little worried that new MultiSuggest(...) appears in the current supervisor. That sort of thing is totally unconventional. The original author clearly had something in mind.
You need to extend the jQuery plugin function which is attached to $.fn['multisuggest'], that function is probably only taking and passing one parameter.
I just started on learning BackboneJS and I'm doing a small sample document to test it's way of working. But I have a hard time understanding it and at this moment it doesn't make any sense at all :)
So, I have the next file structure :
/* application.js */
var Application = Application || {};
;(function ( $, window, document, undefined ) {
new Application.ApplicationView();
})( jQuery, window, document );
/* sample.js */
var Application = Application || {};
;(function ( $, window, document, undefined ) {
Application.ApplicationView = Backbone.View.extend({
});
})( jQuery, window, document );
/* utilities.js */
var Application = Application || {};
;(function ( $, window, document, undefined ) {
Application.ApplicationUtilities = Backbone.Collection.extend({
polyfillize : function(tests) {
return _.each(tests, function(obj){
console.log(obj);
Modernizr.load([{
test : _.reduce(obj.test, function(initial_value, current_value){
return initial_value && current_value;
}, 1),
nope : obj.polyfill,
callback: function(url, result, key) {
console.log('Polyfill : ', [ url ]);
}
}]);
});
}
});
})( jQuery, window, document );
/* options.js */
var Application = Application || {};
;(function ( $, window, document, undefined ) {
Application.ApplicationOptions = Backbone.Model.extend({
version : [ 1 ],
prettify : true,
libraries : {
google_code_prettyfier : 'assets/js/libraries/google/prettify.js'
},
dependencies : {
google_code_prettyfier : function() {
return Modernizr.load([{
test : this.prettify,
yep : [ this.libraries.google_code_prettyfier ],
callback: function(url, result, key) {
return window.prettyPrint && prettyPrint();
}
}]);
}
},
polyfills : {
json_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/json3_polyfill.js',
storage_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/localstorage_polyfill.js'
}
});
})( jQuery, window, document );
/* polyfills.js */
var Application = Application || {};
;(function ( $, window, document, undefined ) {
Application.ApplicationPolyfills = Backbone.Model.extend({
loadPolyfills : function() {
return Application.ApplicationUtilities.polyfillize([
{
test : [Modernizr.localstorage, Modernizr.sessionstorage],
polyfill : [Application.ApplicationOptions.polyfills.storage_polyfill_url]
},
{
test : [Modernizr.json],
polyfill : [Application.ApplicationOptions.polyfills.json_polyfill_url]
}
]);
}
});
})( jQuery, window, document );
Each model it's placed in it's own models folder, each collection in it's collections folder and so on. Then I'm loading all the script in the DOM, first the collections, then the models, the views and last the application.js.
What I want to do is be able to use the collection as a collection of functions that I can use whenever I want in the Views or the Models, the options should be available on any level and in any of the collections / models / views. So it would be like my sample.js file will contain the main View which will initialize everything that needs to run onDOM load like loading all the polyfills if necessary, enabling the google code prettifier and so on.
Obviously nothing works at this state, so I would like someone more experienced to help me out if possible or maybe point to some tutorials that match what I'm trying to do right now :)
You seem to be a little confused about what Backbone collections are all about.
A collection in Backbone is a collection of (Backbone) models:
Backbone.Collection
Collections are ordered sets of models. [...]
When you say this:
var C = Backbone.Collection.extend({
method: function() { ... }
});
you're creating a "class" and method will be available as an "instance method" after you create a new instance but you can't call method directly on C because extend puts method on C.prototype for inheritance:
C.method(); // This doesn't work, you'll just get an error.
var c = new C;
c.method(); // This works
You say that
it made sense to have it in a collection, a collection of utility functions :)
but, unfortunately, just because something makes sense doesn't mean that it really is sensible :)
You don't have any models for Application.ApplicationUtilities so it isn't a collection in the Backbone sense. I think you just want to use an object as a namespace:
Application.ApplicationUtilities = {
polyfillize: function(tests) { /* ... */ }
};
Hello everyone.
I am trying to develop a Jquery plugin following the steps I found in http://docs.jquery.com/Plugins/Authoring and I seem to have problems reaching the caller object (the “this” variable) inside the options passed to the plugin. It is a plugin that I just want to use to make a button have a “blink” effect.
I would like to be able to pass the functions to execute in “show/hide” (or link blink-on, blink-off, if you prefer) as an option for the plugin. Let's say the user wants to achieve the “blinking” effect by hiding/showing the whole button every 1000 milliseconds. Then I would like the options to be something like:
$("#bttnOk").myBlinker ({
blinkHide: function(){$(this).hide();},
blinkShow: function(){ $(this).show();},
interval:1000
});
// … //
// And to make it actually blink:
$("#bttnOk").myBlinker ("blink");
Or let's say that the user wants to move the button up and down applying an inline css sytle every 200ms. Then the options would something like:
$("#bttnOk").myBlinker ({
blinkHide: function(){$(this).css(“margin-top: 10px”);},
blinkShow: function(){ $(this).css(“margin-top: 0px”);},
interval:200
});
The problem is that I seem to lose the reference to “$(this)” when I am inside the options. When the plugin reaches the blinkHide/blinkShow functions, “this” is the whole DOM window, not the button $(“#bttnOk”) my “myBlinker” plugin is attached to.
This is the first Jquery plugin I'm trying to write so I'm not even sure if there's a way to achieve what I'm trying to do.
My plugin code follows the following structure:
(function($){
var defaultOptions = {
interval: 500
}
var methods = {
init : function( options ) {
return this.each(function(){
this.options = {}
$.extend(this.options, defaultOptions, options);
var $this = $(this);
var data = $this.data('myBlinker');
// If the plugin hasn't been initialized yet
if ( ! data ) {
$this.data('myBlinker', {
on : true
});
}
});
},
destroy : function( ) { // Some code here},
blink: function ( ){
console.log("Blinking!. This: " + this);
var current = 0;
var button=this.get(0);
setInterval(function() {
if (current == 0){
button.options["blinkShow"].call(this);
current=1;
} else {
button.options["blinkHide"].call(this);
current=0;
}
}, button.options["interval"]);
}
};
$.fn. myBlinker = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.myBlinker ' );
return null;
}
};
})(jQuery);
Any idea, correction, link or tip will be appreciated.
Thank you.
Within the setInterval function, this is the global object, not the current element DOMElement like in the blink function.
A solution to that is to save a reference of this and use this saved reference in the setInterval:
blink: function ( ){
// save a reference of 'this'
var that = this;
setInterval(function() {
// use the saved reference instead of 'this'
button.options["blinkShow"].call(that);
}, button.options["interval"]);
}
DEMO
First of all I don't know how to phrase the question "title", sorry if I am confusing everyone with the title here.
Anyway, I saw this code at jQuery http://docs.jquery.com/Plugins/Authoring
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});
// If the plugin hasn't been initialized yet
if ( ! data ) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});
}
});
},
destroy : function( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition : function( ) { // ... },
show : function( ) { // ... },
hide : function( ) { // ... },
update : function( content ) { // ...}
};
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
My question being is that I cannot understand why do we need this if statement?
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}
Or in other words, in what scenario that we will pass in argument like "methods[method]" base on the example?
Thanks!
That if statement will check if you are trying to call one of the methods available to the plugin. In the case of you example you have these methods:
init, destroy, reposition, show, hide, and update
So you can do a call like :
$.tooltip('init', { arg1: true, arg2: 'a value' });
Then your code knows where to send the arguments because this if statement will be true:
if(methods['init'])
You see at the beginning that the code defines an object methods.
The function $.fn.tooltip = function( method ) accepts an argument with name method (no s at the end).
The function will execute one of the methods defined in methods, but it can only do it, if this method is also available. Hence the if(methods[method]).
The expression will be true if method is e.g. show, hide, update, etc, i.e. if the methods object has a property with the name contained in method.
Therefore the expression will be false for foo or bar. If the if statement would not be there, the code would try to call method['foo'], which does not exist and you would get an error:
TypeError: object is not a function
Is this what you wanted to know?
Your code snippet isn't complete and it doesn't contain a demo to show how it's called, so it's hard to give a definite answer.
However, here's what I think from what the code looks like:
The if statement is necessary because the tooltip function will be called with arguments such as init, destroy, show, hide, update, which refer to the functions defined in the methods hash. You probably call tooltip with init to initialize the tooltip, hide to hide it, show to show it etc. If you don't pass an argument at all, it defaults to the init method and initializes the tooltip (second branch of the if).
First of all, the piece of code declares an hashmap named methods which contains some functions.
Then, the second part declares a function named tooltip which takes a parameter named method. This parameter is the name of the function we want to call, this name is the index of this function in the methods array.
So, when you do $('#whatever').tooltip('destroy'); it will look in the methods array for the function referenced with the destroy key.