在哪里放javascript以及如何处理事件

Question

很长一段时间以来，我一直在寻找一种实用（可重复使用，清晰，可更新......）的解决方案：

• 我开发了自己的PHP框架，它使用'小部件' - UI的可重用部分。可以通过ajax请求更新小部件。
• 每个小部件都是一个简单的PHP类，其方法名为Content（），用于生成HTML输出。
• 几乎所有小部件都包含JavaScript。它用于处理该特定小部件中的事件。

虽然一切正常但我对JS的使用方式并不满意。以下是一些主要问题：

• 使用Ajax刷新窗口小部件时，所有窗口小部件数据（HTML）与所有Javascript（BAD）一起传输到客户端（OK）（但在99％的情况下JS不会更改）
• 最终的HTML标记与javascript调用和事件处理程序混合在一起。
• 很难管理所有嵌入式JS
• JS无法通过浏览器以这种方式缓存

我想问你的是你在更大的php框架中使用Javascript的意见/建议。

最近我在考虑在widget类中编写一个单独的方法（比如函数Script（）），我将把所有的JS代码放到其中，然后遍历所有的小部件，获取所有的JS代码并将其放入一个.js文件将被使用，直到其中一个小部件发生更改。您如何看待这种方法？

谢谢！

Answer 1

我会将不同小部件使用的javascript文件放在不同的地图中并静态加载（必须更快，加上自动浏览器缓存，如果你有正确的设置）。

然后，根据框架的动态程度，我会制作某种loader-javascript，它会自动获取并加载当前在页面上加载的小部件所需的那些JS文件。所有你必须在脚本中打印的可能是某种require_js_file函数，它会告诉加载器这个小部件使用哪个javascript，加载器会获取它，但只有当它还没有被加载时（例如，如果这样）不是小部件的第一次运行。）

Answer 2

您要完成的任务与我使用Agile Toolkit时面临的问题相同。

http://agiletoolkit.org/intro/javascript - 向下滚动到通过AJAX请求加载表单/网格的示例。它完全符合您的要求 - 将一个小部件与JavaScript一起加载并仅执行必要的操作。

我遇到的困难是：   - 加载和执行javascript。我必须编写自己使用的处理程序。它建立在$ .ajax之上。在此层中处理会话到期，多次用户点击，缓慢加载等事情。   - Framework需要控制JavaScript。为此，我使用jQuery链。它基本上创建了一个可以附加到任何Widget（或我们的术语中的视图）的对象，并且只有在Widget也在渲染时才会在输出中显示。当您进行部分重新加载时，您应该只显示相关的JS。

因此，您的Script方法与我拥有的js（）函数完全相同： https://github.com/atk4/atk4/blob/master/lib/AbstractView.php#L250

我的观点当然是以这种方式抽象视图并分离JavaScript是一个很好的方法。我在富网站上看到了很多AJAX故障，例如在Amazon EC控制台，Github等等，而且我们在Agile Toolkit中构建的软件都没有发生过这些故障。即使在开发过程中，所有javascript都表现得非常合理且可预测。

我们完全用AJAX构建在线完整会计软件。人们在没有单页刷新的情况下使用它几个小时。许多jQuery插件必须转换为WidgetFactory才能正确销毁自己。开发这样的软件简直太棒了。