Question

我和我的团队正在重建大型CakePHP 2应用程序的前端。除了新外观之外，主要目标是拥有更多可重用的SCSS / Javascript，在我们自己的前端代码和我们使用的第三方资产中拥有逻辑结构。

现在我们有1个CSS文件，我们在这里修补＆＃39;无论我们需要什么CSS到底部，不看其他我们可以重复使用的类，它没有结构。

大多数Javascript都是内联的＆＃39;进入视图，这意味着该视图的所有功能都可以在视图文件本身中找到，但除此之外，没有任何结构，没有任何内容可以重复使用，所有内容都必须重新制作或复制。我们确实有更多地方使用的功能，但所有这些功能都在1个文件中（你知道它是怎么回事，每页都包含general.js或common.js）。

问题

所以我的问题是，CakePHP应用程序中的Javascript和CSS / SCSS之类的结构或体系结构是什么。哪里可以开始？

我的想法

目前我们不使用CSS预处理器或前端包管理器（如bower）。预处理CSS（在我们的例子中是SCSS）绝对是我们要实现的，我将着眼于为项目使用bower，使我们更容易管理我们使用的第三方资产。

在Javascript方面，我想自动加载一个与CakePHP控制器同名的Javascript文件，如果存在，操作已经可以带来一些结构，但那些文件中的代码呢？它是否可以扩展一个＆＃39; master＆＃39; Javascript对象，所以它有很多现成的功能？那么每个页面上使用的常见脚本呢？我是单独使用单个实例的单独函数还是一个大对象，然后可以在所有页面上使用？

找到资源：

How to structure Javascript architecture to complement a PHP MVC web app? =＆gt;在这个问题中没有适用于我的真实答案

https://www.sitepoint.com/architecture-in-sass/ =＆gt;给了我一些关于如何构建SASS的见解。

JS MV *像https://angularjs.org/ =＆gt;这样的框架由于应用程序已经相当大，我们根本没有时间和资源来重建后端以支持像AngularJS这样的JS MVC框架。也许我需要阅读更多关于这些的内容，但是对于我的应用来说，它们似乎过于复杂。

Answer 1

这是我们在工作中使用的。似乎对我们很有效。

https://addyosmani.com/largescalejavascript/

Answer 2

诀窍是以某种方式调度当前页面所需的JS。让我给你一个我们所做的简化版本。

像这样创建一个JS文件（注意伪代码！）：

MyApp = {
    init: function(controller, action) {
        // Check here if MyApp.actions.<ControllerName>.<actionName> is set and call it.
    }
    actions: {
        ControllerName: {
            actionName: function() {
                // Any action specific code goes here
                $('foo').bar();
            }
        }
    }
}

这基本上是＆＃34;命名空间完成JS方式＆＃34;。您也可以为每个控制器/操作创建一个文件，只需将函数/对象添加到actions属性即可。这样你可以控制通常的JS混乱。我们将所有文件连接并缩小为我们在您的应用中加载的单个JS文件。为了构建和管理我们的前端资产，我们使用npm，bower和gulp。

在你的应用程序中，layout.ctp文件的JS部分称之为：

MyApp.init(\'' . $this->request->controller. '\',' . $this->request->action'\');

如果MyApp.actions中有匹配的对象，则会自动执行JS以执行您调用的任何控制器操作。你如何编写init方法取决于你。

有一件事你想要考虑：你不应该把大量的JS很少用到你的单个缩小的JS文件中。例如，我永远不会在该文件中包含像CkEditor这样的怪物脚本，除非它几乎会在应用程序的所有页面上使用。

MVC PHP应用程序的Javascript / CSS体系结构

问题

我的想法

找到资源：

2 个答案: