JSmartyのPlugin動作確認ページMVC版

JavaScriptでMVCなページをつくるにはどうしたらいいのだろうとあれこれ模索中なのですが一応それっぽいことが出来たので公開します。(JSmartyのPluginのオンラインデモなのでそうでもなくても公開してましたが…)VのエンジンはもちろんJSmarty利用です。方法論については後日に触れるとして、ハッシュの値によってページが切り替ります。JavaScriptオンリーです。

• plugin.html
• plugin.html#counter
• plugin.html#cycle

実装の解説

実装はどうしているかというと、まずコントローラの一部を以下のように実装。location.hashの値に応じて適したモデルを返す為の処理です。例えばlocation.hashの値が#fooだとModel.Fooを返してくれます。

var Record = {};
// ハッシュの値によって適切なモデルを動作させるコントローラ(の一部)
Record.HashRecord = function(hash)
{
    hash = hash.charAt(0).toUpperCase() + hash.slice(1);
    if(Model[hash]) return Model[hash];
    return function(){ return false; };
}

次にモデルに関しては以下のようにModelオブジェクトに色々と実装しています。こうすると各モデル名にアクセスしやすくなるからです。Modelで何やっているかは割愛。

var Model = {};
Model.Index = function()
{
   // 処理内容の記述(モデル)
}
Model.Foo = function()
{
   // Foo用のモデル
}

次はコントローラ関係の実装ですがJavaScriptだとマウスのクリックやキーボードが押されたとかでもイベント発生するのでコントローラとして成り立つんで一筋縄でいきません。今回は、<a>の要素にhref属性にあるハッシュの値で適切なModelを割り振ってます。どんなModelを割当てるかの処理は上述のRecored.HashRecordが行います(その1)。
続いてその2ではブラウザのブックマークやハイパーテキストリンク経由で訪れたときの為にlocation.hashの値を参照してModelを実行しています。

window.onload = function()
{
    var i, f, link, hash;
    var links = document.getElementsByTagName('a');

    // その1
    for(i=0,f=links.length;i<f;i++)
    {
        link = links[i];
        if((hash = link.href.indexOf('#')) > -1)
        {
             hash = link.href.slice(hash + 1);
             link.onclick = link.onkeypress = Record.HashRecord(hash);
        }
    };

    // その2
    hash = (location.hash) ? String(location.hash).slice(1) : 'index';
    Record.HashRecord(hash)();
}