何时在你的html和外部.js中包含javascript是否合适？

Question

看起来你的html中有标签并不常见，但是在html中引用外部文件中的所有j是不是更整洁？ 它在应用方面有所不同吗？ 将一吨线连接到大量的js文件会更麻烦吗？

Answer 1

两者都有效，这里有一些外部文件的优点和缺点......

优点：

1. 您可以划分代码。 当你可能有一个主JavaScript文件，然后是一些小的JavaScript来做不同的无关事情时，这个特别有用

2. 它使版本控制更容易

3. 通过将代码放在单独的文件中，可以更容易地找到某个位的确切位置

缺点：

1. 外部文件意味着更多文件请求，降低速度

2. 对于少量代码，整个文件可能是不必要的

3. 通过内联执行脚本可以更容易地控制脚本的执行时间

请注意，对于需要在页面末尾执行的脚本（例如，在</body>标记之前放置<script>位置），您可以使用此代码：

<script src="myscript.js" defer></script>

就个人而言，我通常更喜欢将代码放在单独的文件中，因为我发现它更容易管理，但请参阅上面的优缺点来做出决定。

Answer 2

这取决于含义，你想要优化速度。 例如，如果你有一些需要轻量级javascript的页面，那么使用一些<script>...</script>标签而不是外部文件要快得多。

另一方面，如果您需要在许多页面上执行许多复杂的算法/流程，那么在页面的性能和加载速度上从外部文件获取信息会更容易，而不是拥有页面加载您需要的数百行代码。

Answer 3

内联JavaScript

• Pro：无需额外的HTTP请求，因此初始加载速度可能更快。
• Con：无法独立于HTML缓存JavaScript，因此可能会在连续访问时下载不必要的代码。
• Con :(与前一点相关）每次都可能必须下载所有JavaScript代码，因为HTML文件通常不会被缓存（但这可能取决于您的服务器设置）。
• Con：无法跨HTML页面共享代码。

外部JavaScript文件

• Pro：可以独立于其他资源缓存JavaScript文件。
• Pro：可以跨多个HTML页面共享JavaScript代码。
• Con：外部JavaScript文件越多，HTTP请求的模式越多，加载页面所需的时间就越长（至少在第一次加载时）。 这可以通过将JavaScript文件捆绑在一起来缓解。 例如，将不经常更改以进行长期缓存的文件捆绑到单个文件中，并将所有文件捆绑到另一个文件中。

Answer 4

真的取决于你的应用程序的大小。

• 几行代码？ 把它放在脚本标签之间。
• 小项目？ 引用外部文件很好。
• 大/生产水平？ 你需要一个模块捆绑器 - 查找webpack 。

Answer 5

根据我的小经验，人们习惯于分离HTML和JS。 最近有一个将它们组合在一起的举措。 我认为他们因为关注点分离而将它们分开，但HTML和JS并没有真正不同的“关注点”; HTML是名词，JS是动词。 这一举措至少部分地受到模板文字的推动。

所以回答你的问题，什么时候适当，这将是非常自以为是，但我可以看到一个HTML和JS总是结合在一起的世界，只要文件大小小且易于管理，生活就会很好。

Answer 6

除了已经提到的其他内容之外，我还有两次使用内联<script>标记。 当我找不到替代解决方案或替代方案繁琐时，我才这样做。

一种情况是我需要根据php代码的评估设置一个javascript变量。 一个例子是当数据被更改时页面刷新 - 我设置了一个Javascript “脏”标志，所以如果用户试图退出页面而不保存，我可以发出警告：

if ($dataHasChanged){
    echo "<script>dirtyFlag.value = true;</script>";
}

另一个例子是在iframe中运行php代码，我希望返回php代码的结果（要么是父元素，要么是设置javascript变量）：

    $result = updateDb($data);
    if ($result === false) {
        echo "<script> document.write( parent.document.getElementById('status').innerHTML = 'Error')</script>";
    }