hifive開発者ブログコンテンツへスキップFollow:RSSTwitterhifive開発者ブログWebクライアント開発プラットフォーム「hifive」の開発者ブログです。2017/07/18大きなシステムが機能やサービスごとに分割して開発されるように、フロントエンドにおいても一つのコントローラですべてを管理するのではなく、複数のコントローラに分けて実装する方が効率的です。今回はhifiveで複数のコントローラを分ける実装方法について紹介します。実装例はJSFiddleにあります。概要まず大事なのは全体を統括するコントローラの存在です。その中に個々の機能を実装するコントローラが複数存在します。全体を統括するコントローラは機能実装はせず、コントローラ同士をつなぐ役割に徹するのが良いでしょう。HTMLについてHTMLは次のようになります。JavaScriptについてJavaScriptの実装ですが、まず子コントローラを定義します。テキストが入力されたタイミングでイベントハンドリングを行うコントローラです。次に親コントローラから送られてきたメッセージを表示するコントローラです。最後にこの2つのコントローラをつなぐ親コントローラです。中で子コントローラごとにrootElementとして監視するDOMを指定しておくことです。実際の処理のハンドリングについては以下のように、まず子コントローラからトリガーを使って親コントローラへ通知します。いう定義を使って受け取ります。こちらでは子コントローラのメソッドを直接呼び出します。子コントローラで表示処理を行います。このように実装することでDOMごとにコントローラを分けて権限を管理しつつ、相互にメッセージのやり取りができるようになります。小さなWebアプリケーションであれば一つのコントローラで良いですが、ある程度大きくなるのが予想される場合はあらかじめコントローラ連携を念頭に作るのが良いでしょう。hifiveを参照してください。hifiveコメントは受け付けていません。Blog.%d人のブロガーが「いいね」をつけました。