Showing posts with label OOP. Show all posts

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.

Object-Oriented JavaScript, how to achieve public properties/fields

Recently I posted my findings about private fields in JavaScript. So this is a continuation of the post and it talks about public fields in your JavaScript code. So here is a quick example of public properties in your code:

function User() {
  // Private property
  var name = '';

  return {
    // Public property
    classVersion: '1.3',
    prevVersions: ['1.2.3', '1.2', '1'],

    setName: function(newName) {
      name = newName;
    },
    getName: function() {
      return name;
    }
  };
}
var user = new User();
user.classVersion; // 1.3
user.prevVersions; // ['1.2.3', '1.2', '1']

NOTE:
Define an object property name in your return statement and it will be accessible from outside. In other words - public field.

Public and private methods in JavaScript

I have been talking about public and private properties so far. I guess it is time for private and public methods. The idea behind is the same. To make a method public you need to define it in your return object and if you want to make it private you should declare it outside your return.

Basically:

function User() {
  // Private variable
  var name;

  // Private method
  var privateMethod = function(){
    // Access to private fields
    name += " Changed";
  };

  return {
    // Public methods
    setName: function(newName) {
      name = newName;
      privateMethod();
    },
    getName: function() {
      return name;
    }
  };
}
var user = new User();
user.setName("My Name");
user.getName(); // My Name Changed

As you can see, privateMethod and name are declared outside the return object and thus they are made private. Variables declared inside the return object are public and accessible using dot notation.

Object-Oriented JavaScript, how to achieve private properties/fields

The very basic of Object-Oriented Programming (OOP) is private fields and public methods (not considering features like polymorphism, inheritance, etc). So how to achieve this very basic of OOP in JavaScript. It turns out to be easy. Here is how to have private fields in your custom JavaScript functions/classes and using methods of your function/class to amend it.

function User() { 
  var name = ''; 
  return { 
    setName: function(newName) { 
      name = newName; 
    }, 
    getName: function() { 
      return name; 
    } 
  } 
} 
var user = User(); 
user.setName("My Name"); 
user.getName(); // My Name

The User() class we just created could be considered a bean in Java. Using this template you can have as many private fields and public methods as you want.