es5 prototype、es6 class 实现课程添加demo

最新推荐文章于 2023-09-02 23:44:12 发布

炉火纯青-旺

最新推荐文章于 2023-09-02 23:44:12 发布

阅读量166

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34870529/article/details/106840341

版权

js 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

1：index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <title>课程列表</title>
    <style>
        .error,
        .success {
            color: #fff;
            text-align: center;
            padding: 5px;
            margin: 5px 0px 15px 0px;
        }

        .error {
            background: red;
        }

        .success {
            background: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="text-center">添加课程</h1>
        <form id="course-form">
            <div class="form-group">
                <label for="title">课程名称</label>
                <input type="text" id="title" class="form-control">
            </div>
            <div class="form-group">
                <label for="link">课程链接</label>
                <input type="text" id="link" class="form-control">
            </div>
            <div class="form-group">
                <label for="isbn">课程单号</label>
                <input type="text" id="isbn" class="form-control">
            </div>
            <div>
                <input type="submit" value="提交" class="btn btn-block btn-primary">
            </div>
        </form>
        <table class="table mt-4">
            <thead>
                <tr>
                    <th>课程名称</th>
                    <th>课程链接</th>
                    <th>课程单号</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="course-list">

            </tbody>
        </table>
    </div>

    <script src="es6.js"></script>
</body>

</html>

2：es5.js

// 课程构造函数
function Course(title, link, isbn) {
    this.title = title;
    this.link = link;
    this.isbn = isbn;
}

// UI 构造函数
function UI() {}

// UI 添加课程方法
UI.prototype.addCourseToList = function (course) {
    const list = document.getElementById("course-list");
    const row = document.createElement("tr");
    row.innerHTML = `
    <td>${course.title}</td>
    <td><a href="${course.link}">查看</a></td>
    <td>${course.isbn}</td>
    <td><a href="#" class="delete">×</a></td>
    `
    list.appendChild(row);
}

// UI 弹框提醒方法
UI.prototype.showAlert = function (message, className) {
    // 创建div
    const div = document.createElement("div");
    // 添加类
    div.className = `alert ${className}`;
    // 添加文本
    div.appendChild(document.createTextNode(message));
    // 获取父级元素
    const container = document.querySelector(".container");
    // 获取表单元素
    const form = document.querySelector("#course-form");
    // 插入DOM
    container.insertBefore(div, form);
    // 添加定时器 两秒后移除div
    setTimeout(function () {
        document.querySelector(".alert").remove();
    }, 2000);
}

// UI 清除表单
UI.prototype.clearFields = function () {
    document.getElementById("title").value = "";
    document.getElementById("link").value = "";
    document.getElementById("isbn").value = "";
}

// UI 删除表格元素方法
UI.prototype.deleteCourse = function (target, ui) {
    if (target.className === "delete") {
        target.parentElement.parentElement.remove();
    }
    ui.showAlert("删除成功！", "success");
}




// 表单添加submit事件
document.getElementById("course-form").addEventListener("submit", function (e) {
    // 阻止默认事件
    e.preventDefault();
    // 获取表单内容
    const title = document.getElementById("title").value,
        link = document.getElementById("link").value,
        isbn = document.getElementById("isbn").value;

    // 实例化Course
    const course = new Course(title, link, isbn);

    // 实例化UI
    const ui = new UI();

    // 校验
    if (title === "" || link === "" || isbn === "") {
        // 弹框提醒
        ui.showAlert("请将表单内容填写完整！", "error");
    } else {
        // 添加课程
        ui.addCourseToList(course);
        // 弹框提醒
        ui.showAlert("添加成功！", "success");
        // 清空表单
        ui.clearFields();
    }
});

// 表格添加click事件
document.getElementById("course-list").addEventListener("click", function (e) {
    // 初始化ui
    const ui = new UI();

    // 删除表单元素
    ui.deleteCourse(e.target, ui);
});

3：es6.js

// 课程类
class Course {
    constructor(title, link, isbn) {
        this.title = title;
        this.link = link;
        this.isbn = isbn;
    }
}

// UI类
class UI {
    // UI 添加课程方法
    addCourseToList(course) {
        const list = document.getElementById("course-list");
        const row = document.createElement("tr");
        row.innerHTML = `
    <td>${course.title}</td>
    <td><a href="${course.link}">查看</a></td>
    <td>${course.isbn}</td>
    <td><a href="#" class="delete">×</a></td>
    `
        list.appendChild(row);
    }

    // UI 弹框提醒方法
    showAlert(message, className) {
        // 创建div
        const div = document.createElement("div");
        // 添加类
        div.className = `alert ${className}`;
        // 添加文本
        div.appendChild(document.createTextNode(message));
        // 获取父级元素
        const container = document.querySelector(".container");
        // 获取表单元素
        const form = document.querySelector("#course-form");
        // 插入DOM
        container.insertBefore(div, form);
        // 添加定时器 两秒后移除div
        setTimeout(function () {
            document.querySelector(".alert").remove();
        }, 2000);
    }

    // UI 清除表单
    clearFields() {
        document.getElementById("title").value = "";
        document.getElementById("link").value = "";
        document.getElementById("isbn").value = "";
    }

    // UI 删除表格元素方法
    deleteCourse(target, ui) {
        if (target.className === "delete") {
            target.parentElement.parentElement.remove();
        }
        ui.showAlert("删除成功！", "success");
    }
}

// 缓存类
class Store {
    // 取出缓存
    static getCourse() {
        let courses;

        if (localStorage.getItem("courses") === null) {
            courses = [];
        } else {
            courses = JSON.parse(localStorage.getItem("courses"));
        }

        return courses;
    }

    // 展示缓存数据
    static displayCourses() {
        const courses = Store.getCourse();
        courses.forEach(course => {
            const ui = new UI();
            ui.addCourseToList(course);
        });
    }

    // 存入缓存
    static addCourse(course) {
        const courses = Store.getCourse(0);
        courses.push(course);
        localStorage.setItem("courses", JSON.stringify(courses));
    }

    // 删除缓存
    static reoveCourse(isbn) {
        const courses = Store.getCourse();
        courses.forEach((course, index) => {
            if (course.isbn === isbn) {
                courses.splice(index, 1);
            }
        });
        localStorage.setItem("courses", JSON.stringify(courses));
    }
}



// DOM 加载事件
document.addEventListener("DOMContentLoaded", Store.displayCourses);


// 表单添加submit事件
document.getElementById("course-form").addEventListener("submit", (e) => {
    // 阻止默认事件
    e.preventDefault();
    // 获取表单内容
    const title = document.getElementById("title").value,
        link = document.getElementById("link").value,
        isbn = document.getElementById("isbn").value;

    // 实例化Course
    const course = new Course(title, link, isbn);

    // 实例化UI
    const ui = new UI();

    // 校验
    if (title === "" || link === "" || isbn === "") {
        // 弹框提醒
        ui.showAlert("请将表单内容填写完整！", "error");
    } else {
        // 添加课程
        ui.addCourseToList(course);
        // 添加缓存
        Store.addCourse(course);
        // 弹框提醒
        ui.showAlert("添加成功！", "success");
        // 清空表单
        ui.clearFields();
    }
});

// 表格添加click事件
document.getElementById("course-list").addEventListener("click", (e) => {
    // 初始化ui
    const ui = new UI();

    // 删除表单元素
    ui.deleteCourse(e.target, ui);

    // 删除缓存
    const isbn = e.target.parentElement.previousElementSibling.textContent;
    Store.reoveCourse(isbn);
});

4：效果展示

炉火纯青-旺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es5 prototype、es6 class 实现课程添加demo

1：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstr
复制链接

扫一扫

专栏目录