Summary

Keywords

javascript namespace tutorial javascript namespace javascript namespace function javascript namespace pattern javascript namespace variables javascript namespace explained js namespace tutorial javascript namespace example js namespace example simple javascript namespace example javascript nested namespace example javascript tutorial

Full Transcript

Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/02/namespaces-in-javascript.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video, we will discuss how to use namespaces to avoid polluting the global scope. This is continuation to Part 55. Please watch Part 55 of JavaScript tutorial to understand the problem of global namespace pollution. JavaScript lack namespaces. However we can use objects to create namespaces. The following line says use the PragimTech object if it already exists, otherwise create an empty object. var PragimTech = PragimTech || {}; The following line adds a nested namespace. A nested namespace is a namespace inside another namespace. In JavaScript to define a nested namespace, you define an object inside another object. PragimTech.TeamA = PragimTech.TeamA || {}; Modify the script in TeamA.js file as shown below. In this example we are adding customer() function to PragimTech.TeamA namespace. var PragimTech = PragimTech || {}; PragimTech.TeamA = PragimTech.TeamA || {}; PragimTech.TeamA.customer = function (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.getFullName = function () { return this.firstName + " " + this.lastName; } return this; } PragimTech will be added to the global namespace. window is the alias for global namespace in JavaScript. You can now access customer() function as shown below. PragimTech.TeamA.customer("Tom", "Grover") OR window.PragimTech.TeamA.customer("Tom", "Grover") Modify the script in TeamB.js file as shown below. In this example we are adding customer() function to PragimTech.TeamB namespace. var PragimTech = PragimTech || {}; PragimTech.TeamB = PragimTech.TeamB || {}; PragimTech.TeamB.customer = function (firstName, middleName, lastName) { this.firstName = firstName; this.middleName = middleName; this.lastName = lastName; this.getFullName = function () { return this.firstName + " " + this.middleName + " " + this.lastName; } return this; } PragimTech will be added to the global namespace. You can now access customer() function as shown below. PragimTech.TeamB.customer("Tom", "T", "Grover") OR window.PragimTech.TeamB.customer("Tom", "T", "Grover") On any given HTML page you should be able to access both the versions of customer() function as shown below. [html] [head] [script type="text/javascript" src="TeamA.js" ][/script] [script type="text/javascript" src="TeamB.js" ][/script] [/head] [body] [script type="text/javascript"] // Call the customer function that is defined in TeamA.js alert(PragimTech.TeamA.customer("Tom", "Grover").getFullName()); // Call the customer function that is defined in TeamB.js alert(PragimTech.TeamB.customer("Tom", "T", "Grover").getFullName()); [/script] [/body] [/html]