JavaScriptでMVC実装してみた - ジンジャー研究室

MVC

JavaScriptのMVC フレームワークAngular.jsを触っていてスゲー！って思ったので、それっぽいものを実装してみました。（※これは独自実装でAngular.jsではないです）
Modelを1秒毎に「Hoge」「Homu」に切り替え、Viewがそれにリンクします。

<html>
  <head>
    <script>
      
      var M = {};
      
      var C = (function(){
        var V = function(render){
          this.render = render;
        };
        var _C = function(){
          this.views = [];
        };
        _C.prototype.createView = function(f){
          this.views.push(new V(f));
        };
        _C.prototype.act = function(f){
          f(M);//Modelを更新する処理を走らせた後
          for(var i in this.views){
            this.views[i].render(M);//Viewに反映する
          }
        };
        return new _C();
      })();
      //ここまでフレームワーク
      
      //ここから実装
      var view1 = C.createView(function(M){
        //変数hogeを表示する
        document.getElementById("view1").innerHTML = M.hoge;
      });
      //１秒毎にhogeの値を"HOGE"と"HOMU"を切り替える
      var doLoop = function(){
        setTimeout(function(){
          C.act(function(M){
            if(M.hoge == "HOGE"){
              M.hoge = "HOMU";
            }else{
              M.hoge = "HOGE";
            }
          });
          doLoop();
        }, 1000);
      };
      doLoop();
    </script>
    
  </head>
  
  <body>
    <div id="view1"></div>
  </body>

</html>

テンプレートはまだなくて、イベントの扱いも未定です。