Javascript Practice Day 1 : Global Namscpae pollution
If two javascript functions within the same scope are called then the one that is called later will override the one which is called earlier. As there is no concept of function overloading in Javascript. This results in GlobalNamespace pollution or name collition
So when we run the below code
TeamA.js file
function customer(firstName ,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.getFullName=function(){
return this.firstName+" "+this.lastName;
}
}
TeamB.js file
function customer(firstName ,middleName,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.middleName= middleName;
this.getFullName=function(){
return this.firstName+" "+this.middleName+" "+this.lastName;
}
}
Html
<!DOCTYPE>
<html>
<head>
<title>Practic-1</title>
</head></script>
<script type="text/javascript" src="TeamA.js"></script>
<script type="text/javascript" src="TeamB.js"></script>
<body>
<p>Hello World</p>
<div id="result">
<script type="text/javascript"> document.getElementById("result").innerHTML=new customer("Ram","Shyam").getFullName()</script>
</div>
</body>
</html>
Ouptput :
Ram Shyam Undefined
As the function customer in TeamB is expecting three arguments and only first two are provided,
As TeamB is called later TeamA so function in TeamB has overridden the function in TeamA
We can modify the files to bind them to a namespace under global i.e windows
TeamA
//window.practice.TeamA.customer
var Practice = Practice|| {} //if practice exists then practice otherwise create an empty object
Practice.TeamA= Practice.TeamA || {}
Practice.TeamA.customer= function(firstName ,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.getFullName=function(){
return this.firstName+" "+this.lastName;
}
return this;
}
TeamB
//window.practice.TeamA.customer
var Practice = Practice|| {} //if practice exists then practice otherwise create an empty object
Practice.TeamB= Practice.TeamB || {}
Practice.TeamB.customer=function (firstName ,middleName,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.middleName= middleName;
this.getFullName=function(){
return this.firstName+" "+this.middleName+" "+this.lastName;
}
return this;
}
HTML
<body>
<p>Hello World</p>
<div id="result">
<script type="text/javascript"> document.getElementById("result").innerHTML=new window.Practice.TeamA.customer("Ram","Shyam").getFullName()</script>
</div>
<div id="result1">
<script type="text/javascript"> document.getElementById("result1").innerHTML=new window.Practice.TeamB.customer("Ram","Shyam","Jodu").getFullName()</script>
</div>
</body>
This is how one can resolve the global namespace pollution .
So when we run the below code
TeamA.js file
function customer(firstName ,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.getFullName=function(){
return this.firstName+" "+this.lastName;
}
}
TeamB.js file
function customer(firstName ,middleName,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.middleName= middleName;
this.getFullName=function(){
return this.firstName+" "+this.middleName+" "+this.lastName;
}
}
Html
<!DOCTYPE>
<html>
<head>
<title>Practic-1</title>
</head></script>
<script type="text/javascript" src="TeamA.js"></script>
<script type="text/javascript" src="TeamB.js"></script>
<body>
<p>Hello World</p>
<div id="result">
<script type="text/javascript"> document.getElementById("result").innerHTML=new customer("Ram","Shyam").getFullName()</script>
</div>
</body>
</html>
Ouptput :
Ram Shyam Undefined
As the function customer in TeamB is expecting three arguments and only first two are provided,
As TeamB is called later TeamA so function in TeamB has overridden the function in TeamA
We can modify the files to bind them to a namespace under global i.e windows
TeamA
//window.practice.TeamA.customer
var Practice = Practice|| {} //if practice exists then practice otherwise create an empty object
Practice.TeamA= Practice.TeamA || {}
Practice.TeamA.customer= function(firstName ,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.getFullName=function(){
return this.firstName+" "+this.lastName;
}
return this;
}
TeamB
//window.practice.TeamA.customer
var Practice = Practice|| {} //if practice exists then practice otherwise create an empty object
Practice.TeamB= Practice.TeamB || {}
Practice.TeamB.customer=function (firstName ,middleName,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
this.middleName= middleName;
this.getFullName=function(){
return this.firstName+" "+this.middleName+" "+this.lastName;
}
return this;
}
HTML
<body>
<p>Hello World</p>
<div id="result">
<script type="text/javascript"> document.getElementById("result").innerHTML=new window.Practice.TeamA.customer("Ram","Shyam").getFullName()</script>
</div>
<div id="result1">
<script type="text/javascript"> document.getElementById("result1").innerHTML=new window.Practice.TeamB.customer("Ram","Shyam","Jodu").getFullName()</script>
</div>
</body>
This is how one can resolve the global namespace pollution .
Comments
Post a Comment