Question

我正在研究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');
    });

Answer 1

只需使用 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>

Answer 2

为什么不在主页中获取这些文件？然后，您的子页面将可以访问它们。

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

或者我在这里遗漏了什么？

Answer 3

我认为你可能会倒退。在这种情况下，您通常希望让子页检查是否设置了某个变量，以查看它是否应该加载javascript文件。例如：您可以将子页面的就绪函数看起来像这样：

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

或类似的东西。

Answer 4

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

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

或类似的......

如何只添加一次javascript文件

4 个答案: