CakePHP: Correct way to organize JavaScript

Question

I'm building a CakePHP application. The code is structured logically so that each controller is considered it's own mini application.

I'm using jQuery for all my JavaScript functionality.

My question is: what is the right way to structure the JavaScript so that only the pages that require it have it?

Should I have separate js files per app. That way App 1 will have app1.js included in all of it's views, App 2 will have only app2.js and so on. I can then have a main.js which has all general functionality, and it's included in all the pages.

Note: I'd prefer not to use the JsHelper and I don't want to write JS inline.

In the view file, if you do echo $this->Html->script('filename', array('block' => 'script')); and make sure that echo $this->fetch('script'); is in your layout somewhere in the <head> tag the script tag will be in the head of the page. You could also potentially write something in beforefilter that assumes the javascript files are named something based on the controller/action combination and automatically adds them to the page. — Kai
– Kai, Commented Oct 11, 2013 at 20:19

Nik Chankov · Accepted Answer · 2013-10-11 22:05:47Z

I would recommend you to take a look on this Autoload Plugin written by this marvelous guy ... oops, by me :).

So, using it you can easily split your javascript and even CSS into separate directories and you will have separate files included on each controller.

If you want to follow the trend - use RequireJS which give you ability to modularize your code and include only those pieces which you needed.

Although Autoload is my creation, I switched to RequireJS and I am quite happy with the results.

I will explain my approach with RequireJS.

What you need is the following code in the head section of your layout:

<script>
    <?php if(is_file(
      __DIR__.'/../../webroot/js/action/'.
      $this->request->params['controller'].'/'.
      $this->request->params['action'].'.js'
    )){ ?>
   var rPath = root+'js/app/action/<?php echo 
                $this->request->params['controller'].'/'.
                $this->request->params['action']; ?>';
    <?php } ?>
</script>

At the bottom of layout you need to include the requirejs file:

<script 
    data-main="<?php echo $this->Html->url('/'); ?>js/app" 
    src="<?php echo $this->Html->url('/'); ?>js/libs/requirejs.js">
</script>

The first piece just check if there is file for that specific controller and action in the folder like:

/wwwroot/js/actions/Posts/write.js

and if so, add a the var rPath which contain reference to that file.

Here is the example of RequireJS config file which I am using:

require.config({
    baseUrl: root+'js/',
    paths: {
        jquery         : 'libs/jquery.min',
        //...your convenient shortcuts
    }
});

//That's where the magic happen
if(typeof(rPath) !== 'undefined'){
    requirejs([rPath]);
}

Finally if you need some javascript in your controller Posts and your action write you need to create a file in: /wwwroot/js/app/Posts/write.js with the following content:

define([
    'jquery', //reference to jquery 
    'app/Posts/controller' //module which you wrote for controller specific functions.
    //other libs or modules if needed.
], function($){
     //your functions for wirite action
});

Take a look on RequireJS documentation for more information.

Hope that helps.

Collectives™ on Stack Overflow

CakePHP: Correct way to organize JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related