如何避免内联JavaScript？

Question

Let say I have a page that has the following html: 假设我有一个包含以下html的页面：

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

On the same page, I have the following script: 在同一页面上，我具有以下脚本：

<script type="text/javascript">

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

</script>

Is it fine for the above to be inline on the page or is it better to have the console.log(...) in a libray, so it would be something like: 上面的内容在页面上内联是否很好，还是将console.log(...)放在libray中更好，所以它类似于：

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

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

</script>

To take it to the next level, is it even better to put the whole click function in an external library, so the code eventually becomes something like:' 为了将它带入一个新的高度，是否最好将整个click函数放在一个外部库中，所以代码最终变为：

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

ClickMe("clicked");

</script>

The above still contains inline javascript or is my understanding of inline javascript incorrect because it seems that it is impossible to avoid? 上面仍然包含内联JavaScript，或者我对内联JavaScript的理解不正确，因为似乎无法避免？

Answer 1

How to avoid inline javascript? 如何避免内联JavaScript？

One of the best ways that I can think of to avoid using inline JavaScript is to simply not script inline JavaScript . 我可以想到的避免使用内联JavaScript的最佳方法之一就是不编写内联JavaScript脚本 。

That is, at the header/footer of your HTML doc, source an external JS file like so: 也就是说，在HTML文档的页眉/页脚处，获取一个外部JS文件，如下所示：

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

Then elsewhere in your HTML doc, put in the element to trigger your click function: 然后在HTML文档的其他位置，放入元素以触发点击功能：

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

Lastly, in external.js , put in the code to trigger your click: 最后，在external.js中 ，放入代码以触发点击：

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

By putting the JavaScript in an externel JS file, you are not writing JavaScript inline on your HTML doc. 通过将JavaScript放在外部JS文件中，您不会在HTML文档中内联编写JavaScript。 Your understanding of inline JavaScript, judging from your question, is indeed "incorrect". 从您的问题来看，您对内联JavaScript的理解确实是“错误的”。 But by acknowledging that inline JavaScript simply means writing JS code within your HTML file, you now understand what it means to write (or not write) inline JS. 但是通过确认内联JavaScript只是意味着在HTML文件中编写JS代码，您现在就了解了编写（或不编写）内联JS的含义。

By the way, the <script> tag is not inline JS !!!! 顺便说一句， <script>标记不是内联JS ！ It's HTML. 是HTML。

Answer 2

To take it to the next level you can put everything in libraries and do: 要将其提升到一个新的水平，您可以将所有内容放入库中并执行以下操作：

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

Note that the above will work exactly the same as inline. 请注意，以上内容将与内联完全相同。 That is to say, the code will work or not depending on where you put the script tag (think of it as the browser copy and pasting the external code to inline - that's basically what's happening). 也就是说，代码是否有效取决于您将script标记放在何处（将其视为浏览器副本并将外部代码粘贴到内联中-基本上就是这种情况）。

You can take it to the next level after that: make the scripts independent of where they are located in the HTML. 之后，您可以将其带入更高的层次：使脚本独立于HTML中的位置。 For most people this means make the script work even if they're included in the head : 对于大多数人来说，这意味着即使脚本包含在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>

But if you try to do this you'll run into a problem: The button "clickme" does not exist when you include the clickme.js file so the script won't work. 但是，如果尝试执行此操作，则会遇到一个问题：当包含clickme.js文件时， "clickme"按钮不存在，因此脚本将无法工作。 To make it work you run the script on load or on DOM ready. 要使其工作，您可以在加载时或在DOM就绪时运行脚本。 jQuery makes this easy: jQuery使这个变得容易：

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

    ClickMe("clicked");
});

Answer 3

I would recommend using external JavaScript most of the time. 我建议大多数时候使用外部JavaScript。 Javascript files are difficult to debug when it is cluttered with html. 当HTML文件杂乱无章时，很难调试Javascript文件。 Think about if you have hundreds of lines of javascript, scattered across a document. 考虑一下您是否有散布在整个文档中的数百行javascript。 It would take a long time to debug BOTH html and javascript if this were the case. 如果是这样的话，调试html和javascript都将花费很长时间。

The only exception to this rule is performance. 此规则的唯一例外是性能。 External JavaScript files are cached by the browser, however they require an increased amount of HTTP requests, which slow down page loading times. 外部JavaScript文件由浏览器缓存，但是它们需要增加HTTP请求量，这会减慢页面加载时间。 It really depends on the amount of times your JavaScript external sheet is recycled (cached) by the browser. 这实际上取决于浏览器对JavaScript外部工作表进行回收（缓存）的次数。 If you have a large amount of views per session, then it gets recycled a lot, and thus it makes sense to use external files, however for things like the homepage that do not have a high amount of views per sessions, and thus does not get recycled that much, it would make more sense to use inline. 如果每个会话中有大量视图，那么它将大量回收，因此使用外部文件是有意义的，但是对于首页等而言，每个会话中的视图数量并不多，因此不会回收那么多，使用内联会更有意义。

For more information on performance, you can read: https://developer.yahoo.com/performance/rules.html#external= 有关性能的更多信息，您可以阅读： https : //developer.yahoo.com/performance/rules.html#external=

如何避免内联JavaScript？

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-08-30 02:30:10

解决方案2
1 2016-08-30 02:29:52

解决方案3
0 2016-08-30 02:23:23

如何避免内联JavaScript？

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-08-30 02:30:10

解决方案2 1 2016-08-30 02:29:52

解决方案3 0 2016-08-30 02:23:23

解决方案1
4 已采纳 2016-08-30 02:30:10

解决方案2
1 2016-08-30 02:29:52

解决方案3
0 2016-08-30 02:23:23