我应该在哪里放置我的JavaScript代码？

I would like to use the code for the auto-complete. The code is here.

我想使用自动完成的代码。代码在这里。

<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

</div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

However, I cannot figure out where I should put this code. In head? In body?

但是,我无法弄清楚我应该把这段代码放在哪里。在头?身体?

5 个解决方案

#1

You should probably put your code right at the end of the body tag.

您应该将代码放在body标记的末尾。

Check out Steve Souder's High Performance Web Sites - Evolution of Script Loading

查看Steve Souder的高性能网站 - 脚本加载的演变

If you have multiple script includes and need to convince yourself that they will load in the correct order for you, check out WebSiteOptimization.com's Article on the Defer Attribute, where you can see the order your scripts execute.

如果您有多个脚本包含并且需要说服自己他们将以正确的顺序加载您,请查看WebSiteOptimization.com关于延迟属性的文章,您可以在其中查看脚本执行的顺序。

#2

According to w3schools

根据w3schools

When to put script in HEAD

何时将脚本放入HEAD

Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.

调用它们或触发事件时要执行的脚本都放在函数中。将您的功能放在head部分,这样它们都在一个地方,并且它们不会干扰页面内容。

When to put script in BODY

何时将脚本放入BODY

If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.

如果您不希望将脚本放在函数内,或者您的脚本应该编写页面内容,则应将其放在body部分中。

So in your case. You can put the script in the body

所以在你的情况下。您可以将脚本放在正文中

#3

Put it into external file and then link that file with HTML document using:

将其放入外部文件,然后使用以下命令将该文件与HTML文档链接:

<head>
    ...
    <script type="text/javascript" src="/scripts/my-script.js"></script>
</head>

(if you're using HTML5 you can skip type attribute).

(如果您使用的是HTML5,则可以跳过type属性)。

The above way is the most clear and common one, however some researches proves that it's not the fastest way. You could put that JavaScript right before </body> element, skipping jQuery.read() ($(function() { ... }); in this case, which is a short form of that). You'll gain some milliseconds (or even less) in that case, but I just feel forced to notice that.

上述方式是最明确和最常见的方式,但有些研究证明它不是最快的方法。你可以把这个JavaScript放在元素之前,跳过jQuery.read()($(function(){...});在这种情况下,这是一个简短形式)。在这种情况下你会获得几毫秒(甚至更少),但我只是*注意到这一点。

#4

Yes you should put it inside the body element.

是的你应该将它放在body元素中。

#5

If you can, put it at the very end of the <body> element, after you've included jQuery, the autocomplete plugin itself, and any other libraries you depend on. Putting scripts at the end of the <body> is generally (at the time of this writing :-) considered to be a best practice because it allows the browser to get to the markup before having to worry about script execution.

如果可以的话,将它放在元素的最后,在包含jQuery,自动完成插件本身以及您依赖的任何其他库之后。将脚本放在的末尾通常(在撰写本文时:-)被认为是最佳实践,因为它允许浏览器在不必担心脚本执行之前进入标记。

#1