Namespace Conflict Issue in Javascript

Question

5.00/5 (1 vote)

See more:

Hi,
I am having 2 javascript files (web references) with same namespaces and method names but implementation is different. I need to call each of them and display the data based on 2 version files.
Scenario: Display the content from Production version Reference and Development version Reference, so that we can identify the differences between Production and Development versions. Note: We should not change the namespaces of any version file.

// namespace & method names are common for both javascript versions But Implementation is different

// v1.js

C#

var Site = {};
Site.Style = {}; 
Site.Style.data = function Getdata() {
    return 'Old Version Data';
}

Site.Style.version = function GetVersion() {
    return '1.0.0.0';
}

// v2.js

C#

var Site = {};
Site.Style = {}; 
Site.Style.data = function Getdata() {
    return 'New Version Data';
}

Site.Style.version = function GetVersion() {
    return '2.0.0.0';
}

// HTML Page

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/v1.js" type="text/javascript"></script>
    <script src="js/v2.js" type="text/javascript"></script>

    <script type="text/javascript">
        function myFunction() {
            var olddata = Site.Style.data();
            var newdata = Site.Style.data();
            document.getElementById('oldDataDiv').innerText = olddata;
            document.getElementById('newDataDiv').innerText = newdata;
        }
    </script>
</head>
<body onload="myFunction();">
    <form id="form1" runat="server">

        <div id='oldDataDiv'></div>
        <div id='newDataDiv'></div>
    </form>
</body>
</html>

Posted 6-Aug-14 14:39pm

Indrajith Reddy

Add a Solution

Comments

Sergey Alexandrovich Kryukov 7-Aug-14 1:09am

Javascript does not have namespace declarations. Semantics close to namespaces are sometimes modeled by objects. So, what do you mean by "namespaces"? More importantly, do you have any special reason for using different versions of some Javascript library? This is an easy way to invite troubles...
—SA

Indrajith Reddy 7-Aug-14 3:15am

Sorry for using the term namespace. I am new to this object type JS functions. The 2 versions of js files contain same function names but logic is different. Our UI developers will host 2 versions of js files in which one will be the production and the other is beta version. The beta version contains new improved design logic. We should add those 2 script references in html page and render 2 grids side by side by calling those 2 versions. Finally we need to check the design improvements in beta version when compared to production. side by side comparison will be done and we will give feedback for it. Our JS functions are created in the above mentioned formats(v1.js is Production file & v2.js is beta file). The only thing i needed is to render one grid on Left hand side using production JS file and another grid on Right hand side using beta JS file. I don't want to use iframes and no possibility to change JS files. Is there any way to give alias name while referencing the files, so that I can call the functions using that aliasname ?

Sergey Alexandrovich Kryukov 7-Aug-14 11:44am

Please, no need to apologize for the term. As I say there are just certain techniques named "namespacing", but this is nothing but some techniques of isolation of the identical names based on the use of Javascript objects. If you want, I'll reference some articles on such techniques, but you probably can find them yourself. Your problem is different: using of existing libraries. You can modify them to make the property/function name required distinction, but what would be the value of it? Some temporary code? What if this is a 3rd-party library and you want to upgrade it? Will you agree to start over?
So, the whole approach looks questionable to me...
—SA

3 solutions

Solution 1

I don't think there is any straight forward way of achieving your objectives. But Polymorphism in JavaScript[^] could be the first step in the right direction

Posted 6-Aug-14 22:48pm

_Asif_

Comments

Sergey Alexandrovich Kryukov 7-Aug-14 12:04pm

Good link to an article showing interesting approach, my 5.
This is not exactly the same as what people do for Javascript "namespacing", but can be applicable.
I provided a very elementary explanation of the namespacing idea and other interesting article references, please see Solution 2.
—SA

Solution 2

Please see my comments to the question: the whole approach looks very questionable to me, due to the reasons I tried to explain in my comments.

I can explain the idea of introduction of "namespacing" in Javascript, maybe it can help you at this time or in future.

For example, you have two functions: oneAction and anotherAction, and imagine that eventually you need different versions of them. Consider this script:

JavaScript

<script>

	firstNamespace = {
	    oneAction: function() {
		alert("one action 1");
	    },
	    anotherAction: function() {
		alert("another action 1");
	    }
	};

	secondNamespace = {
	    oneAction: function() {
		alert("one action 2");
	    },
	    anotherAction: function() {
		alert("another action 2");
	    }
	};
	
	//now try:
	firstNamespace.oneAction();
	secondNamespace.oneAction();
	firstNamespace.anotherAction();
	secondNamespace.anotherAction();

</script>

You got proper isolation of some set of functions. In principle, you can do something similar to a big set of Javascript instructions (here, you need to understand that declarations in Javascript are no different from some instructions, they are created during runtime), a whole library. The technique I demonstrated is the most basics, there are different refinements of the idea.

Please see:
http://addyosmani.com/blog/essential-js-namespacing[^],
http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript[^],
http://thanpol.as/javascript/development-using-namespaces[^],
Namespaces in JavaScript[^].

—SA

Posted 7-Aug-14 6:01am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graham Breach · Accepted Answer · 2014-08-07T07:56:00

Perhaps I'm missing something, but there's nothing stopping you from making a copy of the Javascript object created by the first script and using it later:

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/v1.js" type="text/javascript"></script>
    <script type="text/javacript">
      // make a copy of the first Site object
      var Site1 = Site; Site = null;
    </script>
    <script src="js/v2.js" type="text/javascript"></script>

    <script type="text/javascript">
        function myFunction() {
            var olddata = Site1.Style.data(); // use the first script's Site object
            var newdata = Site.Style.data();
            document.getElementById('oldDataDiv').innerText = olddata;
            document.getElementById('newDataDiv').innerText = newdata;
        }
    </script>
</head>
<body onload="myFunction();">
    <form id="form1" runat="server">

        <div id='oldDataDiv'></div>
        <div id='newDataDiv'></div>
    </form>
</body>
</html>