使用ScrollMagic.js作为AMD模块

Using ScrollMagic.js as AMD module

本文关键字：AMD 模块 作为 js ScrollMagic 使用      更新时间：2023-09-26

例如，如何将优秀的ScrollMagic JS插件用作AMD模块来与requirejs一起使用？

我在网上找不到任何关于它的参考资料，从ScrollMagic的代码来看，它似乎不像是作为AMD模块加载的。

它确实在模块末尾的window级别中定义了两个变量：

window.ScrollScene = ScrollScene;
window.ScrollMagic = ScrollMagic;

所以简单的shim似乎不行，因为我需要导出两个变量。有出口的方法吗？

有什么想法吗？

谢谢！

我发现了一些对我有用的东西，这有点难解决，但它确实奏效了。

在requirejs的shim配置中，我使用：

shim: {
    'scrollmagic': {
        deps:['jquery', 'TweenMax'], 
        exports: 'ScrollMagic', 
        init: function() {
            return {ScrollMagic: ScrollMagic, 
                    ScrollScene: ScrollScene};
        }
    }
}

这符合ScrollMagic需要加载jQuery和GSAP TweenMax库的事实。

事实证明，使用shim的init函数，然后返回这两个变量，就可以达到目的。

但是-这意味着要使用ScrollMagic插件，应该使用（示例）：

define(['scrollmagic'], function(scrollmagic) {
    var magic = new scrollmagic.ScrollMagic();
    var scene = new scrollmagic.ScrollScene({duration: 200});
});

希望这能帮助未来的某个人。。。

===编辑===

ScrollMagic 1.3现在支持AMD模式，所以所有这些都是不必要的。

相关文章：