wonder: Cross Browser Issues

Some additional cross browser issues "we" have faced while developing a reasonable UI based on a home grown AJAX like idiom predating AJAX ...

Comma Mysteries

If the comma contributes an undefined element to arrays, it causes very mysterious errors to be thrown for objects with JSON syntax. (And this happens quite frequently due to copy pasting of stuff or removal of a last element etc etc). For example

var foo = {bar:'bar',};

The above causes mysterious syntax errors on IE and if you use the debugger provided by Microsoft the code window points at a vague location. The secret to locating the errors is to move over to a background window in that MDI window - and that window will have highlighted the right error location!

slow string additions

Incremental string formation using '+=' is extremely slow in IE, especially as the string grows larger. This can be gotten around by creating arrays of strings and using array 'join' method to create a large string. The funny thing is that on mozilla/firefox the latter is very slow :-). So the following code can be used (implement amIInIE function suitable to detect IE browser ...)


function StringBuffer(sz)
{
    if(amIInIE())
    {
     if(!sz)
     {
      sz = 128;
     }
     
     var buffer = new Array(sz); 
     var index = 0;

     var text = new Array();
     
     this.append = function(piece)
     {
      if(index == sz)
      {
       text.push(buffer.join(''));
       index = 0;
      }

      buffer[index++] = piece;
     }

     this.toString = function()
     {
      if(index > 0)
      {
       for(var i = index;i < sz;i++)
       {
        buffer[i] = '';
       }

       text.push(buffer.join(''));
      }

      return text.join('');
     }
    }
    else
    {
     var text = '';

     this.append = function(piece)
     {
      text += piece;
     }

     this.toString = function()
     {
      return text;
     }
    }
}

///Example usage
var start = new Date().getTime();
var buff = new StringBuffer(128);
for(var i = 0; i< 1024000;i++)
{
    var f = i + '12345678901234567890123456789012345678901234567890123456789012345678901234567890';
    
    buff.append(f);
}
var end  = new Date().getTime();

alert(end - start);

Method Sublimation

When 'core' objects such as arrays are stored say in a frameset scope while the frame page keeps changing they mysteriously lose their methods. The data stays intact, though. For example if you store an array, it loses methods like push, join etc - invoking them causes errors which imply that there is no such method. But data is intact.

This can be overcome by creating a new array each time and copying data onto it. Very mysterious - just the 'vtable' seems to disappear! The following example suggests a work around:


function arrayPush(array,newItem)
{
 if(!xHasValue(array))
 {
     array = [];
 }

 if(!amIInIE())
 {
     array.push(newItem);
     return array;
 }
 else
 {
     var newArray = [];
     for(var i = 0;i &lt; array.length;i++)
     {
         newArray.push(array[i]);
     }

     newArray.push(newItem);

     return newArray;
 }
}