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

为了制作可滑动显示的许多图像幻灯片，我尝试将两个插件Swipe.js和lazyloader.js缝合在一起。我想让Swipe插件中的幻灯片计时器事件调用Lazyloader内部的update函数。 From researching, it seems my problem appears to be one of namespace;也就是说，Swipe不了解Lazyloader中的内容，因此无法调用该函数。


给定以下代码，我是否正确理解我的问题？
如果是这样，如何获取Swipe以访问Lazyloader的功能？


谢谢。

跟进：
在与Cheeso进行问答之后，我现在看到关于我最终需要发生什么的错误的问题。我添加此评论以避免由于我的问题而使任何未来的读者感到困惑。这与名称空间甚至与访问私有功能which shouldn't be done无关。该主题的最终目的是，如果您真的不知道自己在做什么，那么尝试将Frankenstein库放在一起是多么不明智。 ; ）
结束跟进

swipe.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功能的函数。这只是一个猜测，因为我不知道要刷卡，但是我查看了代码转储，看到了该回调函数。它似乎是Swipe扩展的关键点。

如果我是正确的，那根本不是名称空间问题。就是您所说的-将不同的库或模块编织在一起。通常，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”，无需回调。

如果是这样
无法使用，则Swipe和jquery.lazyload.js可能无法一起使用，
基于lazyload中的假设。在这种情况下，您仍然可以
延迟加载，但您需要自己完成。

为此，请完全消除lazyload.js。然后，在Swipe回调中，执行您希望lazyload完成的操作：在“ next”上设置src属性
图片。设置属性将导致网页加载
图片。要进行延迟加载，请在原始状态下将所有
刷卡前，图片必须为空白，或设置为固定的图片网址
开始。现在，您可能会问：在回调中，您如何知道要加载哪个图像？
并将哪个URL设置为src属性？那是你的事
确定。我认为有一些方法可以获取适当的
回调中来自Swipe的信息。

如果您不了解，则需要一些说明或一些说明
进一步阅读以建立对浏览器的基本理解
处理图像。根据我的阅读，您无需滑动即可致电
lazyload的src。

一些一般性建议：


对于任何模块，都不应尝试调用已定义的函数
该模块的内部。它们是内部的，这是有原因的。
对于任何模块，除非您是
非常确定您知道自己在做什么。如果你在四处闲逛
试试看，将代码放在自己的模块中。您自己的JavaScript代码属于网页或网页引用的单独模块。
您可能不应该在其中定义函数
update()除非您有充分的理由。
阅读文档。我以前从未听说过刷卡或延迟加载
今天。我在这里提出的建议-特别是关于
在Swipe上回调，在lazyload上使用container选项-来自我
阅读有关如何使用它们的文档。

关于javascript - 从另一个.js文件调用一个.js文件中的函数时出现命名空间问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10325736/