javascript - CakePHP:组织 JavaScript 的正确方法

Question

我正在构建一个 CakePHP 应用程序。该代码的结构符合逻辑，因此每个 Controller 都被视为自己的迷你应用程序。

我使用 jQuery 来实现所有 JavaScript 功能。

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

我应该为每个应用程序提供单独的 js 文件吗？这样，应用程序 1 将在其所有 View 中包含 app1.js，应用程序 2 将仅包含 app2.js，依此类推。然后我可以拥有一个具有所有常规功能的 main.js，并且它包含在所有页面中。

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

Answer 1

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

因此，使用它您可以轻松地将 JavaScript 甚至 CSS 拆分到单独的目录中，并且每个 Controller 上都会包含单独的文件。

如果你想追随潮流 - 使用 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>

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

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

最后，如果您需要在 Controller 帖子中使用一些 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 文档以获取更多信息。

希望有帮助。