面对复杂功能， js怎么写的有条理

Question

假如给你一个复杂的功能让你实现，有什么思路写好这个功能？
该功能包括获取ajax数据，渲染数据，与其他dom交互，自身的css样式改变等等
怎么写条理清晰，该复用的能复用，而且容易让别人看懂。

Answer 1

这个问题，几年前我也问过，当时并没有得到很好的答案。
给你一个抽象的回答就是六大原则，给你一个具体可执行的回答就是写海量的代码。

而且这必然是一个长期的过程，一夜间打通任督的情况，基本不会发生。

Answer 2

假如给你一个复杂的功能让你实现，有什么思路写好这个功能？

尝试使用 波利亚的四步解题法 解答一下：

1. 彻底理解问题
   解决问题之前需要理解问题，找出问题的主干：

   • 要求解的是什么？ 需要实现的复杂功能是什么？
   • 已知什么？ 这个功能的实现逻辑什么是什么？
   • 要满足哪些条件？ 实现些逻辑需要什么数据结构？

2. 形成解决思路
   根据以往的经验、或者已经掌握的技能和知识构建解决问题的思路。

   软件开发的各种设计模式和设计原则都是解决类似问题的基本经验。

3. 执行
   按照自己的解题思路，耐心的执行。

   软件开发过程可以方便的获取结果的反馈，所以可以在执行的过程中不断的调整。

4. 总结
   每次解决完问题，需要把整个过程重新思考总结一下，获取会发现更好的解决方法。

   总结整理形成自己实现功能的基本套路，下次遇到类似问题就可以进一步的精进了。

解决复杂问题的关键在于第一 二步，能够高效持续的解决问题的关键在于第三步和第四步。

---

好像回答了，但又没有完全回答。

重新审视一下问题：

假如给你一个复杂的功能让你实现，有什么思路写好这个功能？

那么就需要了解是什么样的功能？为什么复杂？

什么样的功能？
一个功能的核心是需要解决用户的实际问题。
由此需要了解这个功能的用户是谁？问题的背景是什么？实际问题是什么？功能所处理的对象是什么？功能的核心逻辑是什么？等等
如果能够套用5W1H的问题模板，就可以充分的了解这个功能是什么。

为什么复杂？
功能的复杂程度往往来自于功能的抽象程度，越是抽象的问题，拆解问题的层次就越丰富，解决问题的方法就越多。
从用户界面到核心数据，越是复杂的功能，就有越多中间的逻辑层。
对于程序员来说，构建抽象层次的能力基本就等于解决复杂问题的能力。
经典的设计模式、设计原则以及各种各样的思维模型都是拆解复杂的基本套路。

如何写好这个功能？
实现的方法要与思考的方法恰恰相反，从底层出发，首先设计数据模型，然后构建数据处理逻辑，再在这个基础上搭建上层建筑，填充样式。

简单的说，就是自顶而下的设计，自底向上的实现，核心不过是抽象和分层。

Answer 3

JS:

• 复杂模块开发前，需要有一个系统性的功能拆解、思路拆解。
• 代码要有前期设计，不然的话，维护性不够强。
• 最好的是，将功能进行拆解。一个个小单元组合成一个复杂的功能。一个函数可以完成office，但是这样的话，谁来维护得动？还是得拆解成无数个函数，然后进行调用来处理。
• 代码里面有一句话叫做：一个函数只做一件事。

CSS:

• 多用用SASS、Less，变量处理，有助于后期换肤等操作。

Ajax：

• 模块化处理，一个接口是一个函数。

其他的不多说了。

Answer 4

楼主问的是设计问题, 其实是个预测未来的问题, 即未来

• 这个业务哪些地方会变化
• 会发生什么样的变化
• 这种变化对应于程序是新增? 修改? 删除?
• 通过调整代码结构, 让这种变化仅仅是新增, 避免修改, 特别是大规模的修改

你预测的越准, 你的设计就越有效

其次是设计方法 技巧, 各种创建型模式, 观察者模式, 所有24设计模式, 依赖注入, 控制反转, Actor模型....

设计方法 技巧的形式是永远说不完的, 基本逻辑都必须依赖前一步骤对未来的预测, 将变化的地方抽取出来, 将不变的部分设计成框架/约束

Answer 5

你在每个能更高内聚低耦合的地方都做好了。就会量变变成质变。但是在达到质变的点之前，你都会感到迷茫不知道怎么才能写好代码。
其实你已经做到了，只要坚持学习更多小技巧，运用起来，直到发生质变

看我这篇文章 不用谢。
https://segmentfault.com/a/11...

Answer 6

量变 -> 质变

Answer 7

首先学习计算机科学及理论。接着形成自己编程的风格。然后把这一切都忘掉，尽管改程序就是了