CakePHP：组织 JavaScript 的正确方法答案

【问题标题】：CakePHP: Correct way to organize JavaScriptCakePHP：组织 JavaScript 的正确方法
【发布时间】：2013-10-11 20:01:47
【问题描述】：

我正在构建一个 CakePHP 应用程序。代码结构合理，因此每个控制器都被视为自己的迷你应用程序。

我将 jQuery 用于我的所有 JavaScript 功能。

我的问题是：构建 JavaScript 以使只有需要它的页面才有它的正确方法是什么？

每个应用程序是否应该有单独的 js 文件。这样，App 1 的所有视图中都会包含 app1.js，App 2 将只有 app2.js，依此类推。然后我可以拥有一个具有所有通用功能的 main.js，它包含在所有页面中。

注意：我不想使用 JsHelper，也不想内联编写 JS。

【问题讨论】：

在视图文件中，如果你做 echo $this->Html->script('filename', array('block' => 'script'));并确保 echo $this->fetch('script');在您的布局中标记的某处，脚本标记将位于页面的头部。您还可以在 beforefilter 中编写一些内容，假设 javascript 文件根据控制器/操作组合命名，并自动将它们添加到页面中。

标签： javascript cakephp cakephp-2.3

【解决方案1】：

我建议你看看这个了不起的家伙写的Autoload Plugin...哎呀，我写的:)。

因此，使用它，您可以轻松地将您的 javascript 甚至 CSS 拆分到单独的目录中，并且您将在每个控制器上包含单独的文件。

如果您想跟上潮流 - 请使用 RequireJS，它使您能够模块化代码并仅包含您需要的部分。

虽然 Autoload 是我的创作，但我切换到了 RequireJS，我对结果非常满意。

我将用 RequireJS 解释我的方法。

您需要在布局的 head 部分中添加以下代码：

<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>

在布局的底部你需要包含requirejs文件：

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

第一部分只是检查文件夹中是否有该特定控制器和操作的文件，例如：

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

如果是这样，添加一个包含对该文件的引用的 var rPath。

这是我正在使用的 RequireJS 配置文件的示例：

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]);
}

最后，如果您的控制器 Posts 和您的操作写入需要一些 javascript，您需要在以下位置创建一个文件： /wwwroot/js/app/Posts/write.js 内容如下：

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
});

查看 RequireJS 文档了解更多信息。

希望对您有所帮助。

【讨论】：