Write jquery plugin and "$.something" construct

Question

Currently i'm working on a jquery plugin and looking at other plugin code i found a common way to write it passing throught an object, somethng like :

$.fn.myplugin = function(method){
    //... some code
    object = new $.myobject(param);
    //... other code

    // myobject definition
    $.myobject = function(param){
        //.... my object code
    }
}

I can't understand how works $.myobject definition and why many developers use it to define their plugins.

Could you give some info and tutorial/links to documentation if possibile ?

I already read authoring docs, but i didn't find something about "$.yourobject" construct yet. I mean, i'm confident with the $.fn function i think but not with $.something :P — MatterGoal, Aug 03 '11 at 11:08
In javascript you can create object properties and methods dynamically. In this code: $.myfunction = function(param){...} author creates new function called 'myfunction' on jQuery object. You can see this: http://www.w3schools.com/js/js_objects.asp and also I would recommend the book 'jQuery in Action' by Bear Bibeault and Yehuda Katz. — Dmytro Laptin, Aug 03 '11 at 11:28
So, this way i add a property to jquery perfect! Why use $.fn ? that way i can avoid to do that and create directly a $.myfunction to extend jquery object. — MatterGoal, Aug 03 '11 at 11:37
Citation: The true power of jQuery lies in the ability to easily and quickly select and operate on DOM elements. Luckily, we can extend that power by adding wrapper methods of our own that manipulate selected DOM elements as we deem appropriate. By adding wrap-per methods, we automatically gain the use of the powerful jQuery selectors to pick and choose which elements are to be operated on without having to do all the work ourselves. — Dmytro Laptin, Aug 03 '11 at 11:54
Citation (continued): Given what we know about JavaScript, we probably could have figured out on our own how to add utility functions to the $ namespace, but that’s not necessarily true of wrapper functions. There’s a tidbit of jQuery-specific information that we need to know: to add wrapper methods to jQuery, we must assign them as properties to an object named fn in the $ namespace. The general pattern for creating a wrapper function is $.fn.wrapperFunctionName = function(params){function-body}; — Dmytro Laptin, Aug 03 '11 at 11:54
Woderful, i had to read the documentation in a better way i think! Could you resume in an answer so i can accept it ? — MatterGoal, Aug 03 '11 at 12:45
Your code is probably wrong. You're assigning `$.myobject` *inside* `$.fn.myplugin`. It should probably be a sibling. — Sean McMillan, Aug 05 '11 at 12:42
@Dmytro Laptin please formulate an answer so i can accept it. — MatterGoal, Aug 13 '11 at 14:27

score 1 · Accepted Answer · edited May 23 '17 at 09:58

1

The ability to add properties at runtime to javascript objects is what makes every javascript object an 'expando' object.

There is an explanation here

Stack overflow question on javascript expando objects

Hope this helps :)

edited May 23 '17 at 09:58

Community

1
1

answered Aug 05 '11 at 10:39

Ryan

3,715
2
20
17

score 1 · Answer 2 · answered Aug 18 '11 at 11:46

The true power of jQuery lies in the ability to easily and quickly select and operate on DOM elements. Luckily, we can extend that power by adding wrapper methods of our own that manipulate selected DOM elements as we deem appropriate. By adding wrap-per methods, we automatically gain the use of the powerful jQuery selectors to pick and choose which elements are to be operated on without having to do all the work ourselves.
Given what we know about JavaScript, we probably could have figured out on our own how to add utility functions to the $ namespace, but that’s not necessarily true of wrapper functions. There’s a tidbit of jQuery-specific information that we need to know: to add wrapper methods to jQuery, we must assign them as properties to an object named fn in the $ namespace. The general pattern for creating a wrapper function is

$.fn.wrapperFunctionName = function(params){function-body};

Let’s concoct a trivial wrapper method to set the color of the matched DOM elements to blue:

(function($){
  $.fn.makeItBlue = function() {
    return this.css('color','blue');
  };
})(jQuery);

http://www.manning.com/bibeault2/

score 0 · Answer 3 · answered Aug 18 '12 at 12:00

I think it's just one of the many ways to avoid polluting the global scope. Developers put their plugin as a property of jQuery itself to make it unacessible via window.myPlugin

Or they prefer construction

$.tooltip(someObjects, "text")

than

$(someObjects).tooltip("text")

or want to adopt both.

However as a method to avoid code pollution I'd recommend self invoking functions rather than extending jQuery with meaningless wrappers.

(function($) {
  // put here any variables or functions you need
  // they will stay within the self invoking function scope

  function setup(element) {
    // add extra features to the matched element
  }

  $.fn.tooltip = function() {
    return this.each(function(index, element) {
      setup(element);
    });
  }
})(jQuery);

If this anwsers your question you can read more in one of my articles.

Write jquery plugin and "$.something" construct

3 Answers3