为什么用AJAX加载内联JavaScript内部视图很糟糕？

我们有一个选项卡式界面，其中一个选项卡内有一个隐私表单。此隐私表单，以及在其大部分工作中使用外部JavaScript文件，也使用内联JavaScript，因为它目前依赖于动态代码（服务器端语言）

formTabs包装器（不带回调函数的ajax选项卡）

。。。
var messagingTabset=ProjectName.Tabset.init({
“选项卡ID”：“首选项选项卡集”，
“ajaxUrl0”：“，
“ajaxUrl1”：“，
“ajaxUrl2”：“，
“ajaxUrl3”：“，
“ajaxUrl4”：“，
“ajaxUrl5”：“，
“defaultAjaxUrl”：”
});
...

privacyForm视图（更多带有服务器端代码的内联javascript）

。。。
var preferencesPrivacyForm=newprojectname.AJAX.Form({
“ajaxFormID”：“首选项隐私表”，
“actionUrl”：“”，
“dataReturnType”：“json”
});
...

后端开发人员：“此表单的配置JavaScript代码应保留在privacyForm视图中”

前端开发人员：“嗯，我确信我已经读到了，这不是实现这一点的方法-不可靠，所有JavaScript都应该在包含选项卡包装的HTML页面中，在选项卡加载的回调函数中。你真的应该a）为我提供逻辑，在标签包装器中获取动态数据，或者b）让我通过DOM遍历获取这些动态变量”

后端开发人员：“这两种方法都是大量的工作，没有真正的回报！第一个例子很糟糕，因为它意味着我必须改变它的构建方式（并且工作正常）。这可能意味着重复。第二个例子是不可靠的，因为标记可能会更改，因此处理代码的人可能会忘记在tabs包装器中编辑DOM遍历方法。这是我们不需要的另一个抽象层次。如果你能为我提供一些证据，说明为什么这真的很糟糕，我会查一查，但除此之外，我无法证明投入时间是合理的。”

前端开发人员：“好吧，我已经浪费了几天时间，通过将AJAX加载的JavaScript放在包装器的回调中来解决问题，但是现在你想想，关于这类事情的一个好的参考资料会非常好，因为你是对的，目前，应用程序运行没有任何问题女士’

这是整个大型应用程序中的许多示例之一，我们正在使用Ajax加载内联JavaScript

---

我应该说服后端开发人员我们应该使用回调，还是我遗漏了什么？我建议阅读戴尔·卡内基的《如何赢得朋友和影响他人》

开发人员似乎经常陷入这种情况，他们知道什么是最好的做法，但他们没有得到其他开发人员或管理层的认可

这本书绝对值得一读；绝对是这个行业的必读之作。

只要它有目的（例如，它从WordPress dashboard等其他网站加载内容），它就不是真正的“坏”，但是，除非你必须这样做，否则对服务器进行所有额外的调用都是浪费资源

---

通常，最简单的答案是最正确的答案。在这种情况下，这意味着不要增加所有额外的开销，以避免对后端进行轻微的重新编码。

从示例中不清楚为什么首先需要AJAX。为什么不把

<script type ="text/javascript">
    var userId = "<<<<= userId >>>>"
</script>

var userId=“”

---

直接进入HTML头部？这对用户来说更快，在服务器上更容易，并且您可以避免对失败请求进行计时和错误处理的所有痛苦。

这是为什么使用不引人注目的Javascript（UJS）的核心论点很好。我从未理解它的优点，因为我不知道如何在没有内联Javascript的情况下解决问题。我最终学会了

首先，UJS很好，因为它将前端代码分离如下：

HTML-纯HTML用于结构化信息

CSS-CSS用于为文档设置样式和布局

Javascript-Javascript用于定义页面的行为

为了使它们协同工作，HTML文件加载到外部CSS文件以定义样式，外部Javascript文件以定义行为。此外，您需要在HTML中使用众所周知的符号（如id、类名和标记）、CSS（id和类规则），以便您的Javascript可以根据实现行为来操纵结构、布局和样式

使用jQuery这样的Javascript框架，您可以将Javascript处理程序动态绑定到各种HTMLDOM对象上的事件，这样可以避免在HTML中内联执行

我使用过完全分离的代码（结构、样式/布局、行为），以及由HTML、CSS和Javascript组成的代码，包括使用ERB动态生成的HTML/JS代码。由于不同的原因，这两种代码都很难理解。第一种代码很难理解，因为我必须理解每个文件中的内容，而混合的代码很难理解，因为我必须找出作为JS，什么是HTML，什么是CSS，什么是在什么时候初始化的，什么是生成的。然而，一旦我走上学习的道路，开发清晰分离的代码的工作就更少了，也更容易测试

用于生成的Javascript（例如，使用ERB），您通常可以构造代码，其中静态javascript由某些特定于用户或特定于上下文的数据驱动。正如前面的人所建议的，您可以在HEAD部分中为该数据设置值，然后使用静态javascript文件。您还可以使用AJAX调用从服务器获取相同的数据

从短期业务角度来看，后端人员是正确的。如果它起作用，不要修复它。从中期角度来看，它会让您付出代价

...
<script type = "text/javascript">
    var preferencesPrivacyForm = new ProjectName.AJAX.Form({
        "ajaxFormID": "preferences-privacy-form",
        "actionUrl": '<%= Url.Action("SavePrivacy","Profile") %>',
        "dataReturnType":"json"
    });
</script>
...

<script type ="text/javascript">
    var userId = "<<<<= userId >>>>"
</script>