jQuery的最低要求版本

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

为脚本使用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 2

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

CDN +后退时相当不错：

<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 4

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

如果上述内嵌包括：（a脚本块内没关系，尽管）或者脚本标记包含的外部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(); 
})(); 

注意额外的括号：您可以通过在一个立即调用匿名函数表达式包装你的代码避免这个问题不需要名称），并且最后的那个会立即调用该函数。

只需在您正在阅读的堆栈溢出页面上查看页面源代码，就可以看到将JS放在主体末端的实际示例。