# todo

**Repository Path**: js-class/todo

## Basic Information

- **Project Name**: todo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[接口文档](https://gitee.com/js-class/todo/blob/master/api.md)

## 前置知识点

### find
+ 查找到数组中的某一项

需求：查找到_id值为3的这一项，并且修改completed的值为true

思路一：

```js
var taskAry = [
  {_id: 1, title:'吃饭',completed:false},
  {_id: 2, title:'睡觉',completed:true},
  {_id: 3, title:'打豆豆',completed:false},
  {_id: 4, title:'写作业',completed:false},
  {_id: 5, title:'复习',completed:false},
];

for(var i=0;i<taskAry.length;i++){
  if(taskAry[i]._id == 3){
    taskAry[i].completed = true;
    break;//中止循环
  }
}
```

思路二：

```js
var taskAry = [
  {_id: 1, title:'吃饭',completed:false},
  {_id: 2, title:'睡觉',completed:true},
  {_id: 3, title:'打豆豆',completed:false},
  {_id: 4, title:'写作业',completed:false},
  {_id: 5, title:'复习',completed:false},
];
var item = taskAry.find(item=>item._id == 3);
item.completed = true;
```

### findIndex
+ 查找到数组中符合某条件的某一项对应索引值

需求：查找到_id值为3的这一项并删除这一项

思路一：
```js
var taskAry = [
  {_id: 1, title:'吃饭',completed:false},
  {_id: 2, title:'睡觉',completed:true},
  {_id: 3, title:'打豆豆',completed:false},
  {_id: 4, title:'写作业',completed:false},
  {_id: 5, title:'复习',completed:false},
];

for(var i=0;i<taskAry.length;i++){
  if(taskAry[i]._id == 3){
    taskAry.splice(i,1);
    break;//中止循环
  }
}
```

思路二：


```js
var taskAry = [
  {_id: 1, title:'吃饭',completed:false},
  {_id: 2, title:'睡觉',completed:true},
  {_id: 3, title:'打豆豆',completed:false},
  {_id: 4, title:'写作业',completed:false},
  {_id: 5, title:'复习',completed:false},
];

var index = taskAry.findIndex(item=>item._id == 3);
taskAry.splice(index,1);
```

### filter
+ 对一个数组进行过滤

需求：统计所有未完成的任务数量

```js
var taskAry = [
  {_id: 1, title:'吃饭',completed:false},
  {_id: 2, title:'睡觉',completed:true},
  {_id: 3, title:'打豆豆',completed:false},
  {_id: 4, title:'写作业',completed:false},
  {_id: 5, title:'复习',completed:false},
];
var total = taskAry.filter(item=>item.completed==false).length;
```

## 模板解析

1. completed类名的作用

2. editing类名的作用

## 制作思路

### 实现任务列表展示功能

### 实现任务添加功能

### 实现任务删除功能

### 更改任务状态

### 修改任务名称

### 计算未完成任务数量

### ajax全局事件及nProgress插件
- 先讲nprogress的作用是什么
- 接着再理解一下每一个ajax放的话好不好
- 用ajaxStart,ajaxCompleted事件进行优化一下

```js
$(document).ajaxStart(function(){
  NProgress.start();
});

$(document).ajaxComplete(function(){
  NProgress.done();
})
```

### 扩展：清除所有已完成

```js
//清除已完成
$('.clear-completed').on('click',function(){
  $.ajax({
    type:'get',//get或post
    url:'/todo/clearTask',//请求的地址
    success:function(result){//成功的回调函数
      // console.log(result)
      if(result.deletedCount > 0){
        taskAry = taskAry.filter(item=>item.completed == false);
        render();
      }
    }
  })
})
```

### 扩展：未完成、已完成、全部的切换效果
1. 理解hash就是锚点如何获取值
2. 修改render函数，实现根据不同的hash值，渲染不同的数据
3. 当点击a标签的时候，不生效，因为页面没有跳转，所以代码不会重新执行
4. 介绍onhashchange事件


```js
window.onhashchange = function(){
  render();
}

function render(){
  var tasks = [];
  var current = location.hash;
  switch(current){
    case '#/': 
      tasks = taskAry;
      $('.filters a').removeClass('selected');
      $('.filters a:eq(0)').addClass('selected');
      break;
    case '#/active': 
      $('.filters a').removeClass('selected');
      $('.filters a:eq(1)').addClass('selected');
      tasks = taskAry.filter(item=>item.completed == false);
      break;
    case '#/completed': 
      $('.filters a').removeClass('selected');
      $('.filters a:eq(2)').addClass('selected');
      tasks = taskAry.filter(item=>item.completed == true);
      break;
  }
  var html = template('tpl', { tasks: tasks, current: current });
  taskBox.html(html);
  //计算未完成的任务的数量
  $('.todo-count strong').html(taskAry.filter(item=>item.completed==false).length)
}
```