黑马程序员技术交流社区

标题: todolist案例的功能分析 [打印本页]

---

作者: 众生    时间: 2019-6-21 13:55
标题: todolist案例的功能分析
【案例的实现步骤】
        1-效果分析【需求分析】
        2-功能模块的魔化【功能分析】--实现步骤想清楚
        3-按照你琢磨的步骤，去写代码

        // [{title:'吃火锅',done:false}， 代办的事项2，代办的事项3，];
【todolist案例的功能分析】
        【1-回车模块
        /*
            1）获取内容
            2）把内容组装成一个代办事项 【数组】
            3）代办事项保存到浏览器中【字符串】【把数组转成字符串，再存储】
                ** 浏览器中可能有数据，也可能没有数据

                第1，先从浏览器中获取数据（有 -追加、没有--添加）
                    空数组 或者 有数据的数组
                第2，数据（对象{title:'',done:false}）添加到数组中
                第3，把数组变成字符串，存储到浏览器中--调用存储数据的函数
            4）从浏览器中取出代办事项，渲染到页面
                数组    ----》页面的 标签
                    遍历数组   创建标签  添加标签
         */

        【2-删除

        /*
            1）使用On()方法，给a注册单击事件
            2）事件处理函数中
                1-从浏览器获取数据【数组】
                2-获取当前a标签上的自定义属性-索引号【渲染数据时，每个a自定义一个属性，记录数据的索引】
                3-把数组中对应索引号的数据删除--数组对象的方法
                4-把数组重新保存到浏览器
                5-重新渲染数据
        
        */
                【3-勾选复选框
        /*
            1）使用on()方法，给input注册单击事件
            2）事件处理函数中
                1-从浏览器获取数据【数组】
                2-获取索引号（从当前input的兄弟a上面获取）
                3-修改数组中对应元素的done属性的值 【当前input的checked属性的值】
                4-把数组重新保存到浏览器
                5-重新渲染数据
                    【渲染函数要做修改：判断done的值，
                        true就把li添加到ul中，
                        false就把li添加到ol中
                    】
        
        */

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2