Clever Geek Handbook

Zend Framework：MVC for Javascript、CSSを目指して

Zend Frameworkを徐々に研究し、それを使用して基本的なアプリケーションを構築すると、クライアントjsコードとインラインスタイルがビュースクリプトに分類され、スクリプト全体のほぼ半分を占めるようになることに気付きました。 原則として、これには何も問題はありませんが、そのようなゴミは私の目に圧力をかけ始めました。 さらに、インラインjsは次第に型スクリプトに固定された構造になりつつあり、スクリプト自体とコントローラーによって送信されるデータの両方に完全に依存しています。 これらすべてにより、jQueryライブラリを使用して、可能な限り美しいJavaScriptコードを記述する必要はありません。



したがって、この場合に何ができるか。 最初の考えは、インラインスクリプトとスタイルを外部ファイルに抽出し、headLink型とheadStyle型のヘルパーを介して接続することです。 スタイルがすべて明確な場合-特定のビューのかなり特定のスタイルをcssファイルに入れ、必要に応じて接続する必要がありますが、jsは依然としてデータに依存しています。



最初の解決策として、必要に応じて必要なファイルを接続するためのプラグインをfrontControllerに書き込みます。



class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  1. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  2. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  3. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  4. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  5. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  6. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  8. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  10. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  11. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  12. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  13. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  14. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  15. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  17. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  18. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  19. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  20. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  21. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  22. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  23. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



  24. class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .



class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract { public function preDispatch() { $controllerName = $ this ->_request->getControllerName(); $actionName = $ this ->_request->getActionName(); $view = Zend_Layout::getMvcInstance()->getView(); if ( file_exists(APPLICATION_CSS_FOLDER. '/' . $controllerName. '/' . $actionName. '.css' ) ) { $view->assign( 'cssControllerAction' ,$controllerName. '/' .$actionName. '.css' ); } if ( file_exists(APPLICATION_JS_FOLDER. '/' . $controllerName. '/' . $actionName. '.js' ) ) { $view->assign( 'jsControllerAction' , $controllerName. '/' .$actionName. '.js' ); } } } * This source code was highlighted with Source Code Highlighter .







Bootstrapクラスで作成したプラグインを接続することを忘れないでください：







  1. 保護された関数_initFrontControllerPlugins（）
  2. {
  3. $ frontController = Zend_Controller_Front :: getInstance（）;
  4. $ frontController-> registerPlugin（ new My_Controller_Plugin_Webinit（））;
  5. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




すでに明らかなように、使用されるcssファイルとjsファイルは、ビュースクリプトの配置の完全な類推に従って配置されます。 / application / views / script / controllerName / actionName /の代わりに、それらのルートディレクトリはそれぞれpublic / css /とpublic / js /になります。 これを行うには、index.phpで3つの定数を宣言します。







  1. 定義済み（ 'APPLICATION_PUBLIC_FOLDER' ）
  2. || 定義（ 'APPLICATION_PUBLIC_FOLDER' 、
  3. dirname（__ FILE__））;
  5. 定義済み（ 'APPLICATION_CSS_FOLDER' ）
  6. || 定義（ 'APPLICATION_CSS_FOLDER' 、
  7. realpath（APPLICATION_PUBLIC_FOLDER。 '/ css' ））;
  9. 定義済み（ 'APPLICATION_JS_FOLDER' ）
  10. || 定義（ 'APPLICATION_JS_FOLDER' 、
  11. realpath（APPLICATION_PUBLIC_FOLDER。 '/ js' ））;
*このソースコードは、 ソースコードハイライターで強調表示されました。




プラグインを使用すると、レイアウト内の必要なファイルを次のコードに接続できます。







  1. <？ if （$ this-> cssControllerAction）$ this-> headLink（）-> appendStylesheet（ '/ css /'。$ this-> cssControllerAction）？>
  3. <？ if （$ this-> jsControllerAction）$ this-> headScript（）-> appendFile（ '/ js /'。$ this-> jsControllerAction）？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


ブラウザを開きます-必要なファイルが接続されています。



質問はjavascriptに残っています。 コードをパブリックディレクトリ内の外部ファイルに移動しました。 ただし、たとえば、alert（）関数を使用して辞書に基づいてウェルカムテキストを表示する必要があります。 当然、Zend_Translateは翻訳に使用されますが、すべてのデータがビュースクリプトでのみ利用可能な場合はどうでしょうか？



私自身のタスクでは、名前空間の編成が理想的なソリューションであると考えました。 たとえば、単一のビュースクリプト内の翻訳者には、限られたフレーズセットが必要です。 したがって、これらのフレーズのリポジトリを整理し、jsレベルで必要なプロセッサに渡すことができます。



方法は次のとおりです。



application.jsプロジェクトのメインjsファイルで、グローバルメソッド、オブジェクト、およびハンドラーがセットアップされます。 ここで追加できます：







  1. $（ document ）.ready（ function （）{
  2. $ .TRANSLATION = {};
  3. }）;
*このソースコードは、 ソースコードハイライターで強調表示されました。




ストレージは整理されていますが、ここでそれを埋める必要があります。



これを行うには、ビュースクリプトで次のコードが必要です。







  1. <script type = "text / javascript" >
  2. $（ document ）.ready（ function （）{
  3. $ .data（$。TRANSLATION、 "Nice to see you！" 、 '<？= $ this-> translate（ "Nice to see you！"）？>' ）;
  4. </ script>
*このソースコードは、 ソースコードハイライターで強調表示されました。




リポジトリのデータを使用するには、プロジェクトのこの部分を処理する任意の関数から呼び出し、リポジトリにアクセスして必要なデータを取得します。







  1. alert（$ .data（$。TRANSLATION、 "はじめまして！" ））;
*このソースコードは、 ソースコードハイライターで強調表示されました。




そのため、次の図を取得しました。インデックスコントローラー、インデックスアクションについては、パブリックディレクトリ/js/index/index.jsにファイルがあり、これは機能するための一連の関数です。 この場合、必要なデータはすべてビュースクリプトで直接データウェアハウスに送られ、ストレージ自体はアプリケーションのメインjsファイル内のすべてのビュースクリプトに対してグローバルに宣言されます。



MVCモデルによる。 少し遠いが、まだ。



コントローラー（ユーザーへの反応）として、frontControllerへのプラグインがあります。このプラグインは、接続、レイアウトスクリプト、および基礎を構成します-application.js。



モデルは、jsストレージのデータを蓄積するビュースクリプトです。



ビューはjavascriptプラグインであり、クライアントビューを完全に担当します。



将来使用するために、ストレージに任意のデータを保存できます。


More articles:


All Articles