主页
TodoList
作者: splub

今天hr让我实现一个todolist,我用30多行js代码实现了这个功能,这实际上就是redux的原理(尽管我没有看过redux的源码),也可以再精简一下,使之变为一个迭代器,实际上可以使用纯函数来实现,但那样会多出几个函数,为了代码更加精简,在这过程中我使用了函数式语言的赋值特性,用于在函数中保存变量。

//created by linshuai

//运行方法: node TodoListWithClosure / 或者浏览器控制台粘贴
//todolist
//task
/**
* 任务:字符串
* 完成状态:布尔值
*
*/


/**
*
* state//状态
* disptch //函数,接收操作对象
* reducer //计算过程
*/


//创建state
function createStore(reducer ,state ){
    var store = state;
    function dispatch(action){
        store = reducer(store, action)
        console.log(`每次提交后的数据为:${store.map((v)=>console.log(v))}`)
}
    return dispatch
}


/**
*
* action类型:添加, 删除, 修改状态(新数据)
*/


function reduce(state, action){
    switch(action.type){
        case 'ADD': return [...state, ...[action.data]];
        case 'DELETE': {
            let temp = [];
            state.map((element)=>{
                if(element.todo !== action.data.todo){
                    temp.push(element)
                }
           })
        return temp;
        };
        case "CHANGE": {
            let temp = [];
            state.map((element)=>{
                if(element.todo === action.data.todo){
                        temp.push(action.newData)
                    } else{
                        temp.push(element)
                    }
                })
            return temp;
           }
        default: return state
    }
}
//示例代码
var task = { completed: false, todo: '买菜'}
var dispatch = createStore(reduce, [])//dipatch of state


dispatch({type: 'ADD', data: task })
dispatch({type: 'ADD', data: {completed: false, todo: '修仙'}})
dispatch({type: 'CHANGE', data: task, newData: { completed: true, todo: "买肉"} })
dispatch({type: 'ADD', data: {completed: true, todo: '谢谢体验'}})
发表于:2019年3月22日 下午 1:21:21
更新于:2019年3月22日 下午 2:12:49