2

私が取り組んでいる小さなプロジェクト用に独自の JavaScript クラス操作関数を作成しましたが、1 つを除いてすべてうまく機能します。トグル クラス関数。

http://jsperf.com/my-class-functions-and-how-they-perform

今日の時点で、コードは次のとおりです。

tglClass = function(el, className) {
  return !!remClass(el, className) || !!addClass(el, className);
};

そして、パフォーマンスの低下は、何かを行う前に addClass と remClass の両方が hasClass を呼び出した結果であると考えました。

hasClass = function(el, className) {
  return el.classList.contains(className);
};

addClass = function(el, className) {
  if (!hasClass(el, className)) {
    return el.className += ' ' + className;
  } return false;
};

remClass = function(el, className) {
  if (hasClass(el, className)) {
    return el.className = (' ' + el.className + ' ').replace(' ' + className + ' ', ' ');
  } return false;
};

しかし、奇妙な点は、hasClass を 1 回だけ実行するように関数を書き直すと、上で説明したことを実行した場合よりもパフォーマンスがさらに低下することです。

tglNcClass = function(el, className) {
  if (hasClass(el, className)) {
    return el.className = (' ' + el.className + ' ').replace(' ' + className + ' ', ' ');
  } else {
    return el.className += ' ' + className;
  }
};

私がここで見落としていることについて何か考えはありますか? 他の機能がそれほど高速なのはなぜですか?

更新しました

4

0 に答える 0