Question

我知道jQuery的document.ready()和原生javascript onload()方法之间存在差异，因此我想使用document.ready()来做一些初始化的事情而DOM准备就绪。

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

如果没有，是否还有其他lib可以提供类似的功能？

此外，我知道有一个jQuery的移动版本，但由于这个页面将适用于PC和移动设备，我不确定移动版本是否适用于PC。我想如果它是兼容的那么可能这是要走的路？

谢谢！

Answer 1

你可能想看看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>

Answer 2

为脚本使用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的一些好处

降低带宽
脚本已缓存
即使是数千次下载的小型脚本文件也会开始对您的带宽计产生明显的影响。
减少与Web服务器的连接/匹配，从而提供更好的延迟

Answer 3

您需要的功能是由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

Answer 4

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/

Answer 5

不完全是你问的问题，但另一种解决方案是在关闭</body>标记之前将脚本包含在正文末尾。这将实现相同的结果，而不需要包括jQuery的简化版本。

document.ready函数的意思是它将在DOM准备就绪后调用，即在浏览器解析完所有html并准备好从JavaScript操作之后。将JS代码放在正文的末尾可以达到同样的效果，因为浏览器在解析文档时遇到它时会执行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();
})();

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

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

jQuery的最低要求版本

5 个答案: