使用 yepnope 进行响应式设计脚本处理答案

【问题标题】：Responsive design script handling using yepnope使用 yepnope 进行响应式设计脚本处理
【发布时间】：2013-11-01 12:06:29
【问题描述】：

在我的响应式网站的页脚，我尝试使用 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 • 处理脚本

上面的脚本可能不是最好的解决方案，如果你已经建立了一个需要这个控件的网站，请告诉我你使用了哪些库..

提前多谢

【问题讨论】：

您现在可能已经继续前进了，但是为什么从响应的角度来看 IE7（以及 IE8）它们在移动环境中不工作，那么工作的重点是什么？以这种方式支持他们？除非我遗漏了一个明显的观点
是的 - 我为 IE6-7 甚至 8 修复了网站的宽度......并且只让符合现代标准的浏览器拥有华丽的东西。然而，我仍然没有找到一种为不同视口大小划分 JS 的好方法 ---
您使用过 jrespond 还是与您想要实现的目标不符？

标签： javascript jquery responsive-design internet-explorer-7 yepnope

【解决方案1】：

yepnope 已经被贬值了，事实上它默认不会出现在 Modernizer 的下一个版本中。

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

【讨论】：