Public (prototype) methods vs private methods (v2)

Revision 2 of this benchmark created on May 18, 2011

Preparation HTML

<dl id="cities-dropdown">
<dt id="cities-header" class="rounded-corner">Porto Alegre</dt>
<dd id="cities-content" class="rounded-bottom-corner shadow-box">
        <ul id="cities-list" class="rounded-bottom-corner">
                <li><a href="#" class="city underline">São Paulo</a></li>
                <li><a href="#" class="city underline">Belo Horizonte</a></li>
                <li><a href="#" class="city underline">Florianópolis</a></li>
                <li><a href="#" class="city underline">Brasília</a></li>
                <li><a href="#" class="city">Rio de Janeiro</a></li>
                <li><a href="#" id="more">Mais cidades »</a></li>
        </ul>
</dd>
</dl>
<script>
  DropDownListOne = {};
  DropDownListOne = function(id) {
   var DDSPEED = 10;
   var DDTIMER = 15;
   var header = document.getElementById(id + '-header');
   var content = document.getElementById(id + '-content');
  
   // main function to handle the mouse events //
   var ddMenu = function(d) {
    clearInterval(content.timer);
    if (d == 1) {
     clearTimeout(header.timer);
     if (content.maxh && content.maxh <= content.offsetHeight) {
      return;
     }
     else if (!content.maxh) {
      content.style.display = 'block';
      content.style.height = 'auto';
      content.maxh = content.offsetHeight;
      content.style.height = '0px';
     }
     content.timer = setInterval(function() {
      ddSlide(content, 1)
     }, DDTIMER);
    } else {
     header.timer = setTimeout(function() {
      ddCollapse(content)
     }, 50);
    }
   };
  
   // collapse the menu //
   var ddCollapse = function(c) {
    c.timer = setInterval(function() {
     ddSlide(c, -1)
    }, DDTIMER);
   };
  
   // cancel the collapse if a user rolls over the dropdown //
   var cancelHide = function() {
    clearTimeout(header.timer);
    clearInterval(content.timer);
    if (content.offsetHeight < content.maxh) {
     content.timer = setInterval(function() {
      ddSlide(content, 1)
     }, DDTIMER);
    }
   };
  
   // incrementally expand/contract the dropdown and change the opacity //
   var ddSlide = function(c, d) {
    var currh = c.offsetHeight;
    var dist;
    if (d == 1) {
     dist = (Math.round((c.maxh - currh) / DDSPEED));
    } else {
     dist = (Math.round(currh / DDSPEED));
    }
    if (dist <= 1 && d == 1) {
     dist = 1;
    }
    c.style.height = currh + (dist * d) + 'px';
    c.style.opacity = currh / c.maxh;
    c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
    if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
     clearInterval(c.timer);
    }
   };
  
   // Load the menu events with the activate and deactivate functions
   this.loadMenu = function(activateFunction, deactivateFunction) {
    header.onmouseover = function() {
     activateFunction();
     ddMenu(1);
    };
    header.onmouseout = function() {
     deactivateFunction();
     ddMenu(-1);
    };
    content.onmouseover = function() {
     activateFunction();
     cancelHide();
    };
    content.onmouseout = function() {
     deactivateFunction();
     ddMenu(-1);
    };
   };
  };
  
  DropDownListTwo = {};
  DropDownListTwo = function(id) {
   this.DDSPEED = 10;
   this.DDTIMER = 15;
   this.header = document.getElementById(id + '-header');
   this.content = document.getElementById(id + '-content');
  };
  // main function to handle the mouse events //
  DropDownListTwo.prototype.ddMenu = function(d) {
   var obj = this;
   clearInterval(this.content.timer);
   if (d == 1) {
    clearTimeout(this.header.timer);
    if (this.content.maxh && this.content.maxh <= this.content.offsetHeight) {
     return;
    } else if (!this.content.maxh) {
     this.content.style.display = 'block';
     this.content.style.height = 'auto';
     this.content.maxh = this.content.offsetHeight;
     this.content.style.height = '0px';
    }
    this.content.timer = setInterval(function() {
     obj.ddSlide(obj.content, 1)
    }, this.DDTIMER);
   } else {
    this.header.timer = setTimeout(function() {
     obj.ddCollapse(obj.content)
    }, 50);
   }
  };
  
  // collapse the menu //
  DropDownListTwo.prototype.ddCollapse = function(c) {
   var obj = this;
   c.timer = setInterval(function() {
    obj.ddSlide(c, -1)
   }, this.DDTIMER);
  };
  
  // cancel the collapse if a user rolls over the dropdown //
  DropDownListTwo.prototype.cancelHide = function() {
   var obj = this;
   clearTimeout(this.header.timer);
   clearInterval(this.content.timer);
   if (this.content.offsetHeight < this.content.maxh) {
    this.content.timer = setInterval(function() {
     obj.ddSlide(obj.content, 1)
    }, this.DDTIMER);
   }
  };
  
  // incrementally expand/contract the dropdown and change the opacity //
  DropDownListTwo.prototype.ddSlide = function(c, d) {
   var currh = c.offsetHeight;
   var dist;
   if (d == 1) {
    dist = (Math.round((c.maxh - currh) / this.DDSPEED));
   } else {
    dist = (Math.round(currh / this.DDSPEED));
   }
   if (dist <= 1 && d == 1) {
    dist = 1;
   }
   c.style.height = currh + (dist * d) + 'px';
   c.style.opacity = currh / c.maxh;
   c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
   if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
    clearInterval(c.timer);
   }
  };
  
  // Load the menu events with the activate and deactivate functions
  DropDownListTwo.prototype.loadMenu = function(activateFunction, deactivateFunction) {
   var obj = this;
  
   this.header.onmouseover = function() {
    activateFunction();
    obj.ddMenu(1);
   };
   this.header.onmouseout = function() {
    deactivateFunction();
    obj.ddMenu(-1);
   };
   this.content.onmouseover = function() {
    activateFunction();
    obj.cancelHide();
   };
   this.content.onmouseout = function() {
    deactivateFunction();
    obj.ddMenu(-1);
   };
  };
  
  
  function menuActivated() {}
  
  function menuDeactivated() {}
</script>

Test runner

for (var i = 0; i < 1000; ++i) {
 var dropdownTwo = new DropDownListTwo('cities');
 dropdownTwo.loadMenu(menuActivated, menuDeactivated);
}

for (var i = 0; i < 1000; ++i) {
 var dropdownOne = new DropDownListOne('cities');
 dropdownOne.loadMenu(menuActivated, menuDeactivated);
}

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 2: published on May 18, 2011