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
– MatterGoal, Commented Aug 3, 2011 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: w3schools.com/js/js_objects.asp and also I would recommend the book 'jQuery in Action' by Bear Bibeault and Yehuda Katz. — Dmytro Laptin
– Dmytro Laptin, Commented Aug 3, 2011 at 11:28
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
– Dmytro Laptin, Commented Aug 3, 2011 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
– Dmytro Laptin, Commented Aug 3, 2011 at 11:54

Community · Accepted Answer · 2017-05-23 09:58:56Z

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, 2017 at 9:58

CommunityBot

11 silver badge

answered Aug 5, 2011 at 10:39

Ryan

3,8152 gold badges23 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmytro Laptin · Accepted Answer · 2011-08-18 11:46:54Z

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/

rezoner · Accepted Answer · 2012-08-18 12:00:11Z

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.

Collectives™ on Stack Overflow

Write jquery plugin and "$.something" construct

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related