Zend Framework: aiming for MVC for Javascript, CSS

With a gradual study of the Zend Framework and building basic applications with it, I noticed that the client js code and inline styles fall into the view scripts, and they start to occupy almost half of the entire script. In principle, there is nothing bad about it, but such a trashcan began to put pressure on my eyes. In addition, inline js gradually turns into a structure rigidly tied to the view script, completely dependent on both the script itself and the data transmitted by the controller. With all this, does not leave the desire to write on javascript code as beautiful as possible with the help of the jQuery library.

So what can be done in this case. The very first thought is to render inline scripts and styles to external files and connect them via helpers like headLink and headStyle. If everything is approximately clear with styles - a specific enough style for a specific type is to be placed in the css file and connected as needed, then js is still dependent on the data.

As a first solution, we will write a plug-in to the frontController for connecting the necessary files as needed:
')

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 .

Do not forget to connect the plugin created in the Bootstrap class:

1. protected function _initFrontControllerPlugins ()
2. {
3. $ frontController = Zend_Controller_Front :: getInstance ();
4. $ frontController-> registerPlugin ( new My_Controller_Plugin_Webinit ());
5. }

* This source code was highlighted with Source Code Highlighter .

As already understood, used css and js files are placed in accordance with the complete analogy of the placement of view scripts. Only instead of / application / views / script / controllerName / actionName / the root directories for them will be public / css / and public / js /, respectively. To do this, we need to declare three constants in index.php:

1. defined ( 'APPLICATION_PUBLIC_FOLDER' )
2. || define ( 'APPLICATION_PUBLIC_FOLDER' ,
3. dirname (__ FILE__));
5. defined ( 'APPLICATION_CSS_FOLDER' )
6. || define ( 'APPLICATION_CSS_FOLDER' ,
7. realpath (APPLICATION_PUBLIC_FOLDER. '/ css' ));
9. defined ( 'APPLICATION_JS_FOLDER' )
10. || define ( 'APPLICATION_JS_FOLDER' ,
11. realpath (APPLICATION_PUBLIC_FOLDER. '/ js' ));

* This source code was highlighted with Source Code Highlighter .

The plugin allows you to connect the necessary files in our Layout with the following code:

1. <? if ($ this -> cssControllerAction) $ this -> headLink () -> appendStylesheet ( '/ css /' . $ this -> cssControllerAction)?>
3. <? if ($ this -> jsControllerAction) $ this -> headScript () -> appendFile ( '/ js /' . $ this -> jsControllerAction)?>

* This source code was highlighted with Source Code Highlighter .

Open the browser - the necessary files are connected.

The question remains with the javascript. We carried the code to an external file within the public directory. But there is a need, for example, to output a welcome text based on a dictionary with the alert () function. Naturally, Zend_Translate is used for translation, but again, what if all our data is available only in the view script?

For my own tasks, I considered the ideal solution to be the namespace organization. For example, for a translator within a single view script, we need a limited set of phrases. So we can organize the repository of these phrases and give them to the necessary handler at the js level.

This is how it happens.

In the main js-file of my project application.js, the global methods, objects and handlers are configured. Here you can add:

1. $ ( document ) .ready ( function () {
2. $ .TRANSLATION = {};
3. });

* This source code was highlighted with Source Code Highlighter .

The vault is organized, now you need to fill it.

To do this, in the view script, we need the following code:

1. <script type = "text / javascript" >
2. $ ( document ) .ready ( function () {
3. $ .data ($. TRANSLATION, "Nice to see you!" , '<? = $ this-> translate ("Nice to see you!")?>' );
4. </ script>

* This source code was highlighted with Source Code Highlighter .

To use data from the repository, we can call from any function that processes this part of the project, reach the repository and get the necessary data:

1. alert ($ .data ($. TRANSLATION, "Nice to see you!" ));

* This source code was highlighted with Source Code Highlighter .

So, we got the following picture: for the index controller, the index action there is a file in the public directory /js/index/index.js, which is a set of functions for work. At the same time, all the necessary data gets into the data storage directly in the view script, and the storage itself is declared globally for all view scripts in the main js-file of the application.

According to the MVC model. A little far-fetched, but still.

The controller (frontController) is the controller (response to the user), which organizes the connection, the layout script, and the application.js is the basis.

The model is a view script that accumulates data for the js storage.

The view is javascript plug-in code, which is fully responsible for the client presentation.

In the storage you can accumulate any data for further use.