有一些方法来包括jQuery和jQuery UI,我想知道人们使用什么?
谷歌JSAPI
jQuery的网站
您自己的站点/服务器
另一个CDN
我最近一直在使用谷歌JSAPI,但发现它需要很长时间来设置SSL连接,甚至只是解析google.com。我一直在使用以下谷歌:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
我喜欢使用谷歌的想法,以便在访问其他网站时缓存它,并从我们的服务器节省带宽,但如果它一直是网站的缓慢部分,我可能会改变包括。
你用什么?你有什么问题吗?
编辑:刚刚访问了jQuery的网站,他们使用以下方法:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Edit2:下面是我如何在过去的一年里没有任何问题地包含jQuery的:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
区别在于去掉了http:。通过删除这个,您就不需要担心在http和https之间切换了。
这里有几个问题。首先,你指定的异步加载方法:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.1');
google.setOnLoadCallback(function() {
// do stuff
});
</script>
有几个问题。脚本标记在检索时暂停页面加载(如果需要)。如果加载很慢,这很糟糕,但jQuery很小。上述方法的真正问题是,因为jquery.js加载独立于许多页面,它们将在jquery加载之前完成加载和渲染,所以你所做的任何jquery样式对用户来说都是可见的更改。
另一种方法是:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
尝试一些简单的例子,比如,有一个简单的表格,用setOnLoadCallback()方法和$(document).ready()将单元格的背景更改为黄色,使用静态jquery.min.js加载。第二种方法不会有明显的闪烁。第一个遗嘱。我个人认为这不是一个好的用户体验。
作为一个例子运行:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.odd { background-color: yellow; }
</style>
</head>
<body>
<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td>Three</td><td>Four</td></tr>
<tr><td>Five</td><td>Six</td></tr>
<tr><td>Seven</td><td>Nine</td></tr>
<tr><td>Nine</td><td>Ten</td></tr>
</table>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(function() {
$("tr:odd").addClass("odd");
});
});
</script>
</body>
</html>
您应该看到表格出现,然后行变成黄色。
load()方法的第二个问题是它只托管有限范围的文件。这对于jquery来说是一个问题,因为它非常依赖插件。如果你试图包含一个jquery插件与<script src="…">标签和google.load()插件可能会失败的消息"jQuery is not defined",因为它还没有加载。我真不知道还有什么办法。
第三个问题(任何一种方法)是它们是一个外部负载。假设你有一些插件和你自己的Javascript代码,你至少有两个外部请求来加载你的Javascript。你最好获取jquery、所有相关插件和你自己的代码,然后把它们放到一个小文件中。
你应该使用谷歌的Ajax库API来托管吗?:
As to load times, you're actually
loading two scripts - the jsapi script
and the mootools script (the
compressed version from above). So
that is two connections, rather than
one. In my experience, I found that
the load time was actually 2-3 times
slower than loading from my own
personal shared server, even though it
was coming from Google, and my version
of the compressed file was a couple of
K larger than Google's. This, even
after the file had loaded and
(presumably) cached. So for me, since
the bandwidth doesn't matter much,
isn't going to matter.
最后还有一个潜在的问题,即偏执的浏览器将请求标记为某种XSS尝试。这通常不是默认设置的问题,但在公司网络上,用户可能无法控制他们使用的浏览器,更不用说安全设置了,你可能会有问题。
所以在最后,我真的不能看到我使用谷歌AJAX API为jQuery至少(更“完整”的API是一个不同的故事在某些方面)除了在这里张贴例子。
毫无疑问,我选择使用谷歌API服务器来提供JQuery服务。我没有使用jsapi方法,因为我没有利用任何其他谷歌API,但是,如果有任何改变,那么我会考虑它…
首先:谷歌api服务器分布在世界各地,而不是我的单一服务器位置:更近的服务器通常意味着访问者的响应时间更快。
第二:许多人选择将JQuery托管在谷歌上,因此当访问者访问我的站点时,他们可能已经在本地缓存中有JQuery脚本。预先缓存的内容通常意味着访问者更快的加载时间。
第三:我的网络主机公司向我收取带宽使用费。如果访问者可以在其他地方获得相同的文件,那么每次用户会话花费18k是没有意义的。
我知道我对谷歌有一定的信任,以提供正确的脚本文件,并保持在线和可用。到目前为止,我对使用谷歌并没有感到失望,并将继续这种配置,直到它不再有意义为止。
有一件事值得指出…如果你的网站上有安全页面和不安全页面的混合,你可能想动态更改谷歌源,以避免在安全页面中加载不安全内容时经常看到的警告:
这是我想到的:
<script type="text/javascript">
document.write([
"\<script src='",
("https:" == document.location.protocol) ? "https://" : "http://",
"ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>"
].join(''));
</script>
更新2010年9月8日-
已经提出了一些建议,通过删除HTTP和HTTPS来降低代码的复杂性,并简单地使用以下语法:
<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
此外,如果你想要确保jQuery库的最新major版本被加载,你也可以更改url来反映jQuery的major编号:
<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
最后,如果你不想使用谷歌而更喜欢jQuery,你可以使用下面的源路径(请记住jQuery不支持SSL连接):
<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>