Question

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

鉴于以下代码，我能正确理解我的问题吗？
如果是这样，我怎样才能让Swipe访问Lazyloader的功能？

谢谢。

跟进：在Q＆amp; A与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);

Answer 1

可以这么简单：将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()一次在页面上。如果您的图像位于“容器”内，请指定 lazyload上的container选项。（看到 http://www.appelsiini.net/projects/lazyload）然后插件监视该容器的视口并根据需要加载图像。有无需再次调用“lazyload”，无需回调。

如果是这样的话不工作，然后Swipe和jquery.lazyload.js可能无法一起使用，因为在lazyload中做出的假设。在那种情况下，你仍然可以得到懒惰，但你需要自己做。

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

如果您不理解这一点，那么您需要一些指导或一些指导进一步阅读建立对浏览器如何基本的理解处理图像。从我的阅读中，你不需要刷卡来打电话 lazyload的update()。

一些一般性建议：

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

对于任何模块，除非您这样做，否则不应修改其源代码非常肯定你知道你在做什么。如果你在四处寻找尝试一下，把代码放在你自己的模块中。您自己的javascript代码属于网页，或者属于网页引用的单独模块。

你可能不应该在其中定义函数 $(document).ready()除非你有充分的理由。

阅读文档。我之前从未听说过Swipe或lazyload 今天。我在这里提出的关于他们的建议 - 具体来说，关于他们 Swipe上的回调，以及lazyload上的容器选项 - 来自我阅读如何使用它们的文档。

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

1 个答案: