Question

我是JavaScript的新手。几天前开始学习。如果我在任何地方都错了，请纠正我。我找到了JavaScripts的三个表示：“Inline”，“Embedded”和“External”。

我有两个问题：

1。示例如下：这里我们没有提到<script type="text/javascript">，但它仍然正常工作，浏览器识别它。这是怎么回事？

<html>
  <head>
    <title></title>
  </head>
  <body>
    <input type="Button" value="Click me" onclick="alert('Welcome');"/>
  </body>
</html>

2。何时使用内联和何时使用嵌入式？我理解一切都应该是外部的，因为如果代码是独立的，浏览器可以更容易地缓存它（来自this answer）。但我没有得到内联和嵌入的使用。

我的问题可能听起来有点简单，但我无法通过搜索找到答案。请帮助我更好地理解这些基础知识。

Answer 1

好吧，你可以有外在的。这是你通过extrnal文件加载的javascript

<Script type="text/javascript" src="path/to/javascript.js"></script>

然后你嵌入了

 <script type="text/javascript">
      function foo() {
           alert('bar');
      }
      foo();
 </script>

然后你有内联。 Imho（imho = In 我的拙见）内联有两个版本。像你所示的内联函数或onclick处理程序。然而，更大的共识是内联函数是HTML代码与javascript混合的地方，如下例所示。

 <input type="button" onclick="foo()">

或内联函数 I 以及其他一些开发人员看到它。请注意，这是我对内联含义的解释。该解释是：您为其分配函数的变量。

请注意，这是一种解释，但内联的含义是非常的模糊，但没有在某处指定。当你习惯编程时更高级的编程语言，如java或c，内联有一个整体不同的含义和含义可以模糊从一种语言到另一个。这就是为什么我认为这也是一个内联函数，因为你可以在函数中使用它来定义一个范围函数闭包，或将其分配给DOM元素的onlcick处理程序等......

      var foo = function() {
                alert('bar');
           }
      foo();

回答你的第二个问题：

不要使用内联。它的使用是有效的，但它意味着在不同的html文件之间复制所有的javascript。

如果你把它作为摘要，那么你可以通过id访问所有标识符，并使用javascript表示，它将运行得更顺畅，并且更容易维护。

  document.getElementById('someobjectname')

在js文件中为您提供所需的对象。如果您将一些onload处理程序附加到document元素，则可以在文档加载到浏览器中时启动您的javascript，然后在其上执行您的魔术。

Answer 2

当浏览器读取html时，它正在创建DOM。每个元素都是DOM中的对象，并具有它的属性，事件和函数。所以当浏览器解析html它的绑定事件时，在运行时调用函数。这完全取决于浏览器的行为。看看：http://arvindr21.github.io/howBrowserWorks/和http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/或在Google搜索“浏览器如何运作”
将js，css部分与html分开是件好事。但有时你想根据你的应用程序的逻辑输出js功能：有人内联它，有人动态生成js文件并在html中需要它。

Answer 3

来自问题中的代码段

<input type="Button" value="Click me" onclick="alert('Welcome');">

是内联JS的一个例子。

您提到的其他品种是嵌入式和外部的。

嵌入式JS在脚本特定于特定文件的情况下非常有用。你不能在任何其他文件中重用你的JS。

<script>
    // Your script
</script>

外部JS在您希望重用脚本的情况下非常有用。例如，创建一个包含内容的文件hello.js

alert('Hello');

然后你可以在html中加入脚本，如

<script src="hello.js"></script>

Answer 4

这里我们没有提及，但它仍然工作正常，浏览器识别它。这是怎么回事？

因为HTML规范定义了像onclick这样的内在事件属性，正如它定义了<script>的含义一样。

何时使用内联和何时使用嵌入式？

general ：

不要使用内在事件属性（如onclick="..."），使用JavaScript绑定事件处理程序（例如addEventListener）。
对大多数脚本使用外部脚本元素（如<script src="..."></script>），特别是如果它们在页面之间很大或重复使用。
在以下情况下考虑内联脚本元素（如<script>...</script>）：
- 脚本很短，只适用于单个页面（您可能会获得温和的性能优势或易于维护）
- 该脚本旨在使数据可供JavaScript使用（例如，如果它定义了包含经常更新的数据并且是从数据库生成的变量）

浏览器如何识别内联JavaScripts？

4 个答案: