Monday, January 26, 2009

Namespace your JavaScript function and variable with jQuery

We all know that global variable are evil. Namespacing  your variables and methods is now considered a good practice and shows your awareness about the trends. Anyway, I thought how can I namespace my variables and methods in jQuery. Well, first off, I can easily extend jQuery with custom written plugins.

$.fn.extend({
  myNamespaced: function(myArg){
    return 'namespaced.' + myArg;
  }
});
jQuery().myNamespaced('A');
$().myNamespaced('A'); // Shorthand $()
// Outputs: namespaced.A

Now my functions are namespaced and would not conflict with any other already declared functions with the same name. This is great, but to access my functions or variables I have to call jQuery(). The code still looks like chaining not namespacing. To declare your variables or functions in jQuery namespace you can extend the core jQuery object itself using jQuery.extend() rather than jQuery.fn.extend().

$.extend({ 
  myNamespaced: function(myArg){ 
    return 'namespaced.' + myArg; 
  } 
}); 
jQuery.myNamespaced('A'); 
$.myNamespaced('A'); // Shorthand 
// Outputs: namespaced.A

As you can see, now I can call my functions and properties without parenthesis after jQuery object. Now my functions have a jQuery namespace and will not conflict with other functions that might have the same name.

TIP:
Use $.extend({}) to namespace your fields and methods.

at

8 comments:

  1. UnknownFebruary 5, 2009 at 9:02 AM

    I am not sure I understand exactly. Let's say I wanted to use the namespace "BenNadel". How would I add nested methods to that?

    $.fn.extend({
    BenNadel: {
    Test: function(){ .... }
    }
    });

    Then, to access it, would I do:

    $( ... ).BenNadel.Test()

    Am I following this correctly?

    ReplyDelete
  2. jQuery LoverFebruary 5, 2009 at 11:37 PM

    @Ben Nadel, yeap :)

    ReplyDelete
  3. WilliamMarch 22, 2009 at 3:42 AM

    This doesnt work, as the inner method Test() would have a wrong this variable, it would now points to the outer namespace hash. Any solution?

    ReplyDelete
  4. chrisMay 25, 2009 at 11:11 AM

    this makes no sense at all.

    ReplyDelete
  5. UzbekjonMay 29, 2009 at 7:40 AM

    @chris, What's not making any sence ?!

    ReplyDelete
  6. kidoJune 11, 2009 at 11:33 AM

    jQuery.extend() its not the same as jQuery.fn.extend().

    first is used to add a "static" function to a jQuery namespace

    second is used to add a method to an element set, that jQuery is wrapping; there fore, using "this" in method provide u with matched set.

    and as William said if u use namespace with jQuery.fn.extend like: $.fn.kido.funbar() {
    this.show() // this will not point to a jQuery as it does if u omit "kido" namespace
    }
    im looking for the same solution :/

    ReplyDelete
  7. AnonymousDecember 8, 2009 at 9:18 AM

    Nice practices!!! Thanks for the post!

    ReplyDelete
  8. AaronDecember 10, 2009 at 7:07 PM

    I found a solution for the problem.
    It's not a very good solution, but it works.

    Here is it.

    $.fn.extend({
    NameSpace: function(method, arg1, arg2){
    var methods = {
    "meth1" : function(This){
    This.hide(); // use This instead of this
    },

    "meth2" : function(This, arg1, arg2){
    This.show();
    },

    "meth3" : function(This, arg1){
    This.hide(1000);
    },
    }
    methods[method](this, arg1, arg2 );
    //this.hide();
    }
    });

    If you want to call for example meth2 you will use.

    $("#id").NameSpace("meth2", arg1, arg2);

    ReplyDelete