google.load 问题

Question

嗨，我在 momemt 上摆弄 google ajax api，并按照文档中的示例进行操作，我的 html 文件中有两个脚本标记：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">google.load('search', '1');</script>

一切正常，但当我使用 jquery 并尝试调用 google.js 时，它不会工作。加载（'搜索'，'1'）；在 $(document).ready(function() 之后的外部 javascript 文件中，

我收到以下错误： null is null or not an object。

我显然错过了一些基本的东西，因为我刚刚学习 javascript，但我的印象是它最好不引人注目地使用 javascript。实际上包含一些 js 代码的第二个脚本标记不是不引人注目的。有人可以提供任何帮助吗？

Answer 1

根据您的解释，您的页面似乎设置如下：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load('jquery');
    $(document).ready(function(){
       ... do stuff ...
    });
</script>
<script src="/my/external.js" type="text/javascript"></script>

但是，此不会按您预期的方式工作，因为 document.ready 事件在 DOM 之前不会触发已完全加载。然而，JavaScript 文件是在加载时执行的。因此，实际执行如下所示：

1. 加载 Google JSAPI
2. 加载 jQuery
3. 加载External.js
4. 调用文档就绪

根据其余代码的外观，您可能希望将所有初始化代码放在单独的文件中，或者移动您的 < code>search 加载回主文档。

关于不显眼的代码：

David，不显眼的 JavaScript 与它如何影响页面有关，而不是与它是在页内还是外部有关。

更重要的是不要让您的网站如此依赖 JavaScript，以至于在禁用 JavaScript 的情况下它无法运行。

例如，这是很唐突的：

<a href="#" onclick="doSomething(); return false;">Click Me</a>

因为它只能在启用 JavaScript 的情况下工作。此外，代码是内联的，这很糟糕，因为它没有将功能与结构（HTML）分开。

然而，采用一段类似的代码：

<a href="/do/something" id="do-something">Click Me</a>

并使用此 javascript/jquery 片段：

$(document).ready(function(){
    $("#do-something").click(function(e){
       doSomethingNicer();
       e.preventDefault(); // Keep the browser from following the href
    });
});

Is 变得不引人注目，因为页面仍然可以工作（默认情况下加载 /do/something），但当启用 JavaScript 时，它会以更好的方式工作（执行 javascript而不是加载该网址）。这也称为渐进增强。