JavaScript新手求助：如何在.js文件中正确声明SweetAlert？

核心问题分析 #

你当前的问题主要有两个：

• 混淆了SweetAlert和SweetAlert2的API与资源包，两者并非同一个库，调用方式存在差异
• 脚本加载顺序或时机错误，导致调用时swal/Swal对象未完成初始化

正确实现步骤 #

1. 选择并统一使用一个版本的SweetAlert

不要混合使用不同版本的资源，以下两种方案二选一：

方案A：使用SweetAlert2（推荐，功能更丰富）

在HTML的<head>标签中引入官方资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

调用方式：SweetAlert2的标准API是Swal.fire()，而非swal()，修正你的调用代码：

// 替换原swal调用语句
Swal.fire("提示", dt.text, "success");

方案B：使用原始SweetAlert

在HTML的<head>标签中引入对应资源：

<link rel="stylesheet" href="https://unpkg.com/sweetalert/dist/sweetalert.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

调用方式：原始SweetAlert支持swal()语法，你现有调用代码可直接使用，但需确保引入的资源与调用API匹配。

2. 确保脚本加载顺序

无论选择哪个版本，都要先引入SweetAlert的脚本和样式，再引入你的自定义.js文件，或者把你的代码放在页面底部（</body>标签前），确保执行时swal/Swal对象已经存在。

示例HTML结构：

<!DOCTYPE html>
<html>
<head>
    <!-- 先引入SweetAlert资源 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
    
    <!-- 再引入自定义脚本 -->
    <script src="你的脚本文件.js"></script>
</body>
</html>

3. 动态加载脚本的正确写法（若必须使用动态加载）

动态创建的脚本是异步加载的，直接调用会找不到对象，需要监听加载完成事件：

// 加载SweetAlert2脚本
const filerefjs = document.createElement('script');
filerefjs.type = "text/javascript";
filerefjs.src = "https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js";

// 脚本加载完成后再执行调用逻辑
filerefjs.onload = function() {
    Swal.fire("提示", "资源加载成功", "success");
};
document.head.appendChild(filerefjs);

// 同步加载CSS
const filerefcss = document.createElement("link");
filerefcss.rel = "stylesheet";
filerefcss.href = "https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css";
document.head.appendChild(filerefcss);

修正后的完整调用示例 #

以SweetAlert2为例，你的forminit函数修正后：

var dt;

function importTree() {
    dt = JSON.parse('{"type":"multi","text":"First","selected":false,"cellWidth":5,"cellHeight":3,"x1":379,"y1":32,"x2":1021,"y2":72,"children":{"yes":{"type":"multi","text":"Second","cellWidth":3,"cellHeight":2,"x1":193,"y1":104,"x2":649,"y2":144,"selected":false,"children":{"A":{"type":"terminal","text":"A","cellWidth":1,"cellHeight":1,"x1":8,"y1":176,"x2":278,"y2":216,"selected":false},"B":{"type":"terminal","text":"B","cellWidth":1,"cellHeight":1,"x1":286,"y1":176,"x2":556,"y2":216,"selected":false},"otherwise":{"type":"terminal","text":"C","cellWidth":1,"cellHeight":1,"x1":564,"y1":176,"x2":834,"y2":216,"selected":false}}},"no":{"type":"multi","text":"Third","cellWidth":2,"cellHeight":2,"x1":935,"y1":104,"x2":1298,"y2":144,"selected":false,"children":{"yes":{"type":"terminal","text":"D","cellWidth":1,"cellHeight":1,"x1":842,"y1":176,"x2":1113,"y2":216,"selected":false},"no":{"type":"terminal","text":"E","cellWidth":1,"cellHeight":1,"x1":1119,"y1":176,"x2":1390,"y2":216,"selected":true}}}}}');
    return dt;
}

function forminit() {
    dt = importTree();

    if (dt.type == "terminal") {
        // 使用SweetAlert2的正确调用方式
        Swal.fire("You can use", dt.text, "success");
        return;
    } else {
        generateForm(dt);
    }
}

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