Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #18027

Re: Request for opinions on my newbie approach

Message-ID <10136443.OnBuAidq6I@PointedEars.de> (permalink)
From Thomas 'PointedEars' Lahn <PointedEars@web.de>
Organization PointedEars Software (PES)
Date 2013-01-09 04:31 +0100
Subject Re: Request for opinions on my newbie approach
Newsgroups comp.lang.javascript
References <kcilrc$vt8$1@dont-email.me>
Followup-To comp.lang.javascript

Followups directed to: comp.lang.javascript

Show all headers | View raw


Leonardo Azpurua wrote:

> But now the time has come to move over, and after toying with several
> other development tools and platforms, I decided to adopt HTML +
> ECMASCRIPT + CSS on the client side and PHP for the server for any further
> development.

By contrast to HTML and CSS, ECMAScript is _not_ (no longer even partially) 
an acronym; do not write it all-uppercase.  Also know that you are for the 
most part not using ECMAScript, but various implementations of ECMAScript, 
including JavaScript.  [And the DOM is not part of any programming language 
(since more than a decade); it is a language-independent API.]

> The way to go seems to be to "encapsulate" as much as possible the DOM in
> order to be able to get it out of my "operative" code.

You are on the right track.  By encapsulating references to target DOM 
objects in native user-defined wrapper objects you are avoiding to augment 
host objects and all the problems that come with that.  Compare 
JSX:widgets.js.

> Today I wrote my first attempt at a Form class,

These languages (on the client-side) so far use prototype-based inheritance 
only.  There are no classes.  “Object type” appears to be the term that fits 
best as it is used in the ECMAScript Specification.

> that will encapsulate an HTML form and allow me to simplify the rest opf
> the code.
> 
> So far, this is all that I have done:
> 
> <file forma.js>
>  function Form(f) {
>     this.name = f.name;
> 
>     for (var i = 0; i < f.elements.length; i++)

      for (var i = 0, len = f.elements.length; i < len; ++i)

>     {
>        var e = f.elements[i];
>        this[e.id] = e;

Not a good idea.  Keep in mind that

  1. not all form controls (need to) have an ID;
  2. your wrapper object has other properties at that level that could be
     overwritten if a form control has the same 

Unless you also wrap the child controls, you do not need this loop.

>        this.addEventHandler(e, "blur");
>        this.addEventHandler(e, "focus");

This does not make sense as it is.  You will not always have listeners for 
those events.

>     }
>  }
> 
>   Form.prototype.addEventHandler = function (dest, eventName) {
>        try {
>           dest.addEventListener(eventName, eval(dest.id + "_" +
>           eventName),
> false);

Avoid eval() – see the FAQ – and avoid globals.  Your wrapper object can 
have properties for event listeners if necessary (see JSX:widgets.js).

Also, addEventListener() does _not_ (always) throw exceptions if the event 
listener cannot be added.  (A fundamental API design flaw if you ask me.)  
It only throws an exception in some implementations on some environments 
with some event types if the event type is not supported; but that is non-
standard behavior (which is due to another fundamental API design flaw).

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-
addEventListener>
<http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-
Events.html#events-EventTarget-addEventListener>

>        }
>        catch (e) {}
>   };
> <file/>
> […]
> I am a rather "lonely" coder.

Are we not all (at first)? :)

> So I decided to ask for your opinions to this approach before going too
> much further.
> 
> TIA for any comments.

HTH

> --

Signatures are to be delimited with a line containing only ”-- ”.  Thanks to 
the outdated version of Outlook Express that you are using, the trailing 
space is trimmed as you send the message.  See <http://insideoe.com/> for 
details and workarounds.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread


Thread

Request for opinions on my newbie approach "Leonardo Azpurua" <leonardo@exmvps.org> - 2013-01-08 22:24 -0430
  Re: Request for opinions on my newbie approach Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-09 04:31 +0100
    Re: Request for opinions on my newbie approach "Leonardo Azpurua" <leonardo@exmvps.org> - 2013-01-08 23:34 -0430
      Re: Request for opinions on my newbie approach Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-09 05:14 +0100
    Re: Request for opinions on my newbie approach Jim T. <x@y.z> - 2013-01-09 14:32 -0500
      Re: Request for opinions on my newbie approach Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2013-01-09 20:41 +0100
        Re: Request for opinions on my newbie approach Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-09 21:03 +0100
        Re: Request for opinions on my newbie approach Jim T. <x@y.z> - 2013-01-09 15:11 -0500
        Re: Request for opinions on my newbie approach Luc Yen <luc@goal.tw> - 2013-01-09 14:38 -0800
      Re: Request for opinions on my newbie approach "Leonardo Azpurua" <leonardo@exmvps.org> - 2013-01-09 18:10 -0430
        Re: Request for opinions on my newbie approach Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-10 01:36 +0100

csiph-web