如何只添加一次javascript文件

我正在开发MVC应用程序。我有一个母版页，它调用外部javascript文件，有时子版页也调用javascript文件。我想，如果有一次它是由子页面或母版页添加的，它不应该再次添加该Javascript文件。请帮助我，我已经做了，但没有工作 在这里输入代码

    $(document).ready(function () {
        var fileref1 = document.createElement('script')
        fileref1.type = "text/javascript";
        fileref1.src = "~/Scripts/testZoomPlugin.js";
        fileref1.Id = "testZoomJS";
        if (typeof fileref1 == "undefined") {
            $.getScript('~/Scripts/testZoomPlugin.js');
        }
        fileref1.src = "~/Scripts/jquery.ui.widget.min.js";
        fileref1.Id = "testWidget";

        if (typeof fileref1 == "undefined") {
            $.getScript('~/Scripts/jquery.ui.widget.min.js');
        }
        fileref1.src = "~/Scripts/jquery.ui.slider.min.js";
        fileref1.Id = "testSlider";
        if (typeof fileref1 == "undefined"){
            $.getScript('~/Scripts/jquery.ui.slider.min.js');
        }
        if(typeof fileref1=="undefined"){
            $.getScript('~/Scripts/jquery.ui.slider.min.js');
    });

---

你为什么不把这些文件放在母版页上呢？然后，您的子页面将可以访问它们

我不确定做这些检查有多大价值，如果文件下载一次，它将不会在子页面上再次下载，因为它将存在于缓存中

---

还是我遗漏了什么？

我想你可能是在倒退。在这种情况下，您通常希望让子页面检查是否设置了某个变量，以查看是否应该加载javascript文件。例如：可以使子页面的ready函数如下所示：

$(function() {
  if( typeof $.fn.slider == 'undefined' )
    $('body').append('<script type="text/javascript" src="~/Scripts/jquery.ui.slider.min.js"></script>');
});

$（函数（）{
if（typeof$.fn.slider==“未定义”）
$（'body'）。追加（''）；
});

---

或者类似的东西。

您的模块加载函数应该缓存所有模块名称，以防止它们被调用两次。如果您当前的函数还没有这样做，那么制作一个包装器

var modules_loaded = {};
function caching_get_script(name){
    if(modules_loaded[name]) return;
    modules_loaded[name] = true;
    $.getScript(name)
}

---

或者类似的东西…

只需使用RequireJS，它可以满足您的需要，并且具有直截了当的语法，在您的情况下，它将是这样的：

<script src="~/Scripts/require.js"></script>
<script>
var modules = [], prefix = "~/Scripts/";
modules.push( prefix + "testZoomPlugin.js" );
modules.push( prefix + "jquery.ui.widget.min.js" );
    require( modules, function( someModule ) {
        //This function will be called when all the dependencies
        //listed above are loaded. Note that this function could
        //be called before the page is loaded.
        //This callback is optional.
    });
</script>

var modules=[]，prefix=“~/Scripts/”；
modules.push（前缀+testZoomPlugin.js）；
modules.push（前缀+jquery.ui.widget.min.js）；
要求（模块、功能（someModule）{
//当所有依赖项
//上面列出的已加载。请注意，此函数可能会
//在加载页面之前调用。
//此回调是可选的。
});

问题不在于下载。它还添加了一个新的脚本标记并执行了两次模块。如果你正在制作一个大型应用程序，模块也很重要（手动管理依赖关系可能是一个PITA），当然，在这种情况下，母版页将以与css相同的方式处理脚本需求？不一定。我使用的工具包Dojo允许您拥有用于快速开发的动态脚本标记，并且您可以稍后使用自动工具将它们合并到一个文件中进行生产。非常好…我们在Ext.js中使用这种逻辑。一旦它被部署并创建了一个文件，它只需要包含一次，所以我仍然不明白为什么要动态加载/卸载，然后必须潜在地重新加载东西，如果它们都是混搭在一起的话？这是为了避免在开发过程中单独的编译步骤。它还允许我在调试im时根据需要在控制台中提取额外的模块