从一个.js文件中调用另一个.js文件中的函数时出现命名空间问题

Namespace issue when calling function in one .js file from another .js file

本文关键字：文件 js 函数 问题 命名空间 另一个 一个 调用      更新时间：2023-09-26

为了尝试为许多图像制作可滑动的幻灯片，我正在尝试将两个插件拼接在一起，滑动.js和lazyloader.js。我想让滑动插件中的幻灯片计时器事件调用 Lazyloader 内部的更新函数。从研究来看，似乎我的问题似乎是命名空间之一;也就是说，Swipe不知道Lazyloader内部的东西，因此无法调用该函数。

  1. 给定以下代码，我是否正确理解了我的问题？
  2. 如果是这样，我怎样才能让滑动来访问懒惰加载器的功能？

谢谢。

跟进：在与Cheeso的问答之后，我现在看到我问了错误的问题，关于我最终需要发生的事情。我添加此评论是为了避免任何未来的读者因为我的坏问题而感到困惑。这与命名空间无关，甚至与访问私有函数无关，这不应该这样做。这个线程显然是关于如果你真的不知道你在做什么，那么尝试和弗兰肯斯坦图书馆在一起是多么不可取。 ;)结束跟进

滑动.js中的回调：

this.callback = this.options.callback || function() {

在 HTML 中调用的脚本：

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script src='js/swipe.js' type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {

    function myAlert(){
        //call a function from inside jquery.lazyload.js
        alertMe();
    }
    //instantiate a swipe object and pass in a bunch of 
    //options, especially "callback" which fires on every slide change
    window.mySwipe = new Swipe(document.getElementById('slider1'), {
        startSlide: 0,
        speed: 1000,
        auto: 5000,
        callback: function(){
            myAlert();
        }
    });
    // run lazyload on every VISIBLE image with the class "lazy" on load, and on every click
    $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});
    }); 
</script>

jquery.lazyloader.js：

 //outside of the container below, I can be called by myAlert()
 function alertMe() {
        alert("it worked!");
    }

(function($, window) {
    $window = $(window);
    $.fn.lazyload = function(options) {
    ///
    ///Here be a bunch of lazyloader stuff
    ///
    //I work when above, but once I am inside this container, I cannot be called by myAlert(), 
    //and I will error as 'not a valid function'
    function alertMe() {
        alert("it worked! Even inside of this container! ");
    }

})(jQuery, window);

可以这么简单：在 Swipe 实例上设置 callback 选项以指向执行 LazyLoader 操作的函数。这只是一个猜测，因为我不知道滑动，但我查看了代码转储并看到了那个回调函数; 它似乎是滑动扩展的关键点。

如果我是对的，那么这根本不是命名空间问题。正如你所说 - 将不同的库或模块编织在一起。 通常，js 模块将具有一两个允许此操作的扩展点。 我猜Swipe的扩展点是该回调。

也许是这样的： 

function myFn() {
  // do whatever lazyload thing you want to do, here. 
}
$(document).ready(function() { 
    var slider1 = new Swipe(document.getElementById('slider1'),
                            {startSlide: 0,
                             speed: 1000,
                             auto: 10000,
                             callback:myFn}); 
    $("img.lazy").lazyload({event: "click"}); 
});

您可能需要重构以使slider1或其他一些变量全局化，以便可以在 doc.ready 函数外部访问它们。

随访

你有这个：

<script type="text/javascript">
    $(document).ready(function() {   
        function myAlert(){   
            //call a function from inside jquery.lazyload.js   
            alertMe();   
        }   
        //instantiate a swipe object and pass in a bunch of    
        //options, especially "callback" which fires on every slide change   
        window.mySwipe = new Swipe(document.getElementById('slider1'), {   
            startSlide: 0,   
            speed: 1000,   
            auto: 5000,   
            callback: function(){   
                myAlert();   
            }   
        });   
        $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});   
    });    
</script>

该代码存在几个问题。它应该更接近于此： 

<script type="text/javascript">
    function myThing(){   
        // ** Do something useful here. This may involve calling
        // ** other functions.  Those functions need not be defined
        // ** within jquery.lazyload.js.
    }   
    $(document).ready(function() {   
        //instantiate a swipe object and pass in a bunch of    
        //options, especially "callback" which fires on every slide change.
        // ** There is no need, as far as I can tell, to assign the
        // ** output to a global variable. (window.mySwipe).  In fact, given
        // ** the code you have, there is no need to retain the output at all. 
        new Swipe(document.getElementById('slider1'), {   
            startSlide: 0,   
            speed: 1000,   
            auto: 5000,   
            // ** Just use the function name. You don't need to define
            // ** a new anonymous function to wrap around it. 
            callback: myThing
        });   
        $("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});   
    });    
</script>

更多

我想你想要的是懒惰地加载"接下来的几个"图像当用户在列表中滑动时，它们可用。从我阅读（简要），对于所有图像，您只需调用lazyload()一次在页面上。如果图像位于"容器"内，请指定 container延迟加载的选项。（见http://www.appelsiini.net/projects/lazyload）然后插件监控该容器的视口，并根据需要加载图像。有无需再次调用"lazyload"，无需回调。

如果这是不工作，那么滑动和jquery.lazyload.js可能无法一起使用，由于在 lazyload 中所做的假设。在这种情况下，您仍然可以延迟加载，但您需要自己完成。

为此，请完全消除延迟加载.js。 然后，在滑动回调中，执行您希望 lazyload 完成的操作：在"next"上设置 src 属性图像。设置该属性将导致网页加载图像。要获得延迟加载，在原始状态下，所有 src 属性在滑动之前，图像必须为空白，或设置为某个固定的图像 URL开始。 现在，您可能会问：在回调中，您如何知道要加载哪个图像？以及要在 src 属性中设置哪个 URL？ 这取决于你确定。我认为有一些方法可以得到适当的来自该回调中滑动的信息。

如果你不明白这一点，那么你需要一些指导或一些进一步阅读以建立对浏览器的基本理解处理图像。从我的阅读来看，你不需要滑动来打电话懒惰的update() .

一些一般建议：

  • 对于任何模块，您都不应尝试调用定义的函数该模块的内部。它们是内部的，这是有原因的。

  • 对于任何模块，您都不应修改其源代码，除非您非常确定你知道你在做什么。如果你四处闲逛和尝试一些事情，将代码放在您自己的模块中。您自己的 JavaScript 代码属于网页，或网页引用的单独模块。

  • 您可能不应该在 $(document).ready()除非你有充分的理由。

  • 阅读文档。我以前从未听说过滑动或延迟加载今天。我在这里提出的关于他们的建议 - 特别是关于滑动上的回调，以及 lazyload 上的容器选项 - 来自我阅读文档了解如何使用它们。

相关文章：