<?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>Refactored scope &#187; javascript dependancies</title>
	<atom:link href="http://ominian.com/tag/javascript-dependancies/feed/" rel="self" type="application/rss+xml" />
	<link>http://ominian.com</link>
	<description>PyMethius project notes</description>
	<lastBuildDate>Thu, 26 Aug 2010 21:25:58 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Adventures in Javascript dependancy loading</title>
		<link>http://ominian.com/2010/01/29/adventures-in-javascript-dependancy-loading/</link>
		<comments>http://ominian.com/2010/01/29/adventures-in-javascript-dependancy-loading/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 20:35:39 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[browser maddness]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[javascript dependancies]]></category>

		<guid isPermaLink="false">http://ominian.com/?p=5</guid>
		<description><![CDATA[One of my most personally successful philosophy&#8217;s in dealing with Web browsers is never blindly trust them.
My initial solution to loading in dependencies depended on a switchboard style approach, if browser support onready or similar events then bind an anonymous function to make the appropriate notice.  Else spin up a interval based checker anonymous function [...]]]></description>
			<content:encoded><![CDATA[<p>One of my most personally successful philosophy&#8217;s in dealing with Web browsers is never blindly trust them.</p>
<p>My initial solution to loading in dependencies depended on a switchboard style approach, if browser support onready or similar events then bind an anonymous function to make the appropriate notice.  Else spin up a interval based checker anonymous function that looked every few seconds for the script for about a minute.    This solution kind of worked, but not reliably because it depended on browser detection vs. capabilities detection.</p>
<p>Instead of reworking things to attempt to ferret out what capabilities a foreign browser supports, I went with a brute force approach that will eventually be a foundation for a much more advanced system.</p>
<p>So the prototype works like such.</p>
<p>wm.loader.load(&#8220;someModule&#8221;) which becomes the path  &#8220;/mods/someModule.js&#8221; and that is applied to a new script tag as it&#8217;s src attribute.  This is then appended to the head tag.  All pretty standard stuff actually.  What&#8217;s different is the notification process.</p>
<p>someModule.js contains a simple line &#8220;wm.loader.notify(&#8220;someModule&#8221;) &#8221; which hits an internal dictionary and if this is the first notification, fire&#8217;s of a notice to the server.</p>
<p>Simple and guaranteed to work reliably.   Plus it gives me room to grow for later.</p>
<p>Like adding a call like &#8220;wm.loader.multi(&#8220;lib1&#8243;,&#8221;lib2&#8243;,&#8221;lib3&#8243;, 10,  function(){   doSomethingWhen Dependancies met });</p>
<p>arguments[0-2] can be detected and pushed to a callstack array, any integer can be assumed to be a time out period, and the last argument as an anonymous function can be assumed to be a onSuccess callback.   A dependency failure mechanism could be incorporated into the actual loader lib as either an observable emitter or just a cry for help back to the service.</p>
<p>More involved:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">wm.<span style="color: #660066;">loader</span>.<span style="color: #660066;">multi</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
          <span style="color: #003366; font-weight: bold;">var</span> dependancies <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>  timeOut <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>  callBack <span style="color: #339933;">=</span> None<span style="color: #339933;">;</span>
&nbsp;
          loop through arguments<span style="color: #339933;">:</span>
                    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> current <span style="color: #000066; font-weight: bold;">instanceof</span> string <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                           append to dependancies
                    <span style="color: #009900;">&#125;</span> 
                    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> current <span style="color: #000066; font-weight: bold;">instanceof</span> integer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                             append to timeOut
                    <span style="color: #009900;">&#125;</span> 
                    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> current <span style="color: #000066; font-weight: bold;">instanceof</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                                assign to callBack
                     <span style="color: #009900;">&#125;</span>
&nbsp;
              <span style="color: #003366; font-weight: bold;">var</span> dependancyCheck <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>loadedLib<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                                          pop loadLib from dependancies<span style="color: #339933;">;</span>
                                         <span style="color: #000066; font-weight: bold;">if</span> dependancies.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">0</span> then
                                                     cancel timeOut 
                                                     call  callback<span style="color: #339933;">;</span>
                                 <span style="color: #009900;">&#125;</span>
             dependancies.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span> wm.<span style="color: #660066;">loader</span>.<span style="color: #660066;">load</span><span style="color: #339933;">,</span> dependancyCheck <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>I would be lying if I said I knew this construct would work perfectly once I implement it, but I think the general idea is something to work with.</p>
]]></content:encoded>
			<wfw:commentRss>http://ominian.com/2010/01/29/adventures-in-javascript-dependancy-loading/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
