函数式编程更优雅实现to-do list

本文为Electron+Vue3开发桌面端软件系列文章第三篇

通过本文，你将获得：

1. 函数式编程关键概念
2. 如何使用函数式编程

今日清单这款软件，如果剔除了Electron带来的功能，其核心业务TodoList组件实现就是通过Vue3完成的。而函数式编程属于JS高级范畴知识，也是高级前端面试绕不过去的考点。有道是，知其然，知其所以然。

函数式编程

JS函数式编程是一种编程范式，强调的是使用纯函数和不可变数据来构建应用程序。其核心思想是把计算作为函数应用的连续组合，而不是通过改变状态和执行可变的命令式代码。

在函数式编程中，函数被视为一等公民，可以作为参数传递给其他函数，也可以作为返回值返回。其目标是通过组合和转换函数来构建程序，而不是通过修改共享的状态。

函数式编程通常涉及到的一些关键概念：

1. 纯函数：在给定相同的输入时，总是产生相同的输出，并且没有副作用的函数。纯函数不会改变传入的参数或外部状态，它只依赖于输入并返回一个新的输出。
2. 副作用：函数或表达式执行过程中对除了返回值之外的程序状态进行的可观察改变。其包括但不限于以下情况：

1. 1. 修改外部变量或状态：例如全局变量、类的属性或模块的状态。
   2. I/O 操作：函数可能会执行输入输出操作，例如读写文件、发送网络请求、修改数据库等。
   3. 引发异常：函数可能会引发异常，导致程序的正常流程被中断。
   4. 控制流程的改变：例如使用跳转语句（break、continue、return）或抛出异常来改变程序的执行路径。

3. 不可变数据：数据一旦创建后就不能被修改。不可变数据有助于减少副作用和意外的数据更改，并且可以简化并行处理和状态管理。
4. 函数组合：把函数链接在一起，将一个函数的输出作为另一个函数的输入。
5. 高阶函数：接受一个或多个函数作为参数，或者返回一个函数作为结果的函数。

纯函数

纯函数示例：计算两个数字的和

function add(a, b) {
  return a + b;
}

// 调用纯函数
const result = add(3, 5);
console.log(result); // 输出 8

上面例子中add函数符合纯函数特点。无论何时调用 add(3, 5)，它都会返回 8，并且不会产生任何副作用。

不可变数据

不可变数据示例：添加新元素到数组

function addElement(arr, element) {
  // 使用扩展运算符创建一个新的数组，将原始数组和新元素连接起来
  return [...arr, element];
}
// 创建一个原始数组
const originalArray = [1, 2, 3];
// 调用函数添加新元素到数组，得到一个新的数组
const newArray = addElement(originalArray, 4);
console.log(originalArray); // 输出 [1, 2, 3]
console.log(newArray); // 输出 [1, 2, 3, 4]

在上面例子中，addElement函数接受一个数组 arr 和一个新元素 element。它通过使用扩展运算符 ... 创建一个新数组，将原始数组和新元素连接起来，返回一个新的数组。原始数组保持不变，而函数返回一个新的数组，没有改变原始数组的状态。

这里就使用不可变的数据结构来处理数组。通过创建新的数组，而不是修改原始数组，保持了原始数组的不可变性。

函数组合

以今日清单中文件处理为示例：当获取到设置的目录下所有文件名列表数据后，过滤出txt文件，处理回显数据列表，按照时间由近到远排序。

需要逐步完成筛选，信息重组，排序三块逻辑。

const fileNames = ['2023-10-14.txt','2023-10-15.txt','2023-10-16.txt','2023-10-17.txt']

const filterTxt = file =>  file.split('.')[1] === 'txt'
const fileInfo = (file) => {
  return {
    name: file,
    code: dayjs(file.split('.')[0]).valueOf()
  }
}
const fileSort = (a, b) => b.code - a.code

const list = fileNames.filter(filterTxt).map(fileInfo).sort(fileSort)
console.log(list)

上面例子用到了dayjs()这个库，将时间转成时间戳方便排序使用，可以在dayjs官网的控制台中测试该示例，dayjs官网中已经将dayjs方法挂载在window上。

高阶函数

