实现一个功能，代码里的逻辑需要思考到什么程度？

有时候实现一个具体的功能，写了一半发现写不下去导致半途而废，怎么避免这种情况？

我现在的做法都是实现前只有个大概的方向，代码里的细节是边写边想的，实现不实现的了，要在写的时候才知道。但方向错了后面就都做了无用功。

比如下面这个轮播图的功能，有多个轮播页面，每个页面可以放置多个图标。我的想法可能是这样的，用伪代码表示：

1 、用个数组存储所有的小图标的名称或路径

let iconList = [{"src": "icon1.png"}, {}, ...]

2 、定义一个变量来表示每个轮播页可以放下的小图标的数量

let iconsPerPage = 8;

3 、根据小图标的数量和每页的数量，可以算出需要的轮播页的数量

let pageCount = Math.ceil(iconList.length / 8)

4 、利用循环生成轮播页

for (let i=0; i<pageCount; i++) {
    let page = document.createElement("div");
    ...
}

5 、然后可以在每个轮播页里，循环生成轮播页里的图标

for (let i=0; i<pageCount; i++) {
    for (let j=0; j<iconsPerPage; j++) {
        ...

    }
}

想到这里就结束了。细节是在写代码的过程中边写边想的，至于实现不实现的了，要在写的时候才知道。比如下面这些步骤都是在过程中才想:

计算出当前小图标在数组中的索引
let index = i * iconsPerPage + j 
icon.src = iconsList[index].src

在生成轮播页里的图标时，如果索引超出了数组的长度，就跳出循环
if (index >= icons.length) {
    break;
}

liuzhedash

2023-12-06 10:17:21 +08:00

我的建议是：
1 、抽象出最关键的部分，其实就是数据和数据之间的关系，具体到 OP 的这个例子，就是 N 个分类数据（图标，文字）和它们的位置
2 、做一个最简单的原型代码，比如把图标文字一行一个地显示出来，这样说明代码对分类数据的读取，显示是正常的
3 、在 2 的基础上改进，比如把布局调整成 GridView ，再进一步把多个 GridView 组织起来，让其可以左右切换，然后进一步迭代改进

这个过程中，肯定会有返工的情况，比如发现一开始的思路就错了，或者组件、技术栈完全没选对，这是必经的过程，需要经历这些过程才能积累经验，进而在下一次做出更准确的判断。
代码不是一次想好就写出来的，而更像是种子的发育，各个部分是逐渐分化，积累，发育起来的。