使用原生js实现todolist增删改查，弹框复用

萱萱_

于 2024-07-28 21:29:27 发布

阅读量182

点赞数 8

文章标签： javascript 前端

本文链接：https://blog.csdn.net/ljx666888___/article/details/140755932

版权

手写弹框样式+模块化拆分，实现复用弹框（弹框可随机变换颜色）
首先需要在github上将require.js文件复制到本地：
requirejs/require.js at master · requirejs/requirejs (github.com)

我写的是todolist小案例，最终的效果

文件结构如下：

下面为详细代码：

1.index.html文件：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //css样式，方法一：使用link将css文件引入
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    //我这里使用了方法二，直接在style标签内引入，两种方法都可以
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 630px;
            margin: 30px auto;
        }
        .top {
            margin-bottom: 18px;
        }

        table {
            border-collapse: collapse;
        }

        table tr {
            height: 40px;
            text-align: center;
            border-bottom: 1px dashed #767676;
        }

        table td {
            border-bottom: 1px dashed #767676;
        }
    </style>
</head>

<body>
    //页面结构不多说，相信大家都能看懂
    <div class="container">
        <div class="top">
            <button class="add">添加信息</button>
        </div>
        <div class="main">
            <table width="639px" cellspacing="0">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="tb">
                    <!-- <tr>
                        <td>春娇</td>
                        <td>一年二班</td>
                        <td>19</td>
                        <td>
                            <button class="catch">查看</button>
                            <button class="update">修改</button>
                            <button class="del">删除</button>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
    </div>
    //src里面将github上的require.js引入，在data-main中将自己写的主文件模块引入
    <script src="./js/libs/require.js" data-main="./js/modules/main.js"></script>
</body>

</html>

2.在data.js文件中构建列表初始数据

define([],function(){
    var arr=[
        {
            id:0,
            name:'李雷',
            class:'11',
            age:26,
        },
        {
            id:1,
            name:'赵玉',
            class:'22',
            age:25,
        },
        {
            id:2,
            name:'小蓝',
            class:'33',
            age:18,
        },
        {
            id:3,
            name:'小明',
            class:'44',
            age:22,
        },
    ];
    return arr;
})

3.在render.js中渲染数据

define([],function(){
    //导出一个render函数，接受了两个参数，data是上面创建的初始数据，parentNode是父节点
    return function render(data,parentNode){
        //渲染表格
        var html='';
        for(var i=0;i<data.length;i++){
            html+=`
            <tr>
                <td>${data[i].name}</td>
                <td>${data[i].class}</td>
                <td>${data[i].age}</td>
                <td>
                    <button class="catch" data-id='${data[i].id}'>查看</button>
                    <button class="update" data-id='${data[i].id}'>修改</button>
                    <button class="del" data-id='${data[i].id}'>删除</button>
                </td>
            </tr>
            
            `;
        }
        //将渲染好的表格模版赋值给传进来的父节点parentNode
        parentNode.innerHTML=html;
    }
})

4.因为会涉及到点击事件，所以在ele.js中导出获取单个元素和多个元素的逻辑

define([],function(){
    return{
        //单个元素
        $:function $(s){
            return document.querySelector(s);
        },
        //多个元素
        $$:function $$(s){
            return document.querySelectorAll(s);
        }
    }
})

5.在myAlert.js文件中编写弹框逻辑

define([], function () {
    return function myAlert(options) {
        options = options || {};
        //对象
        var obj = {
            title: '标题信息',
            content: '提示内容',
            sureText: '确定',
            cancText: '取消',
            // alert是一个按钮 ！alert是两个按钮的提示
            type: '!alert',
            // 点击确定按钮的回调函数
            okFun: function () {
                return true;
            },
            //点击取消按钮的回调函数
            canFun: function () {
                return true;
            }
        }
        //合并对象参数配置
        var newObj = Object.assign(obj, options);
        console.log(newObj)
        //动态创建弹窗的结构
        var mask = document.createElement('div');
        mask.className = 'mask';
        mask.innerHTML = `
        <div class="alert">
            <div class="title">${newObj.title}</div>
            <div class="content">${newObj.content}</div>
            <div class='footer'>
                <button class="sure">${newObj.sureText}</button>
                ${newObj.type === 'alert' ? '' : `<button class="cancle">${newObj.cancText}</button>`
            }
            </div>
        </div>
        `;
        document.body.appendChild(mask);

        //动态创建随机颜色
        var color = '#' + Math.random().toString(16).slice(2, 8);

        //动态穿件弹框的样式
        var style = document.createElement('style');
        style.innerHTML = `
        *{
            margin: 0;
            padding: 0;
        }
        .mask{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            position: relative;
            top: 0;
            left: 0;
        }
        
        .alert{
            width: 500px;
            height: 300px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
        }
        
        .title{
            height: 30px;
            line-height: 30px;
            background-color: ${color};
        }
        
        .content{
            height: 240px;
            padding-left: 10px;
            padding-top: 10px;
            box-sizing: border-box;
        }
        
        .footer{
            height:30px;
            line-height: 30px;
            text-align: center;
            background-color: ${color};
        }
        `;
        document.head.appendChild(style);

        //点击确定和取消按钮的逻辑处理
        mask.querySelector('.sure').onclick = function () {
            if (newObj.okFun()) {
                // 删除弹窗
                mask.remove();
            }
        }
        if (newObj.type !== 'alert') {
            mask.querySelector('.cancle').onclick = function () {
                if (newObj.canFun()) {
                    // 删除弹窗
                    mask.remove();
                }
            }
        }
    }
})

