2

I've seen people add their own custom/user functions to the jQuery object ($). For instance:

$.myUserFunc = function() { /* regular JS code */}

Why would you do this? Instead of $.myUserFunc, why not create your function as simply myUserFunc or (if you want to avoid polluting the global scope) put it on another custom/user object like myObj.myUserFunc?

the
  • 21,007
  • 11
  • 68
  • 101
Niko Bellic
  • 2,370
  • 2
  • 29
  • 25
  • 2
    using myObj or myUserFunc doubles the global count compared to just $... – dandavis Aug 25 '14 at 19:39
  • 3
    @Morklympious: only if they are jQuery expansions, otherwise you needlessly risk collision. – dandavis Aug 25 '14 at 19:41
  • 1
    @dandavis I guess putting them on the `$` global would make more sense as it doesn't result in naming collisions and it might very well give a common namespace for developers to throw their functions. – Morklympious Aug 25 '14 at 19:42
  • Related questions/answers: [Why are global variables considered bad practice?](http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice-javascript) and [jQuery global variable best practice & options?](http://stackoverflow.com/questions/2866866/jquery-global-variable-best-practice-options). – jfriend00 Aug 25 '14 at 19:44
  • 4
    in general, people do a lot of weird/dumb/slow/confusing stuff in JS, it doesn't always have a good reason behind it, but almost everything works. putting stuff on $ prevents globals, which a lot of noobs think is like the #1 most important thing. but, it also risks getting wiped out if another copy of jQuery or prototype is injected. it's probably harder to find stuff on $ than globals, and it tightly-couples what should be two separate pieces. i don't think it's a great idea, but it's not the worst thing ever. – dandavis Aug 25 '14 at 19:45
  • cause $ is object as all in javascript, so pretty much you can add function or object wherever you want, and will not collide with anything else in jquery, if your scoupe you function in a smart name. $.myownstuff = { my1 : function(){}} – ncubica Aug 25 '14 at 19:58
  • For what it's worth, I don't think this is a great thing. The only time you should be messing with jQuery is if you're extending it with a plugin, and then you should use the method that @Morklympious points out. I can't think of a good reason to do this. Closures are good things, why not use them? I also don't know why anyone would downvote this question or vote to close it. It's a perfectly good question. – Brad Aug 25 '14 at 20:01

1 Answers1

3

The construct you are asking about:

$.myUserFunc = function() {}

creates a static function (available globally) on the jQuery namespace object. This is different from a jQuery plug-in method.

There are several reasons why one might do this - some are perhaps better justified than others.

  1. You may create a jQuery utility function that is directly related to jQuery (only useful when using jQuery), yet is at a different level than a plug-in method.

  2. You have a global function that you don't want to put in the global namespace (for all the typical reasons that lots of top-level global name are avoided) and you happen to be using jQuery so you choose to put your global function on the jQuery namspace object.

In my opinion, the first makes some sense. If it's a jQuery-specific function, yet it's a global function and not a method of a jQuery object (like plug-ins are), then putting it on the main jQuery makes some sense. There's really no reason to implement yet another top level namespace when there's an appropriate one already there and your function is related to that namespace object.

In my opinion, the second reason doesn't make as much sense from an architectural point of view. If this function isn't a jQuery-specific function (e.g. doesn't use or operate on jQuery objects), then it really doesn't belong on the jQuery object. It's a general purpose function and should be defined in a more general purpose way, either as a singleton global function or, if you have multiple types of related functions like this, put it on its own namespace object.

This said, in many cases, you can just create your own closure and define your own functions for use by your own code without having to put them either in the global namespace or on a namespace object. So, unless these functions must be globally accessible from anywhere, they don't need to go on the jQuery object.

For example, let's suppose you had two jQuery plugin-methods that wanted to share a common function. Obviously, this function has to be defined outside of these two plug-in methods. But, it does not have to be defined globally. I can be put in a closure and shared that way:

// define closure
(function() {

    // declare shared function in a closure
    function commonFunc() {
        // common code here
    }

    // define first plugin method
    jQuery.fn.plugin1 = function() {
        // do stuff
        // ....

        // use common function
        commonFunc();
    };

    // define other plugin method
    jQuery.fn.plugin2 = function() {
        // do different stuff
        // ....

        // use common function
        commonFunc();
    };

})();
jfriend00
  • 683,504
  • 96
  • 985
  • 979