javascript - 使用 yepnope 进行响应式设计脚本处理

Question

在我的响应式网站的页脚，我尝试使用 yep-nope 和 underscrore.js 加载适用于移动设备和桌面设备的不同脚本

var $window = $(window)
,throttled = _.throttle( packageLoader, 500);
$window.resize( throttled );

当浏览器窗口大小改变时，会触发上述函数。它等待 500 毫秒，然后触发“packageLoader 函数。

<script src="/assets/javascripts/yepnope.1.5.4-min.js"></script>
<script src="/assets/javascripts/underscore-min.js"></script>

function packageLoader(){

    Modernizr.load([
        {
            test: Modernizr.mq('(max-width:768px)'),
            yep: 
            [
                '/assets/javascripts/zepto.min.js',
                '/assets/javascripts/common-portable.js'
            ],
            nope:
            [
                '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
                // Accommodation guide plugins
                '/assets/javascripts/jquery.nouislider.min.js',
                '/assets/javascripts/jquery.cycle2.min.js',
                // END Accommodation guide plugins
                '/assets/javascripts/common-desktop.js'
            ],
            both: 
            [
                '/assets/javascripts/main.js'
            ]
        }
    ]);
}

window.onload = packageLoader();

问题:

IE7+

我需要一个好的解决方案来管理在不同窗口大小下运行的脚本 - 我希望移动网站尽可能轻便。所以我相信我需要一种方法。

• 从缓存或文件(如果不存在)加载 jQuery。• 如果用户使用移动设备查看，则加载 zepto• 处理脚本

上面的脚本可能不是最好的解决方案，如果您已经构建了一个需要此控件的网站，请在让我知道您使用了哪些库之前..

提前致谢

Answer 1

yepnope 已被弃用，事实上，默认情况下它不会出现在 Modernizer 的下一个版本中。

将这些脚本连接在一起并对它们进行丑化可能会有更好的运气。在强调脚本文件的大小之前，我会担心额外的 http 请求/缩小(图像、脚本和 css 文件)。