嵌入与包含用于 DOM 交互的 Javascript？答案

【问题标题】：Embedding vs. including Javascript for DOM interaction?嵌入与包含用于 DOM 交互的 Javascript？
【发布时间】：2012-03-01 05:53:58
【问题描述】：

每个 Javascript 初学者指南都谈到了嵌入式脚本的弊端。

我明白了：对于没有模块化设计概念的新手来说绝对是个好建议。但是每条规则都有一个例外，由于我在 Web 开发方面相当新（但不是一般的开发），我想问一下以下是否是一个很好的例外：

我正在使用 MVC 在服务器端（Django，作为记录）构建 Web 应用程序，并在客户端使用 Require.js 来管理应用程序逻辑脚本。我小心翼翼地让这些脚本与 DOM 无关。

将剩余的 DOM 交互代码直接嵌入到定义该 DOM 的服务器端 HTML 模板中对我来说是有意义的。创建单独的 JS 文件，这些文件是如此之小，并且与模板的内容紧密耦合，感觉没有必要。我错了吗？

假设您已将所有应用程序逻辑很好地隐藏在外部文件中，那么在 HTML 中偷偷添加几行 jQuery 以将该逻辑连接到 DOM 真的很糟糕吗？

【问题讨论】：

我很好奇 - 为什么最好让服务器生成所需文件的列表，然后将列表发送到客户端，然后运行脚本通过插入脚本元素来加载文件，而不是而不是让服务器使用列表（它生成的）来创建客户端然后用来加载脚本的标记？结果是相同的 - 从列表创建的一组脚本元素。我的偏好是让服务器在标记中执行此操作，因为它可能更有效。
主要用于缓存目的。随着时间的推移，我可以看到该站点包含更多由 AJAX 提供的内容。在处理这些请求时，我不希望服务器发送多余的脚本标记，也不希望它自己知道客户端已经加载了哪些脚本。对于初次访问者来说，这可能是一个缺点，但随后的缓存速度（加上易于开发）在我的书中弥补了这一点。
两种方法的缓存完全相同。将脚本元素放在 HTML 中更有效，并且适用于所有发布过的浏览器。通过脚本插入它们会引入根本不需要承担的风险并且提供零收益。
好吧，如果有很多 AJAX 响应，并且服务器不能假设客户端已经执行了哪些脚本，那不会导致很多已经执行的脚本元素被在客户端上冗余运行（例如函数定义）？我更喜欢语言处理复杂的包含语句（即缓存依赖项）的环境，而 RequireJS 给了我这样的环境。因为它可以追溯到 IE6，所以我并不十分关心兼容性。

【解决方案1】：

如果您的 JS 仅适用于一个页面并且数量不多，那么可以，我会将其直接放在页面中，而不是作为单独的 JS 包含。

如果您有很多 JS 仅适用于一个页面，那么单独的 JS 包含给您的优势是（在第一次请求之后）它将位于浏览器缓存中而不是被下载每次用户刷新该页面时。所以在那种情况下，我可能会坚持使用外部 JS 文件。

决定在特定的 html 页面中包含 JS，我更喜欢将其全部包含在头部或正文末尾的单个块中 - 我不想扫描 html寻找隐藏在标记中的多个小脚本块。此外，如果我后来决定将脚本移动到外部文件中，这样做也很容易。

【讨论】：

我应该说，许多这些嵌入式块将存在于“内部模板”中，页面级模板将包括服务器端。所以在一个特定的模板文件中，是的，嵌入的 JS 将在一个块中，但完全呈现的页面将包含多个脚本块。我真的不认为这是出于开发目的而考虑的问题，但我想明确解释我的情况。
嗯，我说的是“我更喜欢......一个单一的块”，而不是“我会坚持一个单一的块” - 实际上你必须对此应用一些常识并做适合的事情你的情况。在我看来，有些人将整个“关注点分离”的事情方式走得太远了，以至于他们的目标是实现特定的“理想”设计模式，而不是实现实际做的事情用户需要。

【解决方案2】：

看来 DOM 模板可能是未来。并且在调试方面更好地处理我的想法。

【讨论】：