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

[hblevins]

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

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

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

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;
}

[37Y37]

先完成，后完美

[Richex]

先有一个整体的框架，然后完善细节，核心还是多练，各个知识点都掌握熟练。用 Vue 写了个 demo 可以看看
https://stackblitz.com/edit/vitejs-vite-p6cfhu?file=src%2FApp.vue

[akira]

先自己做一遍，然后看下别人怎么实现的。
编程前期就是多读代码多实践，
积累到后面就简单很多了

[liuzhedash]

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

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

[aguesuka]

可以看下 react 哲学

https://zh-hans.react.dev/learn/thinking-in-react

[jones2000]

早个地方上班， 工期压在这里， 不管写不写的下去， 到点都要完工。 先把东西做出来，上线交付，后续在优化。

[weijundong]


[chirsgod]

我的想法很简单，好代码是改出来的。先实现再优化，经过优化寻找自己一开始的不足，然后吸取教训，下一次努力写的更完美些，然后再优化。次数多了，一开始写的就会更准确了。