6.最后在main.js文件中将上面的文件全部引入

//保存路径
require.config({
    paths: {
        data: './data',
        ele: './ele',
        render: './render',
        myAlert: './myAlert',
    },
})

//导入并使用模块 data ele render  myAlert
require(['data', 'ele', 'render', 'myAlert'], function (data, ele, render, myAlert) {
    //调用render函数渲染页面数据
    render(data, ele.$('.tb'));

    //添加功能
    ele.$('.add').onclick = function () {
        myAlert({
            title: '添加信息',
            content: `
                <div>
                    <label for=''>姓名</label>
                    <input type='text' class='myname'>
                </div>
                <div>
                    <label for=''>班级</label>
                    <input type='text' class='myclass'>
                </div>
                <div>
                    <label for=''>年龄</label>
                    <input type='text' class='myage'>
                </div>
            `,
            okFun: function () {
                //获取三个文本框的值
                var myname = ele.$('.myname').value;
                var myclass = ele.$('.myclass').value;
                var myage = ele.$('.myage').value;
                if (myname === '') {
                    myAlert({
                        content: '姓名不能为空',
                    })
                } else if (myclass === '') {
                    myAlert({
                        content: '班级不能为空',
                    })
                } else if (myage === '') {
                    myAlert({
                        content: '年龄不能为空'
                    })
                } else {
                    //重新创建一个新对象，添加到数据模块中去
                    var obj = {
                        id: data.length,
                        name: myname,
                        class: myclass,
                        age: myage,
                    }
                    data.push(obj);
                    render(data, ele.$('.tb'));
                    return true;
                }
            }
        })
    }

    //实现查看 修改和删除 思路：都通过事件委托的方式给父元素绑定单击事件
    // 事件源是哪个元素在做具体的处理
    ele.$('.tb').onclick = function (e) {
        var e = e || window.event;
        var t = e.target || e.srcElement;
        if (t.nodeName === 'BUTTON') {
            var id = t.getAttribute('data-id') * 1;
            var n;//声明一个变量n 保存当前的id值
            for (var i = 0; i < data.length; i++) {
                if (data[i].id === id) {
                    n = i;
                }
            }
            if (t.className === 'catch') {
                myAlert({
                    title: '查看信息',
                    content: `姓名：${data[n].name} 班级：${data[n].class} 年龄：${data[n].age}`
                })
            } else if (t.className === 'del') {
                myAlert({
                    title: '删除信息',
                    content: '你确定要删除当前项吗？',
                    okFun: function () {
                        data.splice(n, 1)
                        render(data, ele.$('.tb'));
                        return true;
                    }
                })
            } else if (t.className === 'update') {
                myAlert({
                    title: '修改信息',
                    content: `
                    <div>
                        <label for=''>姓名</label>
                        <input type='text' class='newname' value='${data[n].name}'>
                    </div>
                    <div>
                        <label for=''>班级</label>
                        <input type='text' class='newclass' value='${data[n].class}'>
                    </div>
                    <div>
                        <label for=''>年龄</label>
                        <input type='text' class='newage' value='${data[n].age}'>
                    </div>
                    `,
                    okFun: function (){
                        //获取三个文本框的值
                        var newname = ele.$('.newname').value;
                        var newclass = ele.$('.newclass').value;
                        var newage = ele.$('.newage').value;
                        if (newname === '') {
                            myAlert({
                                content: '姓名不能为空',
                            })
                        } else if (newclass === '') {
                            myAlert({
                                content: '班级不能为空',
                            })
                        } else if (newage === '') {
                            myAlert({
                                content: '年龄不能为空'
                            })
                        } else {
                            //把当前操作的对象的字段替换成新数据
                            data[n] = {
                                id: data[n].id,
                                name: newname,
                                class: newclass,
                                age: newage
                            }
                            render(data, ele.$('.tb'));
                            return true;
                        }
                    }
                })
            }

        }
    }
})

通过以上代码，即可实现todolist的增删改查功能，包括手动编写了一个弹框，可以自动改变弹框颜色的效果。