how using global variables in jquery plugin multi-instantiable -

in plugin use global functions read/write value every part of plugin. works fine if use plugin element if using multiple elements have problem (globals overwritten).

;(function ($, window, document, undefined) {      'use strict';      var globalparams = {},         opts = {};      $.fn.myplugin = function(options) {         opts = $.extend(true, {}, $.fn.myplugin.defaults, options);         return this.each(function() {             var $this = $(this);             var = this;             var el = $this.attr("id");             globalparams.name = opts.name;             globalparams.color = opts.color;             globalparams.car = opts.car;              debug.call(that, el);              $this.on('click', '.btn', function() {                 debug.call(that, el);             });         });     };      $.fn.myplugin.defaults = {         name: "",         color: "",         car: ""     };      function debug(el) {         console.log('opts_' +el);         console.log(opts);         console.log('globalparams_' +el);         console.log(globalparams);     }  })(jquery, window, document); 

multi-instante plugin

$(function() {     $('#one').myplugin({         name: "bar",         color: "blue",         car: "audi"     });      $('#two').myplugin({         name: "foo",         color: "red",         car: "bmw"     }); }); 

html

<div id="one"><button class="btn">click one</button></div> <div id="two"><button class="btn">click two</button></div> 

this log of (init) debug call, , it's ok.

//opts_one = object { name="bar",  color="blue",  car="audi"} //globalparams_one = object { name="bar",  color="blue",  car="audi"}  //opts_two = object { name="foo",  color="red",  car="bmw"} //globalparams_two = object { name="foo",  color="red",  car="bmw"} 

and if click on #one btn result this. it's wrong!

//opts_one = object { name="foo",  color="red",  car="bmw"} //globalparams_one = object { name="foo",  color="red",  car="bmw"} 

i thought plugin global variables global within plugin scope.. mistake? how do? thank you

the outer scope can't used data specific particular invocation of plugin.

typically such data stored against each initialized dom element using jquery's .data(), while outer scope used static data , utility functions.

it typical :

• to write initialisation code init method.
• in addition init, allow other plugin methods, such debug. it's idea include destroy method.

here's example :

;(function ($, window, document, undefined) {     'use strict';      //static vars     var pluginname = 'myplugin';      // utility functions here     ...      var methods = {         init: function(options) {             var this;             var data = this.data(pluginname);             if(!data) { // if plugin has not been initialized on element                 var defaults = {                     name: "",                     color: "",                     car: ""                 };                 var opts = $.extend(true, defaults, options);                 this.data(pluginname, {                     name: opts.name,                     color: opts.color,                     car: opts.car,                     el: this.attr('id')                 });                 this.on('click.' + pluginname, '.btn', function() {                     methods.debug.call($(that));                 });             }         },         debug: function () {             var data = this.data(pluginname);             console.dir(data);         },         destroy: function () {             this.data(pluginname, null);             this.off('click.' + pluginname);         }         // ... other methods     };      $.fn[pluginname] = function(options) {         options = options || {};         return this.each(function() {             var method = options.method || 'init';             if(methods[method]) {                 methods[method].call($(this), options);             }         });     }; })(jquery, window, document); 

untested

note plugin small supervisor function decides method use, calls it. better (and more complicated) version of supervisor allow method specified separately options - see here example.

invoke follows :

$(function() {     $('#one').myplugin({         name: "bar",         color: "blue",         car: "audi"     }).myplugin({method:'debug'});      $('#two').myplugin({         name: "foo",         color: "red",         car: "bmw"     }).myplugin({method:'debug'}); });