代码结构梳理：如何在HTML中引入JS、PHP等类型的独立外部文件

完全可以通过引入独立文件的方式拆分不同类型代码，具体实现方法如下：

JS代码拆分 #

将你原本写在HTML中的JS代码全部复制到独立的.js后缀文件中（例如命名为main.js），再在原JS代码位置用script标签引入即可：

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

补充说明：如果希望JS加载不阻塞HTML解析，可添加defer属性，写为<script src="./main.js" defer></script>

PHP代码拆分 #

PHP为服务端执行语言，你需要先确认主文件后缀为.php（保证服务端能解析PHP语法），之后将原HTML中的PHP代码全部复制到独立的.php后缀文件中（例如命名为common.php），再在原PHP代码位置用PHP引入语句引入即可。
常用引入语句区别：

• 引入文件为必需项，缺失会导致程序终止运行：使用require './common.php' 或 require_once './common.php'（后者会自动避免重复引入同一文件）
• 引入文件为非必需项，缺失不影响主程序运行：使用include './common.php' 或 include_once './common.php'

拆分后完整示例 #

主文件index.php代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 引入独立JS文件 -->
   <script src="./main.js"></script>
   <!-- 引入独立PHP文件 -->
   <?php include './common.php'; ?>
</body>
</html>

注意事项 #

• 文件路径需根据你的实际目录结构调整，相对路径要和文件存放的真实位置对应
• 拆分后的PHP代码运行效果和直接写在主文件中完全一致，原有变量传递、返回值逻辑不受影响

内容的提问来源于stack exchange，提问作者Team BODZEN