javascript - 在 html 中使用 <style> 和 <script> ……真的有那么糟糕吗？

Question

我真的认为，如果我可以通过单个 php 函数调用包含一个功能齐全的组件，那将对我的工作流程有益。有点像

ddl();

这将生成一个 HTML 下拉列表，具有完整的样式和功能。对于外部资源，我需要担心包含 JavaScript 和 CSS 才能使其正常工作，但如果我将所有这些都包含在 ddl() 函数本身中，事情就会变得容易得多。

所以像这样:

<?php
function ddl(){
  <style>
     .ddl{
           //style
      }
  </style>
?>
  <div class="ddl">
     <!-- my drop down list -->
   </div>
   
 <script>
     //Do ddl functionality
 </script>
<?php
}

以这种方式做事的真正缺点是什么？性能是否更差？

Answer 1

对于小型元素(一到三页)，您可能永远不会注意到太多问题。特别是如果您从不重复功能。但是，如果您想要一个可扩展的应用程序，您确实需要将形式与功能分开。通过查看样式之间的关系，样式表实际上更容易维护。与嵌入式脚本相比，JavaScript 在更大的 block 中得到更好的管理。

如果您以后决定扩展具有嵌入式样式和 JavaScript 的应用程序，您会很头疼地处理将它们分离出来的问题 - 尤其是当您想要重用功能时。如果您忘记从 HTML 中删除样式标签，或者更糟的是 - 样式属性 - 它可能会覆盖您的 CSS 文件更改，因此清理非常重要。

将 JavaScript 和 CSS 放在单独的文件中还有一个缓存优势。当您的某个功能或样式在整个 Web 应用程序中重复出现时，浏览器只需为每个文件加载一次代码。但是，如果您将它嵌入到每个页面中，则浏览器每次都必须重新加载所有内容。

为了更容易维护、代码清晰和缓存速度，我认为你应该始终将这些与 HTML/PHP 分开。