<?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>Blogg - Athega AB &#187; Web Workers</title>
	<atom:link href="http://blogg.athega.se/tagg/web-workers/feed/" rel="self" type="application/rss+xml" />
	<link>http://blogg.athega.se</link>
	<description>...</description>
	<lastBuildDate>Thu, 18 Nov 2010 22:17:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>JSON och MooTools för Web Workers</title>
		<link>http://blogg.athega.se/2009/10/06/json-och-mootools-for-web-workers/</link>
		<comments>http://blogg.athega.se/2009/10/06/json-och-mootools-for-web-workers/#comments</comments>
		<pubDate>Tue, 06 Oct 2009 15:48:51 +0000</pubDate>
		<dc:creator>Johan Beronius</dc:creator>
				<category><![CDATA[Kod]]></category>
		<category><![CDATA[Programmeringsspråk]]></category>
		<category><![CDATA[Webbutveckling]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[Web Workers]]></category>

		<guid isPermaLink="false">http://blogg.athega.se/?p=490</guid>
		<description><![CDATA[MooTools är en trevlig verktygslåda som främst är tänkt för att skriva JavaScript-kod som manipulerar element på en webbsida och skapar animeringar och grafiska effekter. Därför är den starkt knuten till objekten window och document som finns i det globala kontextet när JavaScript-kod körs på en vanlig webbsida. MooTools i Worker-kontext Men MooTools har även [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://mootools.net/" target="_blank">MooTools</a> är en trevlig verktygslåda som främst är tänkt för att skriva JavaScript-kod som manipulerar element på en webbsida och skapar animeringar och grafiska effekter. Därför är den starkt knuten till objekten <code><b>window</b></code> och <code><b>document</b></code> som finns i det globala kontextet när JavaScript-kod körs på en vanlig webbsida.</p>
<h4>MooTools i Worker-kontext</h4>
<p>Men MooTools har även hjälpmedel för att skriva objektorienterad kod samt en del utökningar och förbättringar för språket som sådant. Om man vill dra nytta av detta för kod som körs i ett annat sammanhang där <code><b>window</b></code> och <code><b>document</b></code> inte finns tillgängliga, t.ex. i en Web Worker tråd, vad gör man för att få mootools att fungera då?<br />
En variant är att skapa mock-up objekt för att maskera det faktum att objekten inte finns, tomma skelett som bara innehåller det nödvändigaste för att mootools skall kunna laddas utan fel. Självklart ger inte detta tillgång till någon funktionalitet som är beroende av dessa objekt men övriga funktioner finns på plats.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// If we're in a worker we need to masquerade the global context and load mootools</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">importScripts</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	document <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		prototype<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		createElement<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		getElementsByTagName<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><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;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	window <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		document<span style="color: #339933;">:</span> document<span style="color: #339933;">,</span>
		Document<span style="color: #339933;">:</span> document<span style="color: #339933;">,</span>
		Element<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> prototype<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		Window<span style="color: #339933;">:</span>  <span style="color: #009900;">&#123;</span> prototype<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		addEventListener<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		attachEvent<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	self.<span style="color: #660066;">importScripts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mootools.js'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h4>Skicka objekt till Workers</h4>
<p>Eftersom Web Workers är helt isolerade från webbsidan, dvs. inte har tillgång till något delat minne, går det inte att skicka objekt till dem hur som helst. Enda sättet att kommunicera är genom att posta meddelanden som bara kan överföra strängar. Självklart kan man då serialisera objekten till JSON och skicka med dem. </p>
<h5>Varför heter det JSON?</h5>
<p>Vad jag då skulle vilja reflektera över är varför det kallas <i>JavaScript <b>Object</b> Notation</i>. Ett objekt är ju en sak som vet vad den är och kan göra saker själv, dvs. en datastruktur med tillhörande kod som beskriver hur den skall uppföra sig.<br />
När man serialiserar ett objekt till en JSON-sträng försvinner alla kodreferenser, dvs. objektets metoder, kvar har man bara datastrukturen. Därför kan det tyckas vara mer korrekt att det borde kallas <i>JavaScript <b>Data</b> Notation</i></p>
<h5>Välsigna datastrukturer</h5>
<p>Vad gör vi då för att kunna använda datastrukturer som blivit deserialiserade från JSON som fullfjädrade objekt? Vi kan välsigna dem tillbaka till sin klasstillhörighet genom att koppla ihop datastrukturen med metoderna från klassen igen. Därför skapar vi en en konstruktor som heter <code><b>bless</b></code> i basklassen för alla klasser <code><b>Class</b></code> som tar en datastruktur och utökar en ny instans av klassen med denna.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Contructor that returns a new instance of this class</span>
<span style="color: #006600; font-style: italic;">// extended with all properties of the given data structure</span>
<span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">bless</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> $extend<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Då kan vi sedan göra exempelvis så här:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> MyClass <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	myData<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Hello, world!&quot;</span><span style="color: #339933;">,</span>
	doStuff<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">myData</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> myObject <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> MyClass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> string <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">encode</span><span style="color: #009900;">&#40;</span>myObject<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">decode</span><span style="color: #009900;">&#40;</span>string<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// data.doStuff();  &lt;--- Not possible here</span>
<span style="color: #003366; font-weight: bold;">var</span> newObject <span style="color: #339933;">=</span> MyClass.<span style="color: #660066;">bless</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
newObject.<span style="color: #660066;">doStuff</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>På så vis kan man återskapa objekt som är identiska med de som skickades trots att de har blivit omvandlade till och från en ren textsträng på vägen.</p>
]]></content:encoded>
			<wfw:commentRss>http://blogg.athega.se/2009/10/06/json-och-mootools-for-web-workers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

