Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing parameters to custom element extensions

    When introducing custom functionality to HTML elements we either use existing attributes to pass configuration parameters (like beetle's fValidate) or invent our own (like my Tooltips). While this method is ok for small amount of configuration information, it is not that flexible (you need to edit DTD) and becomes combersome when large amount of configuration parameters is needed.

    I figured a more convinient way is to use a CSS like string to pass configuration parameters:
    Code:
    <div myextension="parameter1: value1; parameter2-subparameter1: value2.1; parameter2-subparameter2: value2.2"> </div>
    Then initialization routine would contain:
    Code:
     if(myExtensionParameters = divElement.getAttribute('myExtension'))
          divElement.myExtension = new myExtensionObject(divElement,myExtensionParameters);
    Definition of possible parameters and their values can be done using an array of regular expressions:
    Code:
    myExtensionParamDefenitions = new Array();
    myExtensionParamDefenitions['choiceparameter'] = /^\s*(value1a|value1b|value1c)\s*$/;
    myExtensionParamDefenitions['stringparameter'] = /^\s*(\w+)\s*$/;
    myExtensionParamDefenitions['integerparameter'] = /^\s*(\d+)\s*$/;
    Constructor for the myExtensionObject would containd a parseParameters function:
    Code:
    function myExtensionObject(divElement,myExtensionParameters)
      { this.params=new Array();
        parseParameters(this.params,myExtensionParamDefenitions,myExtensionParameters);
    //Verify parameter initialization, if you like
    str='';
    for(e in this.params) str+= e + ': ' + this.params[e] + '\n';
    alert(str);   
    //Do whatever you have to do...
      }
    Function parseParameters has the following code:
    Code:
    function parseParameters(object,definitions,parameters)
      { paramEntries = parameters.split(';');
        for(var i=0; i<paramEntries.length; i++)
          { paramEntry = paramEntries[i].split(':');
            if(paramEntry.length == 2)
              { paramName = paramEntry[0].replace(/^\s*([\w-]+)\s*$/,'$1');
                if(definitions[paramName])
                  { res = definitions[paramName].exec(paramEntry[1]);
                    if(res[1])
                        object[convertCSSName(paramName)] = res[1];
                  }
              }
          }
      }
    Where convertCSSName function converts CSS type name (background-image) to javascript name (backgroundImage)
    Code:
    function convertCSSName(cssName)
      { sn = cssName.split('-');
        rs = sn[0];
        for(var i=1; i<sn.length; i++)
            rs += sn[i].replace(/^(\w)(\w*)$/,function(str,p1,p2,offset,s){return p1.toUpperCase() + p2;})
        return rs;
      }
    As a result you have params array of myExtensionObject object populated with validated entries. Changes and expansion is done by simply editing myExtensionParamDefenitions array.

    Enjoy.

    PS: The functions are coded more for clarity rather than for brevity - I'm certain there are ways to improve the implementation.
    Last edited by Vladdy; 02-12-2003 at 03:26 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Why not just do:

    <div bla="{hello: 'world', foo: 7}">

    And eval() getAttribute('bla')? You are essentially creating your own structure for packing data into attributes, why not use one that is easily parsable in JS?

    Even then, I don't think this makes semantic sense at all, but whatever.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First, I ABSOLUTELY HATE eval()
    Second, what you suggested is perfect for internal use. However, if I deside to distribute such component, I need to provide an easy way for a user to configure it. CSS-like syntax seems to be a logical choice. For the same reason I have validation of parameters and their values.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How come eval() is like the whipping-boy of javascript functions? It always seems to get "bad press" when it rises to the surface. Any good reason for this?

    I mean, it's not like the practice of converting a string into a code is all that uncommon, such as unserializing objects in PHP.

    Although I do avoid it when unecessary, I make no attempts to avoid it when it's the right tool for the job. Quite frankly, I think it's remarkably handy.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”


  •  

    Posting Permissions

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