• JS Strategy

last modified May 3, 2007 by nickyg622

Unobtrusive:
Keep all JS calls out of page markup.  Use DOM scripting to target element and attach events.  Modularize js?

Object-oriented
Attempt to keep related functionality in object blocks.  For a good example see here (from Backpack): https://asset3.backpackit.com/javascripts/blocks.js

Good ID Structure
JS will need to hook into DOM elements by ID.  That means we'll need an ID naming convention that creates consistent, parse-able IDs.  IDs will be used to tie together related elements.
For example, something like this would work:

<div id="note_1">
   <div id="note-contents_1" class="oc-liveEdit-value">This is my note</div>
   <div id="note-edit_1" class="oc-liveEdit-form">
        <form name="note-edit-form_1" action="fallback.py" method="post">
             <textarea>This is my note</textarea>
             <input type="submit" value="Edit" />
        </form>
   </div><!-- end #note-edit_1 -->
</div><!-- end #note_1 -->

JS will be able to parse the ID and then show/hide the appropriate elements.

Fallbacks:
Create non-js fallbacks for non-js-enabled browsers. That means:
  • Simple scripts to take the place of AJAX calls.  These scripts then return the user to previous page, with a message.
  • Hide elements on DOMReady only if JS is enabled (i.e., don't include style="display:none" in markup). This will allow non-js users to access live-edit forms.

References: