機能の一部だけを使えるJavaScriptフレームワークを作る

JavaScriptフレームワーク自作の試み

SPAと一部の入力バリデーション機能を作りました
名前を fframe とし github でプロジェクトを公開ています https://github.com/ikuo0/00013-fframe
変数名は ff です、fframeの機能を使う際は ff.ApplyRouter("./source", $("body"), {"ajax-cache": false}); のように変数 ffからアクセスします。

動作例

自作する理由とか

フォーム全体を包括するのではなくピンポイントで使いたい所にだけ機能を提供するフレームワークが欲しいと思って自作することにしました
とりあえず今回使いたかった機能はSPAとバリデーション機能なのでその2つだけです。
HTMLテンプレートに関してはスタイルシートで display: none; としてテンプレートを作成する昔ながらの手法？で充分だと思っていますので作る必要は無いと考えています

ソース本体

https://github.com/ikuo0/00013-fframe/blob/master/js/fframe.js
これをコピペして読み込んで下さい、JQuery必須です。

SPAの使い方（router機能？の使い方）

index.htmlへの記述

        <script type="text/javascript">
            delay(1) // bodyの描画完了を待つ // delay はfframe.js 内で宣言されている関数です
            .then(function() {
                // HTML, JSファイルのディレクトリを指定、SPAする要素を指定、キャッシュを使うかどうかの指定
                ff.ApplyRouter("./source", $("body"), {"ajax-cache": false});
                return true;
            })
            .then(function() {
                // 初回アクセス等、ハッシュ指定が無い場合の対処
                if(!ff.PathInfo.pageKey) {// ff.PathInfoにURL、ハッシュ等の情報がまとめられている
                    window.location = "#!input-form";
                }
                return true;
            });
        </script>

ハッシュ名＝ファイル名という規則

例えば以下の場合

https://????.com/index.html#!hoge

hoge.html hoge.js の順番にファイルを読み込み body タグの中身を hoge.html に置き換えます、プログラム的にファイルの有無チェックや整合性を取る事はできないため事前にファイル名を合わせて準備しておく必要があります。
この場合は hoge.html hoge.js の２ファイルを予め作っておく必要があります。

JSファイルで関数を即時呼び出す実装とする

hoge.js の実装は以下のように作成し、JSファイル読み込みと同時に実行されるように仕込みます。

// hoge.js の実装
// 日本語
(new function() {
    console.log("start");
    var self = this;
    self.start = function() {
        console.log("a#start");
        var me = this;
        // 処理
    }
    self.start();
}());

routerの起動
https://github.com/ikuo0/00013-fframe/blob/master/index.html

router対応のJSファイルの書き方
https://github.com/ikuo0/00013-fframe/blob/master/source/a.js

変数同期、自動バリデーションの使い方

HTML

<input id="input-text" type="text">

Javascript

var obj = {
    "OnChange": function(id, val) {
        var obj = this;
        print("obj[" + id + "]=" + obj[id] + "");
    }
};
ff.AddSyncroAndValid_Text(obj, "#input-text", {"value": "HOGE", "min": 3, "max": 15});

フォーム例
https://github.com/ikuo0/00013-fframe/blob/master/source/input-form.html

フォームに変数同期とバリデーションを追加する例
https://github.com/ikuo0/00013-fframe/blob/master/source/input-form.js

以上です