<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Eli Grey &#187; namespacing</title>
	<atom:link href="http://eligrey.com/blog/post/tag/namespacing/feed" rel="self" type="application/rss+xml" />
	<link>http://eligrey.com/blog</link>
	<description>this instanceof Whitty</description>
	<lastBuildDate>Sat, 24 Dec 2011 22:58:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Namespacing properties in JavaScript</title>
		<link>http://eligrey.com/blog/post/namespacing-properties-in-javascript</link>
		<comments>http://eligrey.com/blog/post/namespacing-properties-in-javascript#comments</comments>
		<pubDate>Mon, 04 May 2009 22:50:17 +0000</pubDate>
		<dc:creator>Eli</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[E4X]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[namespacing]]></category>

		<guid isPermaLink="false">http://eligrey.com/?p=353</guid>
		<description><![CDATA[Namespacing properties is a great way to make a JavaScript library produce extendible objects. Namespacing in JavaScript can be done by prefixing namespace:: before object and property names. Unfortunately, namespacing is only supported in JavaScript 1.6 and higher, which is currently only implemented in SpiderMonkey (Firefox&#8217;s JavaScript engine) and Rhino with E4X enabled. Namespaces should [...]]]></description>
			<content:encoded><![CDATA[<p>Namespacing properties is a great way to make a JavaScript library produce extendible objects. Namespacing in JavaScript can be done by prefixing <code><em>namespace</em>::</code> before object and property names. Unfortunately, namespacing is only supported in <a href="https://developer.mozilla.org/En/New_in_JavaScript_1.6">JavaScript 1.6</a> and higher, which is currently only implemented in SpiderMonkey (Firefox&#8217;s JavaScript engine) and Rhino with <a href="https://developer.mozilla.org/en/E4X">E4X</a> enabled. Namespaces should have a toString method that returns a string of the same name (<code>Foo.toString() == "Foo"</code>). In Firefox, the <code>@mozilla.org/js/function</code> namespace (&#8220;function&#8221;) seems to be the default at which everything is under. For example, <code>function::document == this.document</code> and <code>x = "@mozilla.org/js/function"; x::document == function::document</code>. Also, anything with a blank string representation behaves the same way as long as it&#8217;s being used in a property, for example:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;@mozilla.org/js/function&quot;</span><span style="color: #339933;">,</span> bar <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// using try..catch because the error still fires in a typeof statement</span>
    foo<span style="color: #339933;">::</span>document<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// works fine</span>
    bar<span style="color: #339933;">::</span>document<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// error</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>err <span style="color: #000066; font-weight: bold;">if</span> err <span style="color: #000066; font-weight: bold;">instanceof</span> ReferenceError<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// err.message == &quot;reference to undefined XML name document&quot;;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">bar</span><span style="color: #339933;">::</span>document <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">document</span><span style="color: #339933;">;</span></pre></div></div>

<p>The following example shows a naming conflict that can be solved using namespaced properties. In the examples, the fictional libraries, libSpaceTime and libDimensions are loaded. libDimensions adds a <code>Size</code> global and creates a &#8216;dimensions&#8217; setter on Object.prototype that accepts various inputs to change the width/height/depth/ect. of something. libSpaceTime introduces the <code>SpaceTime</code> global. When a universe is created, the dimensions setter changes the number of dimensions the universe has. The width/height/ect. of a universe are automatically set (but can be changed) from the <code>matter</code> property.<br />
<span id="more-353"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> SpaceTime.<span style="color: #660066;">createUniverse</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    dimensions<span style="color: #339933;">:</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">,</span>
    energy<span style="color: #339933;">:</span> 1.7976931348623158e<span style="color: #339933;">+</span>308<span style="color: #339933;">,</span>
    matter<span style="color: #339933;">:</span> <span style="color: #CC0000;">130</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
foo.<span style="color: #660066;">dimensions</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>
Object.<span style="color: #660066;">getOwnPropertyDescriptor</span><span style="color: #009900;">&#40;</span>Object.<span style="color: #660066;">prototype</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;dimensions&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">set</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>foo<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>In the example, it was impossible to use libDimensions&#8217; dimensions setter to change <code>foo</code> without using <code>Object.getOwnPropertyDescriptor(Object.prototype, "dimensions").set</code>. This is where namespacing properties can help. In the following example, all of the extra properties are namespaced to their global constructors, making property name collisions very unlikely. Assuming that the same original <code>foo</code> universe exists, the code would now be:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">foo.<span style="color: #660066;">SpaceTime</span><span style="color: #339933;">::</span>dimensions <span style="color: #339933;">=</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">;</span>
foo.<span style="color: #660066;">Size</span><span style="color: #339933;">::</span>dimensions <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Another useful thing that works in conjunction with namespacing properties is using @-properties. For example, instead of using all the necessary methods to create a star, I could use the experimental createStar method that hasn&#8217;t been standardized yet, which would be accessible via <code>foo.@createStar()</code> if the library doesn&#8217;t namespace properties or <code>foo.@SpaceTime::createStar()</code> if the library does. This is easier to type than <code>foo.__createStar__()</code> and <code>foo.SpaceTime::__createStar__()</code>. About anywhere you start a property name with <code>_</code>, @ could be used instead. Of course, if your library is using E4X + XML, you should never do this due to @-properties being for XML tag attributes.</p>
<p>If you would like to use namespaced properties in browsers that don&#8217;t support JavaScript 1.6 or higher, you could use a format like <code>object[n(namespace, property <em>[, useAtSign]</em>)]</code> where <code>n</code> is a function that returns the namespaced property name. I have created a simple reference function for this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> n<span style="color: #006600; font-style: italic;">/*amespace*/</span><span style="color: #009900;">&#40;</span>ns<span style="color: #339933;">,</span> prop<span style="color: #339933;">,</span> at<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>at <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;@&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> ns <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;::&quot;</span> <span style="color: #339933;">+</span> prop<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://eligrey.com/blog/post/namespacing-properties-in-javascript/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

