Question

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

formTabs包装器（没有回调函数的ajax选项卡）

...
<script type ="text/javascript">
    var messagingTabset = ProjectName.Tabset.init({
        'tabID': 'preferences-tabset',
        'ajaxUrl0': '<%=Url.Action("PreferencesMainForm", "Profile")%>',
        'ajaxUrl1': '<%=Url.Action("ProfileImageForm", "Profile")%>',
        'ajaxUrl2': '<%=Url.Action("InterestsForm", "Profile")%>',
        'ajaxUrl3': '<%=Url.Action("PrivacyForm", "Profile")%>',
        'ajaxUrl4': '<%=Url.Action("PasswordForm", "Profile")%>',
        'ajaxUrl5': '<%=Url.Action("CustomUrlForm", "Profile", new {userId = Model.UserId})%>',
        'defaultAjaxUrl': '<%=Url.Action(Model.PartialName, "Profile")%>'
    });
</script>
...

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

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

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

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

后端开发人员：“这两种方法都有很多工作没有真正的回报！第一个例子很糟糕，因为这意味着我将不得不改变它的构建方式（这可能意味着重复。第二个例子是狡猾的，因为标记可能会改变，因此有人在编写代码时可能会忘记在tabs-wrapper中编辑DOM遍历方法。这是另一个抽象层次，我们不需要。如果你向我提供一些关于为什么这真的非常糟糕的证据，我会检查出来，但除此之外我无法证明把时间放在“

前端开发人员：'好吧，我已经浪费了几天时间，通过将它们放入封装器的回调来解决AJAX加载JavaScript的问题，但是现在你想想它，对这类事情的良好参考将是非常好的，因为你是对的，目前，应用程序运行没有任何问题。'

这是我们使用Ajax加载内联JavaScript的大型应用程序中的众多示例之一。

我是否应该让后端开发人员相信我们应该使用回调，或者我错过了什么？

Answer 1

我建议阅读Dale Carnegie的“如何赢得朋友和影响人们”。

开发人员似乎经常陷入这种情况，他们知道什么是最好的事情，但他们不会从其他开发人员或管理层那里购买。

这本书绝对值得一读;绝对必须阅读这个职业。

Answer 2

只要它有用（例如，它加载来自WordPress仪表板等其他网站的内容），它并不是真正的“坏”，但是对服务器进行所有额外调用是浪费资源，除非你绝对必须这样做。

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

Answer 3

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

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

HTML - 纯HTML用于构建您的信息。
CSS - CSS用于设置文档的样式并进行布局。
Javascript - Javascript用于定义页面的行为。

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

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

我使用的是完全分离的代码（结构，样式/布局，行为），以及HTML，CSS和Javascript的早餐代码，包括使用ERB动态生成的HTML / JS代码。由于不同的原因，两者都难以理解。第一个很难，因为我必须了解每个文件中的内容，而混合代码很难理解，因为我必须弄清楚什么是JS，什么是HTML，什么是CSS，什么是初始化，什么是什么生成了。但是，一旦我学习了学习曲线，那么改进干净利落的代码就会减少工作量并且更容易测试。

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

从短期业务角度来看，后端人才是对的。如果有效，请不要修复它。从中期来看，如果你没有用UJS干净地分离你的HTML，CSS和Javascript，那么你的团队会花费更多的时间来改进和维护你的代码。从您的业务角度来看，维护和发展代码将是一件痛苦的事情。从后端人员的业务角度来看，如果他做的不是今天的工作，那将会花费更多。即，您的团队领导和架构师需要平衡各种业务视角，以确定构建代码的方式。

Answer 4

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

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

直接进入HTML头？它对用户来说更快，在服务器上更容易，并且可以避免因失败请求的时间和错误处理而产生的各种麻烦。

为什么用AJAX在视图中加载内联JavaScript？

formTabs包装器（没有回调函数的ajax选项卡）

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

4 个答案: