javascript - yepnope的使用(相对路径、css和js)

Question

我只想在不涉及触摸设备时包含 fancybox。到目前为止，这是我的代码:

<script>
    yepnope([{
        test : Modernizr.touch,
        nope  : './js/lib/fancybox/jquery.fancybox.pack.js',
        callback : {
            "jquery.fancybox.pack.js": function () {
                console.log("fancybox loaded!");
            }
        }
    }]);
</script>

此代码位于结束正文标记之前。我收到错误 TypeError: k.apply is not a function 但这对我没有帮助。

我的问题:

• 我可以用这个相对路径加载js文件吗？
• 我的相对路径从哪里开始？从 yepnope 所在的路径？
• 如何有条件地加载 JS 和 CSS 文件？

更新:

现在我尝试了一种不同的方式:

<script>
Modernizr.load([
    {
        test  : Modernizr.mq('screen and (max-width: 31.25em)'),
        yep  : {
            'photoswipe' : ['/js/klass.min.js', '/js/code.photoswipe-3.0.5.min.js']
        },
        nope : {
            'fancybox' : ['/js/lib/fancybox/jquery.fancybox.pack.js', '/js/lib/fancybox/jquery.fancybox.css']
        },
        callback : {
            'photoswipe': function (url, result, key) {
                var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
            },
            'fancybox': function (url, result, key) {
                $('a.fancy').fancybox();
            }
        }
    }
]);
</script>

我收到以下错误 TypeError: a.split is not a function。我做错了什么？

Answer 1

问:我可以用这个相对路径加载js文件吗？

是的，前提是您的结构类似于:

 index.html
--js/
----lib/
------modernizr.custom.js
--------fancybox/
----------jquery.fancyboxy.pack.js

请参阅下一个答案来解释这一点...

问:我的相对路径从哪里开始？从 yepnope 所在的路径？

Modernizr 从 html 页面的位置获取路径，而不是从 modernizr 加载脚本的位置获取路径(因为它使用 html 中的路径创建脚本​​引用)。

问:如何有条件地加载 JS 和 CSS 文件？

将数组传递给 nope 而不是仅用于 JavaScript 的单个字符串:

没有:['./js/lib/fancybox/jquery.fancybox.pack.js', './styles/fancybox/jquery.fancybox.pack.css']

看看文档，他们在这方面做得很好...... http://modernizr.com/docs/#load