デモ

リポジトリ

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');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてに良い。