Question

绝大部分网站 /Web 应用程序的代码都存放在多个文件中，通常可以在网页中使用 <scriopt src=..></script> 来加载这些文件，或者使用 <script> .. </script> 来包含内联代码（inline-code）。

这些文件和内联代码是相互独立的 JavaScript 程序还是一个整体呢？

答案（也许会令人惊讶）是它们的运行方式更像是相互独立的 JavaScript 程序，但是并非总是如此。

它们共享 global 对象（在浏览器中则是 window ），也就是说这些文件中的代码在共享的命名空间中运行，并相互交互。

如果某个 script 中定义了函数 foo() ，后面的 script 代码就可以访问并调用 foo() ，就像 foo() 在其内部被声明过一样。

但是全局变量作用域的提升机制（hoisting，参见《你不知道的 JavaScript（上卷）》的“作用域和闭包”部分）在这些边界中不适用，因此无论是 <script> .. </script> 还是 <script src=..></script> ，下面的代码都无法运行（因为 foo() 还未被声明）。

<script>foo();</script>

<script>
  function foo() { .. }
</script>

但是下面的两段代码则没问题：

<script>
  foo();
  function foo() { .. }
</script>

和：

<script>
  function foo() { .. }
</script>

<script>foo();</script>

如果 script 中的代码（无论是内联代码还是外部代码）发生错误，它会像独立的 JavaScript 程序那样停止，但是后续的 script 中的代码（仍然共享 global ）依然会接着运行，不会受影响。

你可以使用代码来动态创建 script ，将其加入到页面的 DOM 中，效果是一样的：

var greeting = "Hello World";

var el = document.createElement( "script" );

el.text = "function foo(){ alert( greeting );\
 } setTimeout( foo, 1000 );";

document.body.appendChild( el );

如果将 el.src 的值设置为一个文件 URL，就可以通过 <scrscript=..></script> 动态加载外部文件。

内联代码和外部文件中的代码之间有一个区别，即在内联代码中不可以出现 </script> 字符串，一旦出现即被视为代码块结束。因此对于下面这样的代码需要非常小心：

<script>
  var code = "<script>alert( ‘Hello World’ )</script>";
</script>

上述代码看似没什么问题，但是字符串常量中的 </script> 将会被当作结束标签来处理，因此会导致错误。常用的变通方法是：

"</sc" + "ript>";

另外需要注意的一点是，我们是根据代码文件的字符集属性（UTF-8、ISO-8859-8 等）来解析外部文件中的代码（或者默认字符集），而内联代码则使用其所在页面文件的字符集（或者默认字符集）。

内联代码的 script 标签没有 charset 属性。

script 标签的一个已废止的用法是在内联代码中包含 HTML 或 XHTML 格式的注释，如：

<script>
<!--
alert( "Hello" );
//-->
</script>

<script>
<!--//--><![CDATA[//><!--
alert( "World" );
//--><!]]>
</script>

现在我们已经不需要这样做了，所以不要再继续使用它们。

<!-- 和 --> （HTML 格式的注释）在 JavaScript 中被定义为合法的单行注释分隔符（var x = 2; 是另一行合法注释），这是老的技术导致的（详见 A.1 节的 Web ECMAScript 部分），切勿再使用它们。