Jii：ブラウザにYii2アーキテクチャを備えた本格的なアプリケーション

YiiとNode.jsのファンであるすべてのKhabrovitesにこんにちは。 Jiiに関する一連の記事を続けていますが、今度はブラウザでJiiを使用できることについて説明します。


アプリケーション 、 コンポーネント 、 コントローラー 、 モジュール 、モデル、ビューなどのすべてのフレームワーク構造がブラウザーで使用できるようになったと想像してください！

このフレームワークについて初めて耳にする人には、 以前の記事を読むか、サイトにアクセスすることをお勧めします 。 要するに、

Jiiは、アーキテクチャとAPIがYii 2.0 PHPフレームワークに基づいているフレームワークであり、それを最大限に活用し、JavaScriptの利点を保持しています。

クライアント上のJii（ブラウザー内）

Jiiはもともと、JavaScriptコードを実行できる場所であればどこでも使用できるように作成されています。 モジュールコードがサーバーインフラストラクチャに関連付けられていない場合は、ブラウザーで使用できます。

これはすべて壊れており、npmモジュールの一部で接続されています：

• jii （またはjii / deps ）-基本クラスとフレームワークフレームワーク。
• jii-clientrouter-アドレスバーが変更されたときにアクションをトリガーするルーター。 jii-urlmanagerと連携して動作します。
• jii-comet-彗星クライアント;
• jii-model-バリデーターのセットを持つモデル（ルール（）で指定）;
• jii-urlmanager -URLを解析し、指定されたルールに基づいてルートを取得します。
• jii-view-ビューをレンダリングします。

クライアントでアプリケーションを作成する

アプリケーションは、サーバーとほぼ同じように作成されます。

// Libs require('jii/deps'); // included underscore and underscore.string libraries require('jii-urlmanager'); require('jii-clientrouter'); // Application require('./controllers/SiteController'); Jii.createWebApplication({ application: { basePath: location.href, components: { urlManager: { className: 'Jii.urlManager.UrlManager', rules: { '': 'site/index' } }, router: { className: 'Jii.clientRouter.Router' } } } }).start(); console.log('Index page url: ' + Jii.app.urlManager.createUrl('site/index')); 

依存関係

JiiはUnderscoreおよびUnderscore.stringライブラリに依存しています。 それらが既にページに接続されている場合、依存関係が必要な場合はrequire（ 'jii / deps'）としてJiiをrequire（ ' jii '）として接続する必要があります。

JavaScriptのコンパイル

Jiiでは、依存関係の読み込みにCommonJSアプローチを使用することをお勧めします。 モジュールのアセンブリは、たとえばBrowserifyを使用するなど、あらゆる手段で実行できます。 最も単純なアセンブリの例を考えてみましょう。
依存関係のインストール：

 npm install --save-dev gulp gulp-easy 

Gulpfile.jsファイル：

 require('gulp-easy')(require('gulp')) .js('sources/index.js', 'bundle.js') 

クライアントルーティング

ブラウザのアドレスバーの状態を監視および処理する必要がある場合、 jii-clientrouterモジュールはこの目的のために特別に設計された戦いに入ります。
Jii-clientrouterは、 アプリケーションコンポーネントとしてインストールされ、 popstateイベント（またはHTML5 History APIをサポートしないブラウザーのハッシュ 変更）にサブスクライブします。

ページが読み込まれるか、アドレスバーが変更されると、 Jii.urlManager.UrlManagerコンポーネントを使用してアドレスバーを解析し、リクエストパラメーターを含むルートを受け取り、見つかったルートに相当するアクションを起動するハンドラーが起動します。 したがって、Jii-clientrouterが機能するには、jii-urlmanagerも接続する必要があります。

アプリケーション構成の例：

 require('jii/deps'); require('jii-urlmanager'); require('jii-clientrouter'); // Application window.app = Jii.namespace('app'); require('./controllers/SiteController'); Jii.createWebApplication({ application: { basePath: location.href, components: { urlManager: { className: 'Jii.urlManager.UrlManager', rules: { '': 'site/index', 'article/<id>': 'site/article', } }, router: { className: 'Jii.clientRouter.Router' }, // ... } } }).start(); 

アクションでは、 リクエスト（Jii.clientRouter.Request）およびレスポンス（Jii.clientRouter.Response）コンポーネントが利用可能になります。これは、HTTPサーバーを備えたサーバーで作業しているときと同じです。 これらのコンポーネントを使用すると、アドレスバーからパラメーターを取得できます。 そのようなアクションの小さな例を考えてみましょう。

アドレスlocalhostを含むアドレスバーがあるとします：3000 / article / new-features 、指定されたアドレスに移動すると、クライアントはJii.clientRouter.Router._onRoute（）ハンドラーを起動し、 サイト/記事ルーターを見つけてアクション（メソッド） app.controllers.SiteControllerコントローラーのactionArticle（） ：

 /** * @class app.controllers.SiteController * @extends Jii.base.Controller */ Jii.defineClass('app.controllers.SiteController', /** @lends app.controllers.SiteController.prototype */{ __extends: Jii.base.Controller, // ... actionArticle: function(context) { console.log(context.request.getQueryParams()); // {id: 'new-features'} } }); 

デモ

ブラウザでJiiを使用する例は、Githubのプリミティブチャットのソースコードjiisoft / jii-boilerplate-chatで表示できます。

これらのプラクティスはまだ形成されていないため、Jiiを使用するための「ベストプラクティス」としてこの例を取り上げるべきではありません。 クライアントでのコードの設計と構造に関する推奨事項を聞いてうれしいです。

結論として

Jiiはオープンソースプロジェクトであることを思い出させてください。だから誰かがその開発に参加してくれたらとても嬉しいです。 affka@affka.ruに書き込みます。

フレームワークサイト-jiiframework.ru
GitHub- https://github.com/jiisoft
機能の議論はgithubで行われます

フレームワークのアイデアが好きですか？ githubに 星をつけてください！