include/remove JavaScript 页面调整文件大小的最佳方法？

Question

针对某些屏幕尺寸包含 JavaScript 文件和删除它们的最佳方法是什么。

基本上如下：

jQuery(window).on("resize", function () 
{
    if ( jQuery(window).width() > 960) {
        // include 960.js
        // remove low_res.js
    }
    else
    {
        // include low_res.js
        // remove 960s.js
    }
}).resize();

Answer 1

Best way to include/remove JavaScript file on page resize?

不会。一方面，删除 script 元素不会对其运行的代码产生任何影响——由它连接的事件处理程序不会被删除，由它创建的全局变量不会消失等

相反，使用单个脚本，并让代码适当地检查页面的宽度。

但是，如果您真的想要将脚本分开，并按需加载另一个when/if事情发生变化，那么这就是您需要的要做：

让每个脚本定义一个全局变量（例如，Page960 和 PageLowRes），其中包含 init 和 uninit 函数，以及一个 isInitialized 标记它在 init 中设置为 true，在 uninit 中设置为 false。当其中一个脚本加载时，它应该调用自己的 init 函数。您的切换器代码将如下所示：

jQuery(window).on("resize", function () 
{
    var use960, newVersion, oldVersion;

    use960 = jQuery(window).width() > 960;
    newVersion = use960 ? "Page960" : "PageLowRes";
    oldVersion = use960 ? "PageLowRes" : "Page960";

    // Already using the "new" version?
    if (window[newVersion] && window[newVersion].isInitialized) {
        // Yes, nothing to do
    } else {
        // No, un-init the old if initialized
        if (window[oldVersion]) {
            window[oldVersion].uninit();
        }

        // Do we already have the new version?
        if (window[newVersion]) {
            // Yes, re-init it
            window[newVersion].init();
        } else {
            // No, load it (it'll init itself)
            $.getScript(use960 ? "960.js" : "low_res.js");
        }
    }
}).resize();

不过，我建议在其中添加延迟，这样您就不会在每次调整大小时都这样做...

include/remove JavaScript 页面调整文件大小的最佳方法？

Best way to include/remove JavaScript file on page resize?

javascript

jquery

include

responsive-design