前端开发的玄学之开发的意识流——模块开发（三）怎样开发前端开发的玄学之开发的意识流——前言 - 掘金 (juejin.c

第二部分模块开发

3. 怎样开发

尽管我们对开发流程和时间评估有着深刻的理解，这些理论在现实工作中往往难以完全落地。本文将探讨如何在紧张的工作环境中，依然保持高效和高质量的前端开发。

在前端开发中，我们经常面临来自客户、产品经理和项目经理的压力，他们可能并不完全理解前端工作的复杂性和所需的时间。因此，我们需要找到一种方法，既能满足项目的时间要求，又能保持代码的质量和开发效率。

工作中，我面临一些问题：

前端工作细节开发多。架构师或 CTO 等角色通常关注流程和提出解决方案，但在细节层面很少提供最佳实践。
大多数书籍讲述的是高屋建瓴的理论或者某一个技术细节，但在实际前端开发中，往往难以应用。
项目缺乏设计：很多项目缺乏文档、流程和上下文，开发人员各自为战，缺乏统一的实现方式。

这些问题本文可能无法给出明确的回答，只是“想一想”。

本文主要参考了维基百科和我之前阅读的书籍。有些概念的产生都是由非常“久远”的年代开始的，是基于计算机的运行方式提出的，所以本文的理解都是本人最近十年，从高级语言层面来得到的。

我会先列举常见的编程思想，然后再给出实现路径。

常见编程思想

这里罗列几个常见的，我经常在项目中提到的编程思想：

命令式编程（Imperative Programming） ：强调通过编写明确的指令来告诉计算机如何执行任务，关注计算机执行的步骤和顺序。
声明式编程（Declarative Programming） ：强调描述问题的目标状态，而不是明确指定如何达到目标，关注问题的描述和要求。

基本上，我们在工作中使用的方式大多是声明式的。即使在框架中说自己是“声明式”框架，也只是做了更多的、更易用的封装而已。它最开始的划分是由计算机硬件决定的，而不是由我们现在的上层编程语言决定的。

对于“命令”的定义上来讲，let sum = a + b 可以是命令，let sum = () => a + b 也可以是命> 令。所以，我们可以断定，如果不对原生方法进行重新制作，那么，就是声明式的编程方法。

然而，在实际情况下，我认为命令式编程仍然有其价值，但应注意命令的原子性——即基本操作的划分。例如，> > 如果你觉得 JavaScript 的 sort 效率低，那么你可以用“命令式编程”，显示地指定 sort 函数。

函数式编程（Functional Programming） ：将计算视为数学函数的评估，避免改变状态和可变数据，强调纯函数、不可变性和高阶函数。

值的常量化，某个符号对应的值是永远不变的。
对程序中的赋值做了限制和规范。
函数式编程是现在的发展方向。

面向对象编程（Object-Oriented Programming，OOP） ：将问题抽象为对象，对象包含数据和对数据的操作，强调封装、继承和多态。

将变量放入堆中存储，形成类及构造函数。

对程序控制权的间接转移做出了限制和规范。

前端开发中，大家可以想想 class 是做什么的。在制作后台界面时，我基本上没有用到 class。个人而言，我“精通”面向对象编程。

事件驱动编程（Event-Driven Programming） ：通过定义事件和事件处理程序来组织代码，响应用户输入或系统事件。
并发编程（Concurrent Programming） ：处理多个任务同时执行的编程思想，包括多线程、多进程和异步编程。
响应式编程（Reactive Programming） ：通过定义数据流和数据变化时的响应方式来处理事件和数据。
逻辑式编程（Logic Programming） ：强调描述问题的逻辑关系和约束条件，例如 Prolog。
模块化编程（Modular Programming） ：将程序分解为小的独立模块，每个模块负责特定的功能，强调模块的独立性和可重用性。
泛型编程（Generic Programming） ：编写与数据类型无关的通用代码，增加代码的灵活性和重用性。
元编程（Metaprogramming） ：编写能够操作或生成其他程序的代码，通常与宏、反射等概念相关。
面向切面编程（Aspect-Oriented Programming，AOP） ：将程序的关注点（concern）从主要业务逻辑中分离出来，例如日志、事务管理。

知道了上面的常见编程思想，我们来说一下后面的。

常见的开发方式

每个人划分的逻辑也不一样，无所谓，你想怎么开发都可以，现在只需关注我的思路。

总结出来有以下几种方式：

自上而下

第一步先构建整体，完成树结构。
第二步，从最外层“页面”开始，一层一层填充静态数据。
第三步，完善交互，实现线条的逻辑。

自下而上

第一步，先绘制好整体树结构。
第二步，从最下层开始，填充数据直到最上层。
第三步，完善交互。

意识流

先构建一个残次的树。
一边填充数据，一边完善树，一边完成交互。
反复执行第二步操作。

当然，还有别的开发流程，这里不一一列举。

说了这么多，只是想有一个固化的设计方式，来帮助前端开发梳理逻辑。具体到开发上，这里我们用一个小原则：

设计优先

前端开发者很少编写设计文档，我自己开始这样做的时间也不长。我认为，出现这种现象的原因有以下几点：

认为实现 UI 简单，不需要设计。
交互细节难以描述，甚至通过各种绘图工具都非常难绘制。
“反事务”。

模板如下：

目的与背景，实现业务需求，实现前端健壮。
UI 结构。通过思维导图绘制一颗树，每个节点都是一个组件或 div。
交互逻辑。通过一个图，类似状态机，却不是状态机。

- 首先定义状态。
- 定义状态之间的转移，在我们的图中，A->B 可能有多种事件引起，需要绘制多条线。
- 定义引起转移的事件。

接口定义。

- 定义前端内部的接口，props，event，expose。
- 定义服务器交互的接口。

补充说明。

这个模版是一个很好的实践

结论

上面没有提到 CSS 和 HTML 相关内容，因为我很少遇到特别难处理的问题。

通过面向接口编程的思想，对项目进行模块化分割，将模块划分成一个个组件，全程牢记函数式编程模式和声明式编程。实现路径包括自上而下、自下而上和意识流三种方式，有个“默念”的原则：设计优先。

前端开发的玄学之开发的意识流——模块开发（三）怎样开发

第二部分 模块开发