如何真正写出高内聚低耦合的代码？如何使代码符合巴拉巴拉原则？

巴拉巴拉原则代指各类使代码更优雅的原则

写代码的人都但愿代码整洁漂亮，也确定搜索过很多文章，想要学到高内聚低耦合、开闭原则等等等等心法。可是真正动手开始写时，把本身知道的各类技巧都用上，却总以为代码并不符合这些原则。令人无故产生一种挫败感：我懂得了这么多道理，却写不出好代码。

由于这是一个量变产生质变的过程。只有当你画出最后一笔，你画的人才看起来是我的。有一个单词不认识和全部单词都不认识是没有本质区别的，可是所有单词都认识的那一刻，就忽然能够理解整句话了。只有当你键盘下的代码的方方面面都足够好，你的代码才是真正符合巴拉巴拉原则的。

而网上的大部分文章只会告诉你什么是巴拉巴拉原则，却对若是作到闭口不谈。

要作到这一点，必须审视本身写下的每一行代码：

1. 嵌套的if else好吗？
2. 能不能不过于依赖if else来实现流程控制？
3. 状态变量定义在方法外，是否致使程序的语义更模糊了？
4. 这个for循环可否用函数时变成代替？
5. 可否用函数柯里化简化参数传递和方法调用？
6. 可否用闭包使逻辑更内聚力，避免逻辑分散在不一样方法中？

   ……

   等等等等

无数个这样的小技巧组成了符合巴拉巴拉原则的代码。

每一次应用这些小技巧，都致使代码的巴拉巴拉指数增加了一点。当应用了世界上全部的这种小技巧时，就能写出巴拉巴拉指数满分的代码。

也就是说，这是一个积累的过程，当积累到足够多的小技巧时，代码就会趋于完美。

毕竟，连大厂如Facebook，从mixin到High order component到render props到Hooks，连他们都在挣扎寻找实现巴拉巴拉原则的技巧。广大业务代码编写人员以为迷茫，更是很天然的事情。

不过，不一样于上面列举的例子，也存在一些会显著影响代码质量的技巧。

目前前端框架，把数据和UI分开。更改数据，UI就会自动更新。这里面缺乏了框架做者不会关心，业务代码编写人员却每天面对的一块：业务逻辑写在哪里？

以Vue为例：

写在Vue的组件里会致使业务逻辑和UI强耦合，并致使业务逻辑被迫按照页面的不一样被分散在不一样的UI组件中。

致使目前最多见的代码写法，不只不符合巴拉巴拉原则，反而符合反巴拉巴拉原则。

正确的作法应该是UI组件里只存在UI相关的逻辑。业务逻辑所有写到Vuex里面，UI组件只负责发布action和mutation高速Vuex改更新了。

这样作，UI组件会天然按照设计师的设计分散在不一样的组件里。业务逻辑也会按照产品的设计分散在不一样的Vuex模块里。并且，由于高内聚的业务逻辑代码，本来因为低内聚高耦合代码致使的难以维护不复存在，写新需求、debug过程会变得十分天然。

具体写法，能够去看看Vue-element-admin模版源码。