倒计时计时器组件关联问题：代码报错无法正常显示

开发HTML/JavaScript/CSS倒计时计时器时出现报错，修改script标签type属性为text/javascript未解决问题，以下是问题代码及对应的修复方案：

问题代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Timer</title>
</head>
<body>
    <div class="timer"></div>
    <script src="appCT.js" type="module"></script>
</body>
</html>

Timer.js #

export default class Timer {
    constructor(root){
        console.log(root);
        root.innerHTML = Timer.getHTML();

        this.el = {
            minutes: root.querySelector(".timer__part--minutes");
            seconds: root.querySelector(".timer__part--seconds");
            control: root.querySelector(".timer__btn--control");
            reset: root.querySelector(".timer__btn--reset");
        }

        console.log(this.el);
    }

    static getHTML(){
         return `
        <span class="timer__part timer__part--minutes">00</span>
        <span class="timer__part timer__part">:</span>
        <span class="timer__part timer__part--seconds">00</span>
        <button type="button" class="timer__btn timer__btn--control timer__btn--start">
            <span class="material-icons">play_circle_filled</span>
        </button>
        <button type="button" class="timer__btn timer__btn--reset">
            <span class="material-icons">timer</span>
        </button>` 
    }
}

appCT.js #

import Timer from "Timer.js";

new Timer{
    document.querySelector(".timer");
}

styles.css #

body{
    background: #dddd;
    margin: 24px;
}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__part{
    font-size: 40px;
    font-weight: bold;
}

.timer__btn{
    width: 50px;
    height: 50px;
    margin-left: 16px;
    border-radius: 50%;
    border: none;
    background: gray;
}

.timer__btn--control{
    background: steelblue;
}

.timer__btn--reset{
    background: red;
}

修复方案 #

1. 修正对象字面量分隔符（Timer.js） #

对象属性之间需用逗号,而非分号;，修改this.el部分：

this.el = {
    minutes: root.querySelector(".timer__part--minutes"),
    seconds: root.querySelector(".timer__part--seconds"),
    control: root.querySelector(".timer__btn--control"),
    reset: root.querySelector(".timer__btn--reset")
}

2. 修正类实例化语法（appCT.js） #

实例化类必须使用小括号()传递参数，而非大括号{}：

new Timer(document.querySelector(".timer"));

3. 修正模块导入路径（appCT.js） #

ES模块导入本地文件需使用相对路径，确保正确加载同目录下的Timer.js：

import Timer from "./Timer.js";

4. 优化CSS颜色值（可选） #

#dddd是不完整的十六进制颜色，补全为标准格式避免渲染异常：

body{
    background: #dddddd;
    /* 或简写为 #ddd */
}

内容的提问来源于stack exchange，提问作者Santiago Hernandez