Jamal - JavaScriptのMVCフレームワーク http://www.ark-web.jp/sandbox/wiki/218.html

[edit]

Jamal - JavaScriptのMVCフレームワーク

dev.Floriansweb > Blog Archive > Javascript MVC Framework with Google Gears ORM
http://dev.floriansweb.com/?p=34

[edit]

以下超約

[edit]

って、これ凄いんじゃないですか?!

[edit]

とりあえずGearsの前に、付属のDEMOを解析してみる

DEMO
http://okra.ark-web.jp/~shida/sandbox/jamal/demo/

[edit]

ディレクトリ構造

[edit]

呼ばれる順番

  1. index.html
    ブラウザに読み込まれて、各種scriptがロードされる
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jamal_packed.js"></script>
    <script type="text/javascript" src="js/app_model.js"></script>
    <script type="text/javascript" src="js/app_view.js"></script>
    <script type="text/javascript" src="js/app_controller.js"></script>
    <script type="text/javascript" src="js/models/foo.js"></script>
    <script type="text/javascript" src="js/views/foos.js"></script>
    <script type="text/javascript" src="js/controllers/bars_controller.js"></script>
    <script type="text/javascript" src="js/controllers/foos_controller.js"></script>
    • jamal_packed.jsは、jamal.jscontroller.js, model.js, view.js, metadata.js, startup.jsをくっつけて難読化したものっぽいです。おそらく。
    • app_model.js, app_view.js, app_controller.jsは、Railsでいうところの、application.rbとか、application_helper.rbとかに当たるものですかね。
    • models/foo.js, views/foos.js, congtrollers/controllers.jsなどは自分で作るものです。
  2. jamal.configure(); (jamal.js line: 298)
    初期化に当たるものらしい。bodyのclass属性
    <body class="jamal {controller:'Foos',action:'index',debug:true}">
    が読み込まれて、実行されるべき、ControllerとActionが設定されるみたい。
  3. jamal.start(); (jamal.js line: 181)
    load()を読み込み、その結果、エラーがあればエラー処理する、見たいな感じか。
  4. jamal.load(); (jamal.js line: 330)
    上記、<body>タグで、指定されたcontrollerのactionメソッドの呼び出し。componentも追加呼び出しできるみたい。
  5. FoosController.index(); (foos_controller.js line: 39)
    <a>タグのonclickが呼ばれたら、ViewのshowMoreContentを呼ぶように設定
    index: function() {
        $('a').click(function(){
            $j.v.Foos.showMoreContent($(this).parent());
        });
    }
    Viewはフレームワークが勝手に呼ぶのではなくて、Controllerが自分で呼ぶみたい。
  6. FoosView.showMoreContent(); (foos_controller.js line: 33)
    ここに、実際のDOM操作などを書く、と。
    showMoreContent: function(obj){
        $(obj).find('a').remove();
        var content = $(obj).html();
        $(obj).html(content+content+content);
    }
[edit]

ControllerがModelを生成してViewに渡す例

[edit]

感想

投稿者志田 | パーマリンク

| append.gif

tag: JavaScript, Jamal


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-07-11 (水) 19:28:13 (4453d)

アークウェブのサービスやソリューションはこちら