tag:forum.selfhtml.org,2005:/self
OOP und "unobstrusive" - Anfänger-Fragen – SELFHTML-Forum
2011-04-05T14:24:42Z
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502777#m1502777
parseHint("Pro")
2011-04-04T12:45:03Z
2011-04-04T12:45:03Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>Liebe Javascript-Fortgeschrittenen,</p>
<p>da ich des öfteren in Antworten auf eigene Fragen im Forum und auch bei Lösungssuchen in anderen Forumsdiskussionen<br>
auf mir bisher "spanisch" vorkommende Script-Notationen gestoßen bin, die sich in meiner Recherche<br>
als Literale, Konstruktoren etc. entpuppten, habe ich mir jetzt einige OOP-Tutorials angeguckt und versuchsweise eines meiner Scripte umgeschrieben.<br>
Vielleicht kann mir ja der ein oder andere auf die Sprünge helfen, mir sagen,<br>
ob ich da totalen Murks angestellt habe, oder ob das eine Verbesserung vom Schema<br>
var ..., var, ..., ... function..., function..., function...<br>
hin zu unobstrusive scripting darstellt.</p>
<p>Meine konkreten Fragen:<br>
(1) Ist das ein sinnvolles/gängiges Vorgehen, zunächst in einer namenlosen automatisch startenden Funktion (function(){...})() die Startbedingungen festzulegen und dann alle weiteren Variablen und Funktionen in einen Container<br>
zu packen - also als Methoden, Eigenschaften einer Konstruktor-Fkt.?<br>
(2) Wenn ich einem Element einen Event-Handler zuweisen möchte direkt, nachdem dieser im HTML-Baum erzeugt wurde und nicht erst nach vollständigem Laden aller Elemente, ist da die einzige Lösung, ein eigenes Script nur für diese Aktion zu schreiben und dieses direkt nach dem entsprechenden Element einzubinden (wenn ich auf Event-Handler im tag verzichten will)?</p>
<p>Im Folgenden das Script in 2 Schritten und die dazugehörige HTML (hier stark vereinfacht/auf das bzgl. Script relevante reduziert):<br>
Startbedingungen:</p>
<pre><code class="block language-javascript">
<span class="token comment">/*
- preload images
- event handling definieren
- neues Objekt als Instanz des Konstruktors (s.u.)
- einge Werte und Bilder-Pfadnamen an öffentl. Methode des Konstruktors übergeben */</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> imgs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span><span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
imgs<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
imgs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"bilder/strip"</span> <span class="token operator">+</span> <span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">".jpg"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> General <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">addEvent</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> eventName<span class="token punctuation">,</span> function_</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>function_<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> function_<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>attachEvent<span class="token punctuation">)</span>
element<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span> <span class="token operator">+</span> eventName<span class="token punctuation">,</span> function_<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">addOnLoad</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">function_</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token string">'loading'</span><span class="token punctuation">)</span>
General<span class="token punctuation">.</span><span class="token function">addEvent</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'load'</span><span class="token punctuation">,</span> function_<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">else</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span>function_<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> dragger_1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dragger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
General<span class="token punctuation">.</span><span class="token function">addEvent</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token string">"mousemove"</span><span class="token punctuation">,</span> dragger_1<span class="token punctuation">.</span>drag<span class="token punctuation">)</span><span class="token punctuation">;</span>
General<span class="token punctuation">.</span><span class="token function">addEvent</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token string">"mouseup"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>dragger_1<span class="token punctuation">.</span>dragObjekt <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// General.addEvent(document, "mousedown", function() {return false;}); </span>
document<span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>all<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// warum klappt if(document.ondragstart) nicht??? </span>
document<span class="token punctuation">.</span><span class="token function-variable function">ondragstart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>all<span class="token punctuation">)</span> <span class="token punctuation">{</span>
document<span class="token punctuation">.</span><span class="token function-variable function">onselectstart</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> Presets <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dia_strip</span> <span class="token operator">:</span> <span class="token string">"strip"</span><span class="token punctuation">,</span>
<span class="token literal-property property">id_pic_box</span> <span class="token operator">:</span> <span class="token string">"bild"</span><span class="token punctuation">,</span>
<span class="token literal-property property">images</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"bilder/strip1.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip2.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip3.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip4.jpg"</span><span class="token punctuation">,</span>
<span class="token string">"bilder/strip5.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip6.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip7.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip8.jpg"</span><span class="token punctuation">,</span>
<span class="token string">"bilder/strip9.jpg"</span><span class="token punctuation">,</span> <span class="token string">"bilder/strip10.jpg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">min_top</span> <span class="token operator">:</span> <span class="token number">123</span><span class="token punctuation">,</span>
<span class="token literal-property property">max_top</span> <span class="token operator">:</span> <span class="token number">480</span><span class="token punctuation">,</span>
<span class="token literal-property property">strip_map_top</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">472</span><span class="token punctuation">,</span> <span class="token number">420</span><span class="token punctuation">,</span> <span class="token number">367</span><span class="token punctuation">,</span> <span class="token number">315</span><span class="token punctuation">,</span> <span class="token number">262</span><span class="token punctuation">,</span> <span class="token number">210</span><span class="token punctuation">,</span> <span class="token number">157</span><span class="token punctuation">,</span> <span class="token number">105</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">strip_map_bottom</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">523</span><span class="token punctuation">,</span> <span class="token number">471</span><span class="token punctuation">,</span> <span class="token number">419</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token number">261</span><span class="token punctuation">,</span> <span class="token number">209</span><span class="token punctuation">,</span> <span class="token number">156</span><span class="token punctuation">,</span> <span class="token number">104</span><span class="token punctuation">,</span> <span class="token number">51</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">strip_part_height</span> <span class="token operator">:</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// General.addOnLoad(function() {General.addEvent(document.getElementById('diabox'), "mousedown", function() {dragger_1.drag_start(this);});}); </span>
window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'diabox'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>dragger_1<span class="token punctuation">.</span><span class="token function">drag_start</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
dragger_1<span class="token punctuation">.</span><span class="token function">uebergabe</span><span class="token punctuation">(</span>Presets<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Konstruktor:</p>
<pre><code class="block language-javascript">
<span class="token keyword">function</span> <span class="token function">Dragger</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">uebergabe</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">Presets</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip <span class="token operator">=</span> Presets<span class="token punctuation">.</span>dia_strip<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>pic_box <span class="token operator">=</span> Presets<span class="token punctuation">.</span>id_pic_box<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>images <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>Presets<span class="token punctuation">.</span>images<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>images<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Presets<span class="token punctuation">.</span>images<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>min_top <span class="token operator">=</span> Presets<span class="token punctuation">.</span>min_top<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>max_top <span class="token operator">=</span> Presets<span class="token punctuation">.</span>max_top<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_top <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> j<span class="token operator"><</span>Presets<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_top<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_bottom <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> j<span class="token operator"><</span>Presets<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_part_height <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_part_height<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>dragObjekt <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> dragY <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> posY <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> stripY<span class="token punctuation">;</span>
<span class="token keyword">var</span> aktuellePos<span class="token punctuation">;</span>
<span class="token keyword">var</span> stripDownBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> stripUpBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">drag_start</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt <span class="token operator">=</span> element<span class="token punctuation">;</span>
dragY <span class="token operator">=</span> posY <span class="token operator">-</span> that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>offsetTop<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">drag</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
posY <span class="token operator">=</span> document<span class="token punctuation">.</span>all <span class="token operator">?</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>event<span class="token punctuation">.</span>clientY <span class="token operator">+</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">-</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientTop<span class="token punctuation">)</span> <span class="token operator">:</span> e<span class="token punctuation">.</span>pageY<span class="token punctuation">;</span>
stripY <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt <span class="token operator">!=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">></span> that<span class="token punctuation">.</span>min_top <span class="token operator">&&</span> <span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator"><</span> that<span class="token punctuation">.</span>max_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator"><=</span> that<span class="token punctuation">.</span>min_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> that<span class="token punctuation">.</span>min_top <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripDownBusy <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">stripDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">>=</span> that<span class="token punctuation">.</span>max_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> that<span class="token punctuation">.</span>max_top <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripUpBusy <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">stripUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
aktuellePos <span class="token operator">=</span> posY <span class="token operator">-</span> dragY<span class="token punctuation">;</span>
<span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> bild <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>pic_box<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>that<span class="token punctuation">.</span>images<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>offsetTop <span class="token operator">-</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>min_top <span class="token operator">+</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+</span> stripY <span class="token operator">-</span> that<span class="token punctuation">.</span>strip_part_height<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>offsetTop <span class="token operator">-</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>min_top <span class="token operator">+</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator"><=</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+</span> stripY <span class="token operator">-</span> that<span class="token punctuation">.</span>strip_part_height<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
bild<span class="token punctuation">.</span>src <span class="token operator">=</span> that<span class="token punctuation">.</span>images<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">stripDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
stripDownBusy <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
stripDownBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
stripY <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripY <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">&&</span> aktuellePos <span class="token operator"><=</span> <span class="token number">123</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> stripY <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
<span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">stripDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>stripDownBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">stripUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
stripUpBusy <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
stripUpBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
stripY <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripY <span class="token operator">></span> <span class="token operator">-</span><span class="token number">107</span> <span class="token operator">&&</span> aktuellePos <span class="token operator">>=</span> <span class="token number">480</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>that<span class="token punctuation">.</span>strip<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> stripY <span class="token operator">-</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
<span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">stripUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>stripUpBusy <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>HTML:</p>
<pre><code class="block language-html">
<span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token prolog"><?xml version="1.0" encoding="UTF-8"?></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jscripts/galerie.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles/galerie.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bilder/strip.png<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>strip<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diabox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bilder/diarahmen.png<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diarahmen<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bildbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bilder/strip10.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>So, wie es ist, funktioniert das Script wie es soll - ob es hinsichtlich objektorientierten Programmierens sinnvoll geschrieben ist, das frage ich Euch ;}<br>
Vielen Dank im Voraus für jegliche Hilfe/Anregungen/...<br>
Lieben Gruß</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502780#m1502780
molily
zapperlott@gmail.com
2011-04-04T14:39:53Z
2011-04-04T14:39:53Z
OOP und "unobstrusive" - Anfänger-Fragen
<blockquote>
<p>(1) Ist das ein sinnvolles/gängiges Vorgehen, zunächst in einer namenlosen automatisch startenden Funktion (function(){...})() die Startbedingungen festzulegen und dann alle weiteren Variablen und Funktionen in einen Container zu packen - also als Methoden, Eigenschaften einer Konstruktor-Fkt.?</p>
</blockquote>
<p>Im Grunde kannst du sämtlichen Code so kapseln. Also auch den Konstruktor.</p>
<p>Wenn du etwas nach außen geben willst, so gibst du etwas aus dieser Funktion zurück ober gibst das globale Objekt window in die Funktion hinein und erzeugst daran eine Eigenschaft. (In deinem Beispiel ist das aber wohl nicht nötig.)</p>
<blockquote>
<p>(2) Wenn ich einem Element einen Event-Handler zuweisen möchte direkt, nachdem dieser im HTML-Baum erzeugt wurde und nicht erst nach vollständigem Laden aller Elemente, ist da die einzige Lösung, ein eigenes Script nur für diese Aktion zu schreiben und dieses direkt nach dem entsprechenden Element einzubinden (wenn ich auf Event-Handler im tag verzichten will)?</p>
</blockquote>
<p>Es wäre die schlechteste Lösung, ständig nach allen möglichen Elementen Scripte einzubinden. Das hätte keinen Vorteil.</p>
<p>Es reicht, <a href="http://molily.de/js/event-handling-onload.html" rel="nofollow noopener noreferrer">DOMContentLoaded</a> zu verwenden - da muss zwar das gesamte HTML geparst werden, aber das reicht i.d.R. aus, sofern selbiges nicht Megabyte groß ist.</p>
<p>Aus Performance-Gründen ist es sinnvoll, <script src> ans Dokumentende zu verschieben. Dann ist ohnehin garantiert, dass du auf alle Elemente über das DOM zugreifen kannst.</p>
<blockquote>
<ul>
<li>preload images</li>
</ul>
</blockquote>
<p>Das kann der Dragger übernehmen.</p>
<blockquote>
<ul>
<li>event handling definieren</li>
</ul>
</blockquote>
<p>Das sollte ebenfalls der Dragger übernehmen.</p>
<blockquote>
<ul>
<li>einge Werte und Bilder-Pfadnamen an öffentl. Methode des Konstruktors übergeben */</li>
</ul>
</blockquote>
<p>Diese kannst du auch direkt an den Konstruktor übergeben.</p>
<blockquote>
<p>var General = {<br>
addEvent : function(element, eventName, function_) {<br>
if (typeof(function_) == 'undefined')<br>
return false;<br>
if (element.addEventListener)<br>
element.addEventListener(eventName, function_, false);<br>
else if (element.attachEvent)<br>
element.attachEvent('on' + eventName, function_);<br>
return true;<br>
},</p>
</blockquote>
<p>Beachte, dass <a href="http://molily.de/js/event-handling-fortgeschritten.html#microsoft-eigenheiten" rel="nofollow noopener noreferrer">attachEvent nicht dasselbe macht</a> wie addEventListener.</p>
<blockquote>
<p>addOnLoad : function(function_) {<br>
if (document.readyState == 'loading')<br>
General.addEvent(window, 'load', function_);<br>
else<br>
setTimeout(function_, 1);<br>
}<br>
}</p>
</blockquote>
<p>Hier solltest du wie gesagt auf DOMContentLoaded setzen.</p>
<blockquote>
<p>var dragger_1 = new Dragger();</p>
<p>General.addEvent(document, "mousemove", dragger_1.drag);<br>
General.addEvent(document, "mouseup", function() {dragger_1.dragObjekt = false;});</p>
</blockquote>
<p>Diese Aufgaben gehören m.E. in den Dragger, oder wieso sollte das von Außen gemacht werden?</p>
<blockquote>
<p>if (document.all) { // warum klappt if(document.ondragstart) nicht???<br>
document.ondragstart = function() {return false;};</p>
</blockquote>
<p>ondragstart ist anfangs eine leere Eigenschaft. Sie enthält null o.ä. Wenn du if (document.ondragstart) prüft, bevor du der Eigenschaft einer Funktion zugewiesen hast, trifft die Bedingung natürlich nicht zu.</p>
<p>Wenn du prüfen willst, ob der Browser den Event unterstützt, verwende:</p>
<p>if ('ondragstart' in document) ...</p>
<blockquote>
<p>var Presets = { ... };<br>
dragger_1.uebergabe(Presets);</p>
</blockquote>
<p>Das kannst du wie gesagt einfach direkt dem Konstruktor als Initialisierungsdaten übergeben.</p>
<p>new Dragger({ ... });</p>
<blockquote>
<p>this.drag = function(e) {<br>
posY = document.all ? (window.event.clientY + document.body.scrollTop - document.body.clientTop) : e.pageY;</p>
</blockquote>
<p>Verwende bitte keine unbeteiligten Objekte wie hier document.all für Feature-Abfragen. Das ist sehr unzuverlässig. Frage direkt ab, ob e.pageY einen brauchbaren Wert enthält.</p>
<blockquote>
<p>return new Boolean(false);</p>
</blockquote>
<p>Wieso gibst du hier ein Boolean-Object zurück? Absicht? Ist dir der Unterschied zu einem normalen Boolean?Primitive bewusst?</p>
<blockquote>
<p>stripY = parseInt(document.getElementById(that.strip).style.top);<br>
if (stripY < 0 && aktuellePos <= 123) {<br>
document.getElementById(that.strip).style.top = stripY + 2 + 'px';</p>
</blockquote>
<p>Wenn du mehrfach auf ein Element zugreifst, so führe »document.getElementById(that.strip)« einmal aus und speichere den Rückgabewert zwischen.</p>
<blockquote>
<p>window.setTimeout(function() {stripDown();}, 1);<br>
window.setTimeout(function() {stripUp();}, 1);</p>
</blockquote>
<p>Ist dasselbe wie<br>
window.setTimeout(stripDown, 1);<br>
bzw.<br>
window.setTimeout(stripUp, 1);</p>
<p>Wozu die Kapselfunktion?</p>
<p>Ansonsten ist das schon recht sinnvoll strukturiert. Ich würde den Dragger aber noch weiter nach außen abschließen und wie gesagt die zusammengehörige Funktionalität wie das Registrieren der Event-Handler darin vereinigen.</p>
<p>Mathias</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502778#m1502778
Don P
2011-04-04T19:35:02Z
2011-04-04T19:35:02Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>Hallo,</p>
<p>Zur Struktur will ich jetzt mal nicht viel sagen, auf den ersten Bilck scheint sie mir gar nicht übel. Man könnte zunächst noch einiges am Code zu vereinfachen, anschliessend hat man dann einen noch besseren Überblick über die Stuktur, die dann man evtl. auch noch klarer bauen kann. Molily hat wohl schon das wichtigste zur Struktur gesagt.</p>
<p>Die Kapselung als anonyme Funktion ist i.O., muss dann aber auch konsequent sein, z.B. hast du die Variable i in Zeile 5 wohl vergessen zu deklarieren, so dass sie zur globalen Variablen wird, was die Kapselung untergräbt.</p>
<p>Was mir am meisten auffällt:</p>
<p>Vergleiche wie in <code class="language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span>etwas <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span></code> sind meistens unnötig und manchmal führen sie auch zu unerwarteten Ergebnissen.<br>
Mit <code class="language-javascript"><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">''</span> oder <span class="token keyword">undefined</span></code> sollte man entweder gar nicht vergleichen, d.h. einfach <code class="language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span>etwas<span class="token punctuation">)</span></code> oder <code class="language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>etwas<span class="token punctuation">)</span></code> notieren, oder aber – wenn man es denn sein muss – typgenau vergleichen mit den Operatoren <code class="language-javascript"><span class="token operator">===</span></code> und <code class="language-javascript"><span class="token operator">!==</span></code>.</p>
<blockquote>
<p>Wenn du mehrfach auf ein Element zugreifst, so führe »document.getElementById(that.strip)« einmal aus und speichere den Rückgabewert zwischen.</p>
</blockquote>
<p>Das würde ich noch allgemeiner formulieren: Eigentlich immer, wenn man auf ein Element, eine Eigenschaft oder einen berechneten Wert oder irgend etwas mehrfach zugreift, was nicht direkt im Scope liegt, sollte man es zwischenspeichern. Das erhöht die Performance und auch die Lesbarkeit bzw. Wartbarkeit des Codes. Z.B. hier:</p>
<pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt <span class="token operator">!=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">></span> that<span class="token punctuation">.</span>min_top <span class="token operator">&&</span> <span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator"><</span> that<span class="token punctuation">.</span>max_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator"><=</span> that<span class="token punctuation">.</span>min_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> that<span class="token punctuation">.</span>min_top <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripDownBusy <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">stripDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>posY <span class="token operator">-</span> dragY<span class="token punctuation">)</span> <span class="token operator">>=</span> that<span class="token punctuation">.</span>max_top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> that<span class="token punctuation">.</span>max_top <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripUpBusy <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">stripUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
aktuellePos <span class="token operator">=</span> posY <span class="token operator">-</span> dragY<span class="token punctuation">;</span>
<span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>wird unnötigerweise mehfach posY - dragY berechnet und auch mehrfach auf Objekte ausserhalb des aktuellen Scope zugegriffen.<br>
Daher würde ich es lieber so notieren:</p>
<pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> dragObjektStyle <span class="token operator">=</span> that<span class="token punctuation">.</span>dragObjekt<span class="token punctuation">.</span>style<span class="token punctuation">,</span>
minTop <span class="token operator">=</span> that<span class="token punctuation">.</span>min_top<span class="token punctuation">,</span>
maxTop <span class="token operator">=</span> that<span class="token punctuation">.</span>max_top<span class="token punctuation">,</span>
dy <span class="token operator">=</span> posY <span class="token operator">-</span> dragY<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>dy <span class="token operator"><=</span> minTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
dragObjektStyle<span class="token punctuation">.</span>top <span class="token operator">=</span> minTop <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripDownBusy<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">stripDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dy <span class="token operator">>=</span> maxTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
dragObjektStyle<span class="token punctuation">.</span>top <span class="token operator">=</span> maxTop <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>stripUpBusy<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">stripUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>
c<span class="token punctuation">.</span>top <span class="token operator">=</span> dy <span class="token operator">+</span> <span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
aktuellePos <span class="token operator">=</span> dy<span class="token punctuation">;</span>
<span class="token function">aktualisiereBild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Ist das nicht viel übersichtlicher und leichter verständlich?<br>
Wenn man den Code so ein bisschen optimiert hat, sieht man oft auch strukturelle Ungereimtheiten viel besser. Ist es z.B. Absicht, dass die Funktion drag nur dann einen Rückgabewert liefert, wenn das dragObjekt nicht existiert?</p>
<p>Hier:</p>
<pre><code class="block language-javascript"> <span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_top <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> j<span class="token operator"><</span>Presets<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_top<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_bottom <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> j<span class="token operator"><</span>Presets<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>kopierst du offenbar Arrays. Das geht einfacher mit der <code class="language-javascript">slice</code>-Methode:</p>
<pre><code class="block language-javascript"> <span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_top <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_top<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>strip_map_bottom <span class="token operator">=</span> Presets<span class="token punctuation">.</span>strip_map_bottom<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Ob das Kopieren überhaupt nötig ist, könnte man noch untersuchen.</p>
<p>Gruß, Don P</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502779#m1502779
parseHint("Pro")
2011-04-05T14:24:42Z
2011-04-05T14:24:42Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>Liebe Don P,<br>
auch Dir vielen Dank für Deine ausführliche und überaus hilfreiche Atwort :)</p>
<blockquote>
<p>Die Kapselung als anonyme Funktion ist i.O., muss dann aber auch konsequent sein, z.B. hast du die Variable i in Zeile 5 wohl vergessen zu deklarieren, so dass sie zur globalen Variablen wird, was die Kapselung untergräbt.</p>
</blockquote>
<p>Stimmt. Das liegt wohl an der Macht der (noch präsenten) Gewohnheit.</p>
<blockquote>
<p>wird unnötigerweise mehfach posY - dragY berechnet und auch mehrfach auf Objekte ausserhalb des aktuellen Scope zugegriffen.</p>
</blockquote>
<p>OOPs, jetzt wo Du's sagst.. Ja, sollte mir wirklich angewöhnen, jede Zeile doppelt<br>
auf ihre Sinnhaftigkeit hin zu überprüfen.</p>
<p>Lieben Gruß</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502781#m1502781
parseHint("Pro")
2011-04-04T18:13:28Z
2011-04-04T18:13:28Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>Hallo molily,</p>
<p>vielen, vielen Dank für Deine ausführliche und hilfreiche Antwort; damit, dass<br>
sich jemand soviel Mühe gibt und sogar auf Details im Scripts eingeht, hab ich<br>
nicht gerechnet und bin also sehr positiv überrascht :-}<br>
Mit Deinen Hinweisen, Anregungen und Berichtigungen kann ich viel anfangen und<br>
freue mich schon darauf, mich mehr mit modernem Javascripting zu beschäftigen.</p>
<blockquote>
<p>Wieso gibst du hier ein Boolean-Object zurück? Absicht? Ist dir der Unterschied zu einem normalen Boolean?Primitive bewusst?</p>
</blockquote>
<p>Hm, hatte irgendwo (glaube in Felix Riesterers Fader-Framework) gelesen, der Konstruktor<br>
müsse ein Objekt zurückgeben, vielleicht hatte ich da was missverstanden; habe - ehrlich gesagt - darüber nicht weiter nachgedacht und bisher auch noch nicht genauer recherchiert. Das werde ich bald nachholen :]</p>
<p>Ganz liebe Grüße und nochmals vielen Dank!</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502783#m1502783
Felix Riesterer
Felix.Riesterer@gmx.net
http://www.felix-riesterer.de/
2011-04-04T18:21:08Z
2011-04-04T18:21:08Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>Lieber parseHint("Pro"),</p>
<blockquote>
<p>Hm, hatte irgendwo (glaube in Felix Riesterers Fader-Framework) gelesen,</p>
</blockquote>
<p>*freu*</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
<div class="signature">-- <br>
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
</div>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502782#m1502782
molily
zapperlott@gmail.com
2011-04-04T19:55:17Z
2011-04-04T19:55:17Z
OOP und "unobstrusive" - Anfänger-Fragen
<blockquote>
<p>Hm, hatte irgendwo (glaube in Felix Riesterers Fader-Framework) gelesen, der Konstruktor<br>
müsse ein Objekt zurückgeben, vielleicht hatte ich da was missverstanden; habe - ehrlich gesagt - darüber nicht weiter nachgedacht und bisher auch noch nicht genauer recherchiert.</p>
</blockquote>
<p>Das ist richtig. Der Konstruktor gibt ja automatisch ein Objekt zurück, nämlich die erzeugte Instanz. Wenn man explizit return verwendet, dann hat das nur einen Effekt, wenn der zurückgegebene Wert ein Object ist. Ein Boolean-Object zurückzugeben in bestimmten Fällen ist daher mehr ein Workaround, um irgendwie dem Außen mitzuteilen, dass etwas schiefgegangen ist. Das ist ein ziemlicher Sonderfall - in der Regel sind String-, Boolean- und Number-Objekte unnötig und es reichen ihre jeweiligen Primitives.</p>
<p>Aber das besagte return new Boolean(false) steht bei dir gar nicht im Konstruktor, sondern in einer anderen normalen Funktion. Daher reicht da wohl ein einfaches return false aus.</p>
<p>Mathias</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502784#m1502784
parseHint("Pro")
2011-04-04T18:31:45Z
2011-04-04T18:31:45Z
OOP und "unobstrusive" - Anfänger-Fragen
<p>!</p>
<blockquote>
<p>*freu*</p>
</blockquote>
<p>hehe ;-}</p>
<p>Na, dann an dieser Stelle auch noch einmal einen herzlichen Dank an Dich für<br>
einige sehr hilfreiche Antworten, die ich schon von Dir bekommen habe hier bei<br>
selfhtml und für das gute Tutorial - nachdem ich mich da so einigermaßen<br>
durchgewurschelt hatte, hab ich mir Mathias Schäfers Artikel "Organisation von<br>
JavaScripten" angeschaut und im Nachhinein noch mehr verstanden ;}<br>
selfhtml wird mir immer symphatischer!</p>
<p>lieben Gruß</p>
https://forum.selfhtml.org/self/2011/apr/4/oop-und-unobstrusive-anfaenger-fragen/1502785#m1502785
molily
zapperlott@gmail.com
2011-04-04T19:59:43Z
2011-04-04T19:59:43Z
OOP und "unobstrusive" - Anfänger-Fragen
<blockquote>
<p>... - nachdem ich mich da so einigermaßen<br>
durchgewurschelt hatte, hab ich mir Mathias Schäfers Artikel "Organisation von<br>
JavaScripten" angeschaut und im Nachhinein noch mehr verstanden ;}<br>
selfhtml wird mir immer symphatischer!</p>
</blockquote>
<p>Dann dürfte dich vielleicht interessieren, dass ich seit geraumer Zeit an einem Nachfolgeartikel arbeite, siehe<br>
<a href="http://molily.de/weblog/javascript-organisation" rel="nofollow noopener noreferrer">http://molily.de/weblog/javascript-organisation</a><br>
Ich bin nur noch nicht dazu gekommen, den SELFHTML-Artikel, der 2006 erschien und 2008 das letzte Mal aktualisiert wurde, dadurch zu ersetzen.</p>
<p>Mathias</p>