トグル処理の様々な実装方法テスト in JavaScript

@author Mitsuru Haga<haga@a-oi.jp>
@version 2007/03/16 3:40

はじめに

○○さんの「業務日報2007/03/15」のJavaScriptを拝見していて、JavaScript大好きっことしてはムラムラきたので僕もトグル処理を書いてみます。最近プログラミングしていないので、ストレスが・・。

○○さんのトグル処理は、プログラミングニュービーとは思えない、シンプルで的確なソースでした。そこをあえて改良するとなると・・・

グローバル変数の存在
管理するフラグが増える事も考えて、グローバル変数は極力使わない方向で。
関数がひとつの対象しか処理できない
２つ以上のボタンで処理したい場合は、関数をもうひとつ用意しなきゃならないので、１つで全部まかなえるように
document.getElementById()が毎回呼ばれる
document.getElementById()は、DOM内を全検索するため結構負荷が高い、一回呼んだら参照を保持する方向で。
HTML内でイベントハンドラ定義してる
出力からは、極力ロジックを抜いたほうがいいので、その方向で。

などに焦点をあてつつ、JavaScriptならではのダイナミックかつトリッキーな方法で実装します。

実装方法

オブジェクト拡張方式

JavaScriptといえば、オブジェクト。
トグル動作をするためのクラスを作り、ボタン要素に対して擬似的に継承します。
そうすることで、まさにトグるために生成されたトグルボタンができる。
クロージャ渡し方式

JavaScriptといえば、クロージャ。
１つの関数で複数要素へのローカル変数を定義・保持するために、クロージャとレキシカルスコープを利用する。
そうすることで、イベントに関数を定義しながら、内部でフラグを保持することができるようになる。

それ何がいいの？

VIEW(HTML)にソースコードが混入しないですむため、ロジックと表現の切り分けがきっちりする。
→３ヶ月後の仕様に困らない。
フラグ状態を格納する変数を外側（グローバル領域）に定義しなくてすむ
→カプセル化して、ソースを綺麗に。
複数のボタン要素に、それぞれのフラグを持たせるために、複数の関数を用意しなくてすむ
→再利用。
Prototype.jsライクな書き方で、ソースコードがそこはかとなくオシャレ。
→気分的な問題

サンプル

さっそくサンプルを・・
ボタンを押すと「ON」「OFF」切り替わります。

オブジェクト拡張式

OFF

クロージャ渡し方式

OFF

ソースコード

[ソースコードを表示する]

/**
 * オブジェクトを継承する（Objectを汚染拡張 from prototype.js）
 * @param destination 拡張されるオブジェクト
 * @param source 雛形オブジェクト
 */
Object.mixin = function( destination, source ){
  for (property in source)
    destination[property] = source[property];
  return destination;
}

/**
 * トグル可能な要素を表すクラス
 */
var TogglableElement = function(){};
TogglableElement.prototype = {
  flag:true,
  resultTarget:undefined,
  toggle:function(){
    this.flag = !this.flag;
  },
  update:function(){
    this.resultTarget.innerHTML = ( this.flag ) ? 'ON' : 'OFF';
  },
  onmouseup:function(){
    this.toggle();
    this.update();
  }
};

/**
 * 初期化
 * イベントハンドラはHTML内ではなく、スクリプト内で定義
 */
function init(){
  
  /* オブジェクト拡張方式 */
  var btn1 = document.getElementById('btn1');
  var btn2 = document.getElementById('btn2');
  
  //  ボタン要素をトグラブルオブジェクトに拡張する
  Object.mixin( btn1, TogglableElement.prototype );
  Object.mixin( btn2, TogglableElement.prototype );
  
  //  出力先を定義する
  btn1.resultTarget = document.getElementById('result1');
  btn2.resultTarget = document.getElementById('result2');
  
  /* クロージャ渡し方式 */
  document.getElementById('btn3').onmouseup = getToggleClosure( document.getElementById('result3') );
  document.getElementById('btn4').onmouseup = getToggleClosure( document.getElementById('result4') );
}

/**
 * トグル処理＆DOM操作のクロージャ関数を返す
 * １つの関数を各所で使い回せるようにクロージャ化する
 * @param target HTMLElement 内容を書き換えるHTML要素
 */
function getToggleClosure( target ){
  var flag = true;  // フラグ。レキシカルスコープ内に保持
  var target = target;  //  ターゲット。レキシカルスコープ内に保持
  return function(){
    flag = !flag;  //  フラグを逆転
    target.innerHTML = ( flag ) ? 'ON' : 'OFF'; // flag==trueならON
  };
}

/**
 * window.onloadにリスナーを貼る
 */
if( /msie/.test(navigator.userAgent.toLowerCase()) )
  window.attachEvent( 'onload', init );
else
  window.addEventListener( 'load', init, true );

さらに追求するなら・・

結果を表示する処理自体を、ロジックから分離できます。
こんな感じで、コールバック関数を引数で渡してレキシカルスコープ内に保持。Function.apply()で呼び出す。[ソースコードを表示する]

function getToggleClosure( target, callback ){
  var flag = true;
  var target = target;
  var callback = callback
  return function(){
    flag = !flag;  //  フラグを逆転
    callback.apply( this, [ target, flag ] );
  };
}

/**
 * init内。ボタン要素毎に違う出力処理をさせる
 */

//  ON of OFF表示
document.getElementById('btn3').onmouseup = getToggleClosure( document.getElementById('result3'),
  function( target, flag ){
    target.innerHTML = ( flag ) ? 'ON' : 'OFF';
  }
);

//  背景色を黒or白に変更
document.getElementById('btn4').onmouseup = getToggleClosure( document.getElementById('result4'),
  function( target, flag ){
    target.style.backgroundColor = ( flag ) ? '#000' : '#FFF';
  }
);

と書いているうちに・・・

実際に実装してみちゃいました。このページの「ソースコード」の開閉処理（→）がそうです。まさにトグるためのUI。[ソースコードを表示する]
トグル処理と表示処理が分離しました。

//  init内
/* ソースコードの表示トグル */
document.getElementById('viewsource-a').onclick = getToggleClosure2( document.getElementById('sourcecode-a'), viewSourceCode );
document.getElementById('viewsource-b').onclick = getToggleClosure2( document.getElementById('sourcecode-b'), viewSourceCode );
document.getElementById('viewsource-c').onclick = getToggleClosure2( document.getElementById('sourcecode-c'), viewSourceCode );

// おまけの関数定義
function getToggleClosure2( target, callback ){
  var flag = true;
  var target = target;
  var callback = callback
  return function(){
    flag = !flag;  //  フラグを逆転
    callback.apply( this, [ target, flag ] );
  };
}

function viewSourceCode( target, flag ){
  this.innerHTML = ( flag )? 'ソースコードを表示する' : 'ソースコードを隠す';
  target.style.display = ( flag )? 'none' : 'block';
}

終わりに

いきおいで作りはじめてしまいましたが、久々にソースコードを書いて楽しかったです。
ここ数年でJavaScriptは勉強する人が一気に増えておもしろくなってきました。
クラス定義もできない言語なんて・・と思っていたけれど、JavaScriptでオブジェクト指向してみると、実は他の言語にはないおもしろさがたくさんあります。
弊社もせっかく人が増えてきたのだから、たまに勉強会とかできるといいんですけどねぇ・・。

では・・enjoy your work!