デモ
リポジトリ

tl; dr

プラグインは、オブジェクトプロパティとURLの一部の同期を可能にします。

Matreshka.initRouter(object, '/a/b/c/'); object.a = 'foo'; object.b = 'bar'; object.c = 'baz' // location.hash  #!/foo/bar/baz/ 

location.hash代わりにHistory APIを使用するには、文字列"history" 2番目の引数"history"渡す必要があります。

 Matreshka.initRouter(object, '/a/b/c/', 'history'); 

CJSモジュールのインポート：

 const initRouter = require('matreshka-router'); initRouter(object, '/a/b/c/', 'history'); 

「従来の」ルーティングはどのように機能しますか？ 開発者はルール（ルート）を示し、URLが指定されたルールに一致した場合のアプリケーションの動作を説明します。

 route('books/:id', id => { //  - }); 

Matreshkaルーターの動作は異なります。 ライブラリは、パスの一部をオブジェクトのプロパティと同期します。

免責事項：このルーティング方法は、通常のルーターに通常設定されるすべてのタスクを網羅していない場合があります。 必要に応じて代替ソリューションを使用してください。

プラグインの原理は次のとおりです。URLのどの部分（ ハッシュとHTML5履歴の両方がサポートされる）がプロパティと同期されるかを指定します。

"x"プロパティをlocation.hashの最初の部分と同期させ、 "y"プロパティを2番目の部分と同期させたいとします。

 Matreshka.initRouter(object, "/x/y/"); 

今あなたが書くとき..

 object.x = 'foo'; object.y = 'bar'; 

...ハッシュは自動的に#!/foo/bar/変わり#!/foo/bar/

逆に、手動、プログラム、または「進む」と「戻る」矢印を使用してアドレスを変更すると、プロパティが自動的に変更されます。

 location.hash = '#!/baz/qux/'; // ...    console.log(object.x, object.y); // 'bar', 'qux' 

いつものように、プロパティはonメソッドを使用してリッスンできます。

 Matreshka.on(object, 'change:x', handler); //  ,   -  Matreshka: this.on('change:x', handler); 

URLの一部を無視するために、アスタリスク文字列をinitRouter関数に渡すinitRouterができます。

 Matreshka.initRouter(object, '/x/*/y'); 

ハッシュが#!/foo/bar/baz/ように見える場合、 object.xは"foo"にobject.y 、 object.y "baz"ます。

この機能は、一方のクラスがアドレスの一部を制御し、もう一方が他の部分を制御する場合に役立ちます。

class1.js

 Matreshka.initRouter(this, '/x/*/'); 

class2.js

 Matreshka.initRouter(this, '/*/y/'); 

次の2つのことを覚えておくことが重要です。

1.ルーターの初期化時にプロパティの値がtrueの場合、 initRouter直後にアドレスが変更さinitRouterます。 それ以外の場合、プロパティはパス部分の値を受け取ります。

 object.x = 'foo'; Matreshka.initRouter(object, '/x/y/'); 

2.ルートで指定されたプロパティがfalse値を受け取った場合、ルートで指定された後続のプロパティはすべてnull値を受け取ります。

 Matreshka.initRouter(object, '/x/y/z/u/'); object.y = null; //  object.z  object.u   null 

考えは、URLの状態とプロパティを適切に保つことです。 このプロパティに関連付けられたアドレスの欠落部分が欠落している"foo"条件で、値が"foo" "z"プロパティーを持つのは奇妙です。

HTML5 History API

ハッシュルーティングに加えて、プラグインはHTML5履歴を操作する機能をサポートします。 初期化のために、 "history"に等しい追加のtypeパラメーターをinitRouteメソッドに渡す必要があります（デフォルトでは、 type = "hash" ）。

 Matreshka.initRouter(object, '/x/y/z/', 'history'); 

追加情報

ルーターのコアは、 Matreshka.Routerクラスとして実装されます。 そのコンストラクターは、ルーターのタイプ("hash" 、 "history"または任意の文字列）の1つの引数を取ります。

ルーターが接続されると、 Matreshka.Routerクラスの2つのインスタンスが、それぞれMatreshka.Router.hashとMatreshka.Router.history保存されるhashとhistoryタイプで作成されます（遅延初期化が使用されるため、何もせずに接続します）。 これら2つのインスタンスに対して、シングルトンパターンが実装されます。つまり、 hashタイプを使用してルーターを作成すると、新しいインスタンスを作成する代わりにMatreshka.Router.hash返されます。 このロジックはURL処理を集中化し、パフォーマンスにプラスの影響を与え、衝突を引き起こしません。 次に、オブジェクトは単に変更をサブスクライブし、解析は行いません。

「カスタム」 Matreshka.Routerインスタンスは、さらに任意に使用するためにリンクを生成する必要がある場合に手動で作成できます。 この場合、プロパティの変更はhash影響せず、 pushState呼び出しません。

Routerクラスインスタンスには3つのプロパティがあります。

/foo/bar/baz/など、現在のURLを含むプロパティ。

hashPath - #!/foo/bar/baz/ように、hashbangが付加されたパスが書き込むプロパティ

parts - ['foo', 'bar', 'baz']など、パスの実際の断片を含む配列として表されるプロパティ。

3つのプロパティはすべてcalcメソッドを使用して宣言されているため、1つのプロパティが変更されると、他のプロパティも変更されます。

 Matreshka.Router.hash.path = '/yo/man/'; 

...および2つの方法

subscribe(object, route) -プロパティの変更のためにオブジェクトをサブスクライブします。

init() - subscribe呼び出すときに遅延初期化に使用されsubscribe （手動で呼び出す必要はありません）。

 const customRouter = new Matreshka.Router('myType'); const object = { a: 'foo', b: 'bar' }; customRouter.subscribe(object, '/a/b/'); console.log(customRouter.path); // /foo/bar/ 

CommonJSモジュールをインポートする

上記のすべては、非モジュラー環境に適用されます。 アプリケーションがCommonJS（NodeJS、Webpack、Rollup ...）に囲まれている場合、 matreshka-routerモジュールを接続しても、新しい静的プロパティはMatreshkaクラスに追加されません。 代わりに、 initRouter従来の方法でインポートされます。

 const initRouter = require('matreshka-router'); initRouter(object, '/x/y/'); 

次のようにRouterクラスをインポートできます。

 const Router = require('matreshka-router/router'); const customRouter = new Router('myType'); 

すべてに良い。