从我的老代码谈起：熟练开发者的思路-先抽象逻辑，再实现功能

翻出多年前写的前端代码同样是实现一个列表的全选/取消全选功能我写的代码和当时看到别人的写法思路截然不同。那时候的我一门心思先把功能跑通而熟练的开发者会先在脑子里把逻辑抽象一遍再动手写代码。两种写法都能实现需求但背后的思考层次差了整整一个阶段。一、先看两段代码我当年的实现 vs 更简洁的实现1. 我的写法面向过程先把功能做出来当年我用原生 JS思路非常直接要全选就写全选要取消就写取消。function checkAll(name) {var el document.getElementsByTagName(input);var len el.length;for(var i0; ilen; i){if((el[i].typecheckbox) (el[i].namename)){el[i].checked true;} } };function clearAll(name) {var el document.getElementsByTagName(input);var len el.length;for(var i0; ilen; i){if((el[i].typecheckbox) (el[i].namename)){el[i].checked false;}}};我的逻辑很朴素- 先把页面上所有 input 都找出来- 循环一遍筛选出 checkbox- 挨个把 checked 设为 true 或 false核心追求功能先实现逻辑看得懂。2. 另一种思路基于状态先抽象再实现别人用 jQuery 实现的大致思路是这样function checkAll(){if($(input[namecheckall]).attr(checked))$(input[namecheckId]).attr(checked,true);else$(input[namecheckId]).attr(checked,false);}代码量少了一大半逻辑也更“高级”- 直接选中目标复选框不盲目遍历所有 input- 判断当前整体状态一键取反实现切换- 一个函数搞定“全选/取消”两种行为它不是先动手写循环、写判断而是先想明白这个功能本质是什么是状态的切换。二、两种思路的本质差别1. 我的思路从“动作”出发一步一步实现我当时的思考路径是1. 我要点一下全部选中2. 再点一下全部取消3. 那就写两个函数分别做这两件事4. 先找元素 → 循环 → 判断 → 赋值典型的面向过程先想“第一步做什么、第二步做什么”把流程写满功能就成了。优点- 思路直白自己写的自己一眼能看懂- 适合新手不容易乱- 功能完全正确能稳定跑起来- 底层原理 document.getElementsByTagName(input) 会遍历整个DOM树收集页面中所有 input 标签返回一个动态HTMLCollection集合不是数组是实时的DOM节点集合。- 后续操作拿到所有input后再用 for循环 逐个遍历通过 type 和 name 两个条件手动筛选出目标复选框。- 本质「先全拿再过滤」相当于把整个页面的input都扫一遍再挑出需要的。缺点- 代码冗余重复逻辑多- 扩展性差需求一变就要改多处- 不容易应对动态加载、后期维护2. 熟练开发者的思路从“逻辑”出发先抽象再编码他们的思考路径更接近1. 全选/取消本质都是“批量修改选中状态”2. 状态只有两种选中 / 未选中3. 用一个状态判断就能统一两种行为4. 再选择最高效的方式选中元素一次性操作这就是先抽象逻辑再实现功能。- 底层原理jQuery选择器会调用浏览器原生的 document.querySelectorAll() 或兼容旧浏览器的 getElementsByTagName 过滤直接根据CSS选择器规则精准定位页面中 namecheckId 的 input typecheckbox 元素返回一个jQuery封装的DOM对象集合。- 后续操作拿到的就是目标元素无需二次遍历筛选。- 本质「直接精准定位」相当于直接告诉浏览器“我要找namecheckId的input”跳过了全量遍历。优点- 代码极度精简没有废话- 复用性强一处修改全局生效- 更容易适配动态 DOM、延迟加载场景- 维护成本低可读性更高三、底层是同一件事只是层次不同其实剥开来看核心业务逻辑我们是完全一样的- 都通过 name 定位复选框- 都操作 checked 属性- 都把 id 存在 value 里供后续使用区别只在于- 我是用代码堆砌流程实现需求- 对方是用逻辑提炼本质简化代码不是我的代码错了而是思维层次不一样从“实现功能”到“抽象逻辑”是程序员很重要的一次成长。四、写在最后再看当年这段老代码我依然觉得很珍贵。那是最真实的成长痕迹从只会一步步写流程到慢慢理解什么是抽象、什么是设计、什么是更优雅的实现。很多时候我们和更熟练的开发者之间差的不是语法而是思路新手习惯先动手实现功能高手习惯先抽象逻辑。希望这一段从旧代码里翻出来的思考也能给正在成长路上的你一点启发。