2

document.ready()我知道 jQuery和本机方法之间存在差异javascript onload()，因此我想document.ready()在准备就绪时使用它来做一些初始化的东西DOM。

但是，我不需要 jQuery 库提供的任何额外内容。鉴于 jQuery-1.7.2.min.js 的大小为94.8kb，这可能会延迟加载时间，尤其是在移动设备上，有没有办法获得仅提供该document.ready()方法的 jQuery 的均匀压缩版本？

如果没有，是否有任何其他库可以提供类似的功能？

另外，我知道 jQuery 有一个移动版本，但由于这个页面同时适用于 pc 和移动设备，我不确定移动版本是否可以在 pc 上运行良好。我想如果它兼容，那么可能这就是要走的路吗？

谢谢！

4

5 回答 5

5

你可能想看看 Zepto.js，它只有 8.4k ......

http://zeptojs.com/

来自他们的网站——“Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有很大程度上与 jQuery 兼容的 API。如果您使用 jQuery，那么您已经知道如何使用 Zepto。”

就 IE 支持而言，您可以在 IE 中使用回退来恢复到 jQuery...

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
于 2012-05-29T01:10:49.227 回答
3

为您的脚本使用 CDN，以便缓存脚本库。这是 CDN 的脚本 + CDN 不可用时的后备脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

使用 CDN 的一些好处

  • 较低的带宽
  • 脚本被缓存
  • 即使是下载了数千次的小脚本文件也会开始对您的带宽计产生明显影响。
  • 更少的连接/访问您的网络服务器，从而提供更好的延迟
于 2012-05-29T01:10:41.153 回答
2

您需要的功能由 jQuery 的 jQuery.ready.promise 函数完成。

您只能提取和使用这部分代码。

jQuery.ready.promise = function( object ) {
if ( !readyList ) {

readyList = jQuery.Deferred();

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState !== "loading" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready, 1 );

// Mozilla, Opera and webkit nightlies currently support this event
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );

// If IE event model is used
} else {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );

// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );

// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;

try {
toplevel = window.frameElement == null;
} catch(e) {}

if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
}
return readyList.promise( object );
};

你可以在这里看到它：https ://github.com/jquery/jquery/blob/master/src/core.js

于 2012-05-29T01:23:13.770 回答
1

不完全是您所要求的，但另一种解决方案是将您的脚本仅包含在正文的末尾，就在结束</body>标记之前。这将获得相同的结果，甚至不需要包含 jQuery 的精简版本。

document.ready 函数的要点是，它将在 DOM 准备好之后调用，即在浏览器解析完所有 html 并准备好从 JavaScript 操作之后。将你的 JS 代码放在 body 的末尾可以达到同样的效果，因为浏览器在解析文档时会执行 JavaScript，并且在执行 JS 时它可以访问任何已经解析过的 DOM 元素。

当我在评论中提到这个想法时，你问你的代码将如何执行，所以这里有一个简单的例子：

// CHANGE THE FOLLOWING:

$(document).ready(function() {
    var myField = document.getElementById("someId");
    alert(myField.value);
});

// TO BE

var myField = document.getElementById("someId");
alert(myField.value);

上面的内容是内联（尽管在脚本块中）还是包含在脚本标记所包含的外部 JS 文件中并不重要，只要它位于正文的末尾即可。

唯一的问题是，因为代码不包含在函数中，所以它将创建全局变量 - 作为一般规则，您要避免，因为如果将来您要包含其他外部库，他们可能会尝试使用相同的名字。您可以通过将代码包装在立即调用的匿名函数表达式中来避免此问题：

(function() {
    var x = "these variables are not global",
        myField = document.getElementById("someId");
    alert(myField.value);

    function test() {
        alert("this function isn't global either");
    }
    test();
})();

请注意额外的括号 - 匿名函数周围的括号使其成为函数表达式而不是函数声明（这意味着它不需要名称），最后的括号导致函数立即被调用。

您可以通过查看您现在正在阅读的 Stack Overflow 页面上的页面源代码来查看将 JS 放在正文末尾的真实示例。

于 2012-05-29T02:28:36.070 回答
1

cdn + fallback 很不错：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

或者您可以从较小的库中挑选您需要的内容：http: //microjs.com/

于 2012-05-29T01:17:41.807 回答