SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you write your JavaScript?

    Since the day i've learned about Javascript/DOM and events, i've been coding the main script for my document this way:
    Code:
    window.onload = init;
    
    function init()
    {
       /*
    
        get the needed elements' references and assign events to them
    
       */
    }
    As you see, it's a pretty linear approach, and creates lots of clutter, especially if you had so many elements in your document that you need to assign events to.

    So is there a better approach to keep things more organized?

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put all the functions in an external js file. This will:
    a) tidy up your primary file
    b) cause the browser to cache the js file and not fetch all that js on every page load
    c) make it a bit harder for others to snoop into your code

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've seen basically 2 different techniques.

    Technique 1: Let window.onload initialize everything.

    Pro:
    - All initialization functions are called from one place.
    - Downgrade detection is done once and before any initializations take place.

    Con:
    - There is the possibility of an onload conflict.
    Code:
    var widgets = [];
    
    window.onload = function()
    {
      // Does the browser provide the objects/methods this application requires?
      if (document.getElementById && document.getElementsByTagName && document.createElement) {
        // If yes then initialize everything
        widgets[0] = new widget1();
        widgets[1] = new widget2();
        for (var i = 0; i < widgets.length; ++i) {
          widgets[i].onload();
        }
        initSomeBehavior();
        initSomeOtherBehavior();
      }
    };
    
    window.onunload = function()
    {
      for (var i = 0; i < widgets.length; ++i) {
        widgets[i].onunload();
      }
    };
    Technique 2: Let each object initialize itself by registering its own listeners.

    Pro:
    - There is no possibility of an onload conflict.
    - Scripts become self-initializing

    Con:
    - Initialization code is scattered throughout the project files.
    - Downgrade detection becomes more complicated.
    - Using this technique may depend on what browsers the application is required to support.
    Code:
    // main.js //
    
    xAddEventListener(window, 'load', mainOnLoad, false);
    xAddEventListener(window, 'unload', mainOnUnload, false);
    
    function mainOnLoad()
    {
      // initialization for main.js
    }
    
    function mainOnUnload()
    {
      // clean-up for main.js
    }
    
    function xAddEventListener(e,eT,eL,cap) // Source
    {
      if(!(e=xGetElementById(e))) return;
      eT=eT.toLowerCase();
      if(e.addEventListener) e.addEventListener(eT,eL,cap);
      else if(e.attachEvent) e.attachEvent('on'+eT,eL);
      else e['on'+eT]=eL;
      return h;
    }
    
    // end main.js //
    
    // widget.js //
    
    xAddEventListener(window, 'load', widgetOnLoad, false);
    xAddEventListener(window, 'unload', widgetOnUnload, false);
    
    function widgetOnLoad()
    {
      // initialization for widget.js
    }
    
    function widgetOnUnload()
    {
      // clean-up for widget.js
    }
    
    // end widget.js //

    What other pros and cons could be listed?

  4. #4
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ًThanks MikeFoster, just the kind of answer i was looking for.

    Well i don't actually use the "onload" property, i use a function like the xAddEventListener you've used.

    My question was rather about the logic, how do you attach events to elements. Do you put them all in one function that's called once the document it loaded (first technique)? or do you attach a "load" event for all the elements you need events for (second technique)? or is there a better one?

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer what Mike calls "technique 2".

    Have either of you seen this?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •