Javascript 文件依赖项 - 选择性加载资源文件并防止重复答案

【问题标题】：Javascript file dependencies - Selective load resource files & prevent duplicatesJavascript 文件依赖项 - 选择性加载资源文件并防止重复
【发布时间】：2009-11-24 18:20:17
【问题描述】：

这可能更像是一场哲学辩论，但这是我所拥有的：

两个控件共享一个 Javascript 资源库来调用 web 服务。
它们通常相互结合使用，但并非总是如此。
他们都引用的 javacsript 文件不容易分开。
不应将 javascript 文件添加到应用程序的每个页面。

理想情况下，我会在控件之间划分 web 服务，并让每个调用的 js 资源文件仅针对他们需要的功能。

我想知道我是否缺少明显更好的方法......

我有最简单的形式：

<html> 
<head>
</head>
<div>
    <h1>Control1</h1>
    <script type="text/javascript" src="/Webservice.asmx/js"></script>
</div>
<div>
    <h1>Other stuff</h1>
</div>
<div>
    <h1>Control2</h1>
    <script type="text/javascript" src="/Webservice.asmx/js"></script>
</div>
</body>
</html>

编辑
如果这提供了有用的方法，我可以使用 jQuery。

使用 ASP.NET

【问题讨论】：

您使用的是什么服务器端脚本？例如php、jsp等？

标签： asp.net javascript jquery ajax design-patterns

【解决方案1】：

使用以下 JS 和 jQuery 代码解决了我的问题

if (thisResourceLoaded === undefined) 
{ 
    $.getScript('/Webservice.asmx/js');
    var thisResourceLoaded = true; 
}

【讨论】：

就可以了。如果您不使用 jquery，我将建议 dojo.require。
我觉得简单地编辑它对我来说是不礼貌的，但是我相信对 undefined 的正确检查是使用 typeof 运算符if (typeof (thisResourceLoaded) === "undefined") { ..

【解决方案2】：

如果这些控件不需要在它们之间共享信息，您可以查看 jQuery 使用对象的方法，这可以确保如果您以不同的方式命名主对象，它将实例化（不确定该词是否存在）2 个变量引用同一个对象。

【讨论】：

【解决方案3】：

可能最简单的方法是在您使用一个或两个控件时包含整个 js 资源库一次。这应该由您的服务器端脚本（php 等）处理

将您的

例如：

<html> 
  <head>
     <script type="text/javascript" src="/Webservice.asmx/js" />
  </head>
  <body>

    <h1>Control1</h1>

    <h1>Control2</h1>

  </body>
</html>

从页面加载时间的角度来看，最佳的做法是制作三个版本的资源库。然而，这很可能是矫枉过正。

版本包含控件 A 所需的部分
版本包含控件 B 所需的部分
版本包含控件 A 和 B 所需的所有部分

然后您必须根据您使用的是控件 A、控件 B 还是两者都选择正确的版本。

【讨论】：