学习todo-list源码📒 真的学会了很多开发实践！-阿里云开发者社区

学习todo-list源码📒 真的学会了很多开发实践！

2023-01-09 327

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 学习todo-list源码📒 真的学会了很多开发实践！

前言

官方示例效果： todomvc.com/examples/re…

拿到这个案例之后你会怎么分析，先暂停3分钟，即便todo-list你已经做过很多次了。

我的第一个版本的todo-list，存在很多问题，例如代码的设计不合理，封装不到位等等，我们看看官方源码是怎么设计的 sandBox

一、代码结构

1.1 DOM结构

todo-list 官方示例中关于html5的标签语义化和结构划分都非常合理。

<section>
  <header></header>
  <section></section>
  <footer></footer>
</section>

1.2 样式结构处理

在处理一些样式的时候，注意功能单一原则， 也就是html结构中不应该去处理css样式，也就是在最佳实践中不使用style内联来处理样式，更推荐使用动态类名来处理。

<li
     v-for="todo in filteredTodos"
     class="todo"
     :key="todo.id"
     :class="{ completed: todo.completed, editing: todo == editedTodo }"
     >

1.3 代码的命名规范

函数名采用驼峰命名规范
类名采用-来进行拼接
描述某个动作的采用的发生与否采用形容词例如 complected 标记是否完成

二、代码设计

从功能出发分析代码设计

2.1 todo-list 的增删改查设计

和我设计的函数不同，官方示例给的函数传入的参数都是一个todo，具体todo的处理方式在函数内部进行。

emoveTodo: function (todo) {
  this.todos.splice(this.todos.indexOf(todo), 1);
}
editTodo: function (todo) {
  this.beforeEditCache = todo.title;
  this.editedTodo = todo;
}
doneEdit: function (todo) {
  if (!this.editedTodo) {
    return;
  }
  this.editedTodo = null;
  todo.title = todo.title.trim();
  if (!todo.title) {
    this.removeTodo(todo);
  }
}

2.2 状态模式下的list展示

todolist的展现存在三个状态 all actived complected

这里官方给的和我写的思路基本一致，设置状态变量state，和filterTodo 展示列表

var filters = {
  all: function (todos) {
    return todos;
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.completed;
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.completed;
    });
  }
}

2.3 本地存储的函数封装

于直接使用localStorage不同的是，示例中的localStorage进行了一次封装，这样有以下几个好处

不需要关注存储/读取数据过程中的一些类型转化
代码的可读性更高，函数之间耦合度更低

var STORAGE_KEY = "todos-vuejs-2.0";
var todoStorage = {
  fetch: function () {
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    todos.forEach(function (todo, index) {
      todo.id = index;
    });
    todoStorage.uid = todos.length;
    return todos;
  },
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
  }
};

2.4 复用功能的实现

关于input框聚焦功能的实现 ---自定义指令

这里扩展两个知识

自定义指令的第一个参数，是所绑定的元素
第二个参数binding.value 是所绑定的数据，这里的做法真的很巧妙

v-todo-focus="todo == editedTodo" // 使用指令 
// 指令实现
directives: {
  "todo-focus": function(el, binding) {
    if (binding.value) {
      el.focus();
    }
  }
}

2.5 localstorage 的存储时机

存储

示例中采用的方法是watch监听todos，每次当todos发生变化的时候就直接存储

watch: {
   todos: {
     handler: function(todos) {
       todoStorage.save(todos);
     },
       deep: true
   }
 },

读取

读取的初始化设置封装在todoStorage当中（特殊情况），而data中只含有读取操作

// app initial state
data: {
  todos: todoStorage.fetch(),
    newTodo: "",
      editedTodo: null,
        visibility: "all"
}

2.5 控制全选 / 全不选

全选全不选这里设计的也很巧妙我们先看dom结构的设计

采用v-model进行双向绑定

<input
       id="toggle-all"
       class="toggle-all"
       type="checkbox"
       v-model="allDone"
       />

勾选或者取消勾选全选按钮都会触发 allDone的setter

// computed  allDone 
get: function() { 
  return this.remaining === 0;
}
set: function(value) {
  this.todos.forEach(function(todo) {
    todo.completed = value;
  });
}

2.6 数据设计

这一栏的话是看开发经验来说的，我的设计基本上也是保持一直

是否完成状态

completed

标记每一个任务

任务名称

title

以前在做todolist的时候设计过另外一个状态，isEdit

这个我将其作为todo的一个属性，用来标记每一个任务是否处于一个修改的状态

这里的做法比我的设计要好

// 只需要一个editedTodo来标记当前处于编辑状态的任务即可
data: {
  editedTodo: null,
},

相对给每一个todo添加isEdit属性来说，这个做法的好处有以下几点

无需维护多个任务处于Edit状态
内存占用（虽然微小，但是细节得注意）

2.7 切换状态的设计

展示列表一共有三个状态， all 、 active、completed

我的做法是设计一个方法去修改状态，而示例中的做法再一次打开的我的眼界

通过a标签的herf属性添加hash值
给window添加上hashchange事件的监听处理函数
每次hash发生改变的时候修改当前的状态

function onHashChange() {
  var visibility = window.location.hash.replace(/#/?/, "");
  if (filters[visibility]) {
    app.visibility = visibility;
  } else {
    window.location.hash = "";
    app.visibility = "all";
  }
}
window.addEventListener("hashchange", onHashChange);
onHashChange();