1

I can not find any reference about this and I see many different approaches. Someone told me that if you are using jquery in your project you should use a "special" syntax for defining your functions.

What he told me is this:

$.functionName = function (var1, var2){
       //your code
};

And use it like this:

$.functionName("Test", "Test");

But then I went looking for a guideline or a best practice for defining functions when using jQuery. And I found this: jquery4u.com

I think that the above example probably is a function with a 'custom' namespace? I'm not sure.

Anyways, my question is: Is there a guideline / best practice to define functions when you are using jQuery? (and what are the (dis)advantages)

Thanks a lot!

8
  • 1
    A simple question: why all this? Dec 10, 2012 at 10:51
  • What is the role of that function?
    – Ram
    Dec 10, 2012 at 10:53
  • That someone is the best person to answer this question.
    – Salman A
    Dec 10, 2012 at 10:54
  • We are building a project that should be able to handle a lot of requests in a short time span and want it to perform as good as possible. Also we want our code to be clean and maintainable. And also because I'm curious.
    – Nielsm
    Dec 10, 2012 at 10:55
  • 1
    @chumkiu because he wants to learn how to this it also via this way. stop teaching people how to think
    – Royi Namir
    Dec 10, 2012 at 11:02

3 Answers 3

4

Using jQuery in your project doesn't mean that you should change everything about the Javascript that you use in the project. jQuery is a library, it's not a framework.

A regular function should be defined in the ordinary way:

function functionName(var1, var2){
  //your code
};

You might consider to put the functions in objects to keep the global scope as clean as possible, but putting every function in the jQuery object using $.functionName=... is not any better than putting them in the global scope.

0
1

For define function is not mandatory to use jQuery. Simply define a function in old way style:

function myCoolFunc() {
    // your code here
}

Now, jQuery is simply an Object (named $)… So, if you have this:

var myObj = {}
myObj.myCoolFunc = function() {
    //your code here
}
myObj.myCoolFunc();

or if you have this:

// include jQuery <script ...
$.myCoolFunc = function() {
    // your code here
}
$.myCoolFunc();

is the same.. the only difference is that in the first case you have myCoolFunc as property of myObj object, in the second case the myCoolFunc is a property of jQuery object ($ or jQuery).

What is $.fn?

The $.fn is the prototype of jquery object.

To have this:

$.fn.myCoolFunc = function() {
    // your code here
}

is not the same of previous cases. In this case you declare a public method for jquery instances. For call this you have to do:

$('div').myCoolFunc();
// and not $.myCoolFunc();

in this case the function is called for each div in your DOM. Inside the function you have the scope (this) that is the element of your DOM.

Finally, maybe it has sense to insert a function inside the jQuery object (LIKE a namespace) in some cases. If you want a function for manipulate some element in DOM, you should use $.fn.myFunc (as best practice). In other cases, it's faster and logic to put your functions in the global scope (or in other objects for encapsulate it)

2
  • thanks @chumkiu, I think this covers it all :) So basically it is better that I create my own namespace rather than putting it all in the jQuery object? Except if I want to manipulate elements in the DOM.
    – Nielsm
    Dec 11, 2012 at 7:38
  • Yes, I think is the better approach :-) Dec 11, 2012 at 9:23
0

Don't worry, still focus....

Your way to write a function is true... Because $ or jQuery are a variable that declared when page loaded.... I think he is tell about special syntax...

The Special syntax is:

(function($) {
    $.functionName = function (var1, var2){
    //your code
    };
})(jQuery);

the code above for make sure if this function is jquery plugin

$.functionName = function (var1, var2){
   //your code
};

the code above is defining function without selector and

$.fn.functionName = function (var1, var2){
   //your code
};

for including selector

Hope it help

1
  • Isn't this how you create a plugin to jQuery? That is not what we want to do. We are just building up a simple user interface based on some JSON streams we get from a service.
    – Nielsm
    Dec 10, 2012 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.