问题 为什么用AJAX在视图中加载内联JavaScript?


我们有一个标签式界面,其中一个标签内有隐私表格。此隐私表单以及使用外部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的大型应用程序中的众多示例之一。

我应该说服后端开发人员我们应该使用回调,还是我错过了什么?


12970
2018-06-16 08:15


起源



答案:


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

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

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


5
2018-06-16 08:23



这是一个非常意想不到的答案,我觉得很棒。我会看看这本书。希望你不介意我将问题标题简化为更具技术性的重点。 +1 - Dr. Frankenstein


答案:


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

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

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


5
2018-06-16 08:23



这是一个非常意想不到的答案,我觉得很棒。我会看看这本书。希望你不介意我将问题标题简化为更具技术性的重点。 +1 - Dr. Frankenstein


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

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


5
2018-06-16 15:16





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

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

  1. HTML - 纯HTML用于构建您的信息。
  2. CSS - CSS用于为您的文档设置样式并进行布局。
  3. 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调用从服务器获取相同的数据。

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


1
2018-06-24 14:33



谢谢你,虽然我不确定这与我不了解的不明显的javascript有什么关系 - icant.co.uk/articles/seven-rules-of-unobtrusive-javascript。这个问题更多的是关于javascript中回调的重要性,如果我还没有完全正确地说它,那就道歉了。 - Dr. Frankenstein


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

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

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


0
2018-06-21 19:12



我已经更新了代码,以显示一些现实生活中的例子,欢呼声。 - Dr. Frankenstein
谢谢,但它没有让你更清楚为什么你需要AJAX调用。将动态数据传递给javascript的标准方法是在标题中设置一个javascript变量,然后您可以在其他地方引用它。你可以通过这种方式摆脱额外的HTTP请求和相关的延迟。如果您无法在页面加载时间计算出您需要的数据,则只需要一个AJAX调用。 - Tgr
我正在使用MVC,所以不幸的是,这不适用 - Dr. Frankenstein
我没看到这与MVC有什么关系。您有一些方法(MVC与否)将用户数据放入HTTP响应中。您可以选择将用户标识放入原始HTTP响应(页面的HTML代码)或后一个响应(AJAX结果的XML / JSON / whatnot代码)中。从结构的角度来看,这两种类型的响应操作是相同的;如果你可以使用MVC,你可以将它用于另一个。 - Tgr