Post
Ask Question

Revisiting Concepts Of JavaScript For SharePoint / Office 365 Developer - JavaScript Namespaces - Part Two

In this article, I will explain the details of JavaScript namespaces, which should be known to SharePoint/ Office 365 developers who use JavaScript Object Model(JSOM) for SharePoint / Office 365 development.

Background

I have written one article regarding JavaScript variables

In this article, we will discuss JavaScript namespaces. I feel, it’s really very important to understand the concept of namespaces while working on JSOM or SharePoint hosted apps.

Global namespace

  1. By default, JavaScript doesn’t provide namespace.

  1. Anything that we write in JavaScript file is placed into Global namespace by default includes all variables and functions.

  1. In the Browser, Global namespace container is “Window” object.

  1. Issue with directly, using Global namespaces- Whatever we write to JavaScript the file goes to Global namespaces, there might be the chances that naming conflicts appear. For example, if on my site, if we are loading a couple of JavaScript files, there might be the chance that the same function name or same variable name is there in the different files, which will cause the conflict and the code will not behave correctly. Solution to this problem is using namespace in our JavaScript code..

Custom namespace

  1. To address issue with Global namespace, as mentioned above in point 4 under Global namespace section, we can create our own Custom namespaces in JavaScript.

  1. Custom namespace is nothing but the object defined within Global namespace.

  1. Defining Custom namespace.
    1. //Custom NameSpace  
    2. var Validations = window.Validations || {};  

    Here, we are creating Custom namespace “Validations” under Global namespace object.

  2. We can add our methods/functions, followed by namespace Validations given below.
    1. Validations.validateEmpty = function() {  
    2.     // Method code goes here  
    3. }  

    Here, we have created a method called “validateEmpty()” under namespace “Validations”. Even though if same method is in another JS file on the same page, then also the conflict will not occur because our method is isolated by our Custom namespace.

    While calling validateEmpty() method, we need to call it by using namespace like Validations.validateEmpty().

  1. Similarly, we can create our variables in our Custom namespace, as shown below.
    1. //Custom NameSpace  
    2. var Constants = window.Constants || {};  

     Now, we can create variables under our custom Constants namespace, as shown below

     

    1. Constants.cssFileURL = “My CSS File URL”;  

This is a very common scenario, where we can have all our validations methods in “Validations” namespace, all constants in “Constants” namespace and all SharePoint list CRUD operations in “SharePointCRUD” namespace. In this way, our code will be isolated and there will be no chances of code conflicts.

Advantages of using namespaces

  1. Code Isolation
    No code conflicts with other code on the page in case multiple JavaScript files are loaded or any third part JavaScript files arw referred. In SharePoint Online, SharePoint itself loads its JavaScript files, so there are high chances of conflicts. The better solution is to use our Custom namespaces.

  1. Clean code improves the code readability. Code maintenance is easy.

Thanks. Any comment/ suggestions/ feedback/ questions are always welcome.


Similar Articles