高阶函数示例：封装日志函数，在结果输出的前后打印日志。

function withLogging(fn) {
  return function (...args) {
    console.log('Before function call');
    const result = fn(...args);
    console.log('After function call');
    return result;
  };
}
function greet(name) {
  console.log(`Hello, ${name}!`);
}
const wrappedGreet = withLogging(greet);
wrappedGreet('John');

输出结果如下：

高阶函数可以用于实现许多有用的编程模式和技术，例如：

1. 回调函数：将一个函数作为参数传递给另一个函数，在适当的时候调用该函数，用于实现异步操作和事件处理等场景。
2. 函数组合：将多个函数组合在一起，形成一个新的函数，以实现复杂的逻辑或数据转换。
3. 函数柯里化：通过固定部分参数创建一个新的函数，用于生成具有特定功能的函数。
4. 迭代和遍历：使用高阶函数（如map、filter、reduce等）对数组操作和转换，避免显式的循环结构。
5. 函数装饰器：通过包装现有函数，添加额外的功能或修改其行为。

这里具体介绍一下函数柯里化。

函数柯里化的特点是每次只接受一个参数，并返回一个新的函数，等待下一个参数的传入。

一个常见的例子是创建可复用的函数模板。例如有一个简单的加法函数：

function add(a, b) {
  return a + b;
}

假设在多个地方需要使用相同的加数，例如 2。使用函数柯里化就可以创建一个新的函数，将 2 作为固定的参数，从而创建一个可复用的加法函数。

function curry(fn, ...fixedArgs) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...fixedArgs, ...args);
    } else {
      return curried(...args);
    }
  };
}

const add2 = curry(add, 2);
console.log(add2(3)); // 输出 5
console.log(add2(5)); // 输出 7

在上面示例中，curry函数将 add 函数进行柯里化，并传递 2 作为固定参数。这样就得到了一个新的函数 add2，它只接受一个参数，并将其与固定值 2 相加。现在便可以重复使用 add2，每次传递不同的参数，而无需再次传递 2。

函数柯里化的优势在于它提供了更大的灵活性和可复用性。通过将函数的部分参数固定下来，可以创建更具特定性的函数，并在需要时重复使用它们。这样可以减少代码重复，提高代码的可读性和可维护性。

TodoList 组件

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
    <input v-model="newTodoText" type="text" placeholder="Enter a new todo" />
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useTodoStore } from '../stores/todoStore'

export default defineComponent({
  setup() {
    const todoStore = useTodoStore()

    const todos = todoStore.todos
    const newTodoText = ref('')

    const addTodo = () => {
      if (newTodoText.value.trim() !== '') {
        const newTodo = {
          id: Date.now(),
          text: newTodoText.value.trim()
        }
        todoStore.addTodo(newTodo)
        newTodoText.value = ''
      }
    }

    const deleteTodo = (id) => {
      todoStore.deleteTodo(id)
    }

    return {
      todos,
      newTodoText,
      addTodo,
      deleteTodo
    }
  }
})
</script>

在上面的代码中，addTodo函数和 deleteTodo函数通过调用 pinia来处理新增和删除 Todo 的操作。这样可以保持状态的不可变性，遵循函数式编程的原则。

再给出todoStore中处理todos的相关代码：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTodoStore = defineStore('todo', () => {
  const todos = ref([])

  function addTodo(todo) {
    todos.value.push(todo)
  }
  function deleteTodo(id) {
    const index = todos.value.findIndex((todo) => todo.id === id)
    todos.value.splice(index, 1)
  }
  return {
    todos,
    addTodo,
    deleteTodo
  }
})

虽然函数式编程在TodoList中的应用程度有限，但可以使用 pinia 的状态管理机制结合纯函数和不可变数据的概念，来实现更复杂的状态管理和逻辑处理。这样可以使代码更易于维护、测试和扩展。

也正因如此，因为待办清单这样的业务场景太简单以致不能表现出函数式编程的魅力和便捷。今日清单的源码实现中，并没有采用函数式编程来实现TodoList。个人觉得没有必要为了使用而使用，在实际工作开发中最终的目的是为了更好地解决问题。这里只是通过TodoList组件这样落地的实践更加贴合实际开发来感受函数式编程。