Question

假设我有一个包含以下html的页面：

<input type="button" id="clickme" value="Click Me" />

在同一页面上，我有以下脚本：

<script type="text/javascript">

    $('#clickme').click(function(){
        console.log("clicked");
});

</script>

上面的内容在页面上内嵌是否正常，或者在库中使用console.log(...)更好，所以它会是这样的：

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

    $('#clickme').click(function(){
        LogToConsole("clicked");
});

</script>

要将它提升到一个新的水平，将整个点击功能放在外部库中会更好，所以代码最终会变成：＆＃39;

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

ClickMe("clicked");

</script>

以上仍然包含内联javascript或者我对内联javascript的理解不正确，因为它似乎无法避免？

Answer 1

如何避免内嵌javascript？

我可以想到避免使用内联JavaScript的最好方法之一就是不要编写内联JavaScript 。

也就是说，在HTML文档的页眉/页脚中，请输入一个外部JS文件，如下所示：

<script type="text/javascript" src="external.js"></script>

然后在HTML文档的其他地方，输入要触发点击功能的元素：

<input type="button" id="clickme" value="Click Me" />

最后，在 external.js 中，输入代码来触发点击：

$('#clickme').click(function() {
    LogToConsole("clicked");
}

通过将JavaScript放在externel JS文件中，您不会在HTML文档中编写JavaScript内联。从你的问题来看，你对内联JavaScript的理解确实是“不正确的”。但是，通过承认内联JavaScript只是意味着在HTML文件中编写JS代码，您现在可以理解编写（或不编写）内联JS的含义。

顺便说一句，<script>标记不是内联JS !!!!这是HTML。

Answer 2

要将它提升到新的水平，您可以将所有内容放入库中并执行：

<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="clickme.js"></script>

请注意，上述内容与内联完全相同。也就是说，代码将起作用与否取决于您放置脚本标记的位置（将其视为浏览器副本并将外部代码粘贴到内联 - 这基本上就是发生的事情）。

之后你可以将它提升到一个新的水平：使脚本独立于它们在HTML中的位置。对于大多数人来说，这意味着即使脚本包含在head：

中也能使脚本正常工作

<html>
  <head>
    <script type="text/javascript" src="external.js"></script>
    <script type="text/javascript" src="clickme.js"></script>
  </head>
  <body>
    <input type="button" id="clickme" value="Click Me" />
  </body>
</html>

但是如果你试图这样做，你会遇到一个问题：当你包含"clickme"文件时按钮clickme.js不存在，所以脚本不起作用。为了使其工作，您可以在加载或DOM准备好的情况下运行脚本。 jQuery使这很简单：

// clickme.js
$(document).ready(function(){
    // jQuery will wait until the document is loaded
    // before executing code inside here

    ClickMe("clicked");
});

Answer 3

我建议大多数时候使用外部JavaScript。当用html混乱时，Javascript文件很难调试。想想你是否有数百行javascript分散在文档中。如果是这种情况，调试BOTH html和javascript需要很长时间。

此规则的唯一例外是性能。外部JavaScript文件由浏览器缓存，但是它们需要更多的HTTP请求，这会减慢页面加载时间。这实际上取决于浏览器回收（缓存）JavaScript外部工作表的次数。如果每个会话有大量的视图，那么它会被大量回收，因此使用外部文件是有意义的，但是对于像每个会话没有大量视图的主页这样的事情，因此不会回收那么多，使用内联更有意义。

有关效果的更多信息，请参阅：https://developer.yahoo.com/performance/rules.html#external=

如何避免内联JavaScript？

3 个答案: