findxc
commented
4 years ago 编程的本质
今天看左耳听风的一篇文章编程范式游记（9）- 编程的本质（可以用微信扫码登录然后可以免费看），关于代码复杂度，他说到，绝大多数程序复杂混乱的原因就是 logic 和 control 的耦合，logic 指业务逻辑，control 指控制逻辑。他举了一个代码例子：
一个小 tip，在日常开发中，如果某段代码 if else 出现了多次，就可以尝试重构下啦。
CSS in JS
最近想做一个能修改 antd 颜色变量值然后在线预览效果的页面，因为有些前端项目是暗色风格，需要调整的变量会比较多，如果能在线改颜色，在线看效果，就可以让设计自己去玩咯。
首先我们知道，在 html 中引入 less.js 后，就可以直接在 html 中引入 .less 文件了（详见 http://lesscss.org/usage/#using-less-in-the-browser ），并且可以通过调用 window.less.modifyVars 函数来改变颜色变量的值，也就达到了在线换肤的效果。
对于 antd 项目，我们可以直接借助antd-theme-generator来实现换肤，这个库能解析 antd 的所有样式文件然后生成一个 color.less，然后我们调用 window.less.modifyVars 来改变颜色值即可。
不过这个库的功能是有局限的，一个是需要事先就定义好哪些变量是可以调整的，不支持动态增加或者删除变量，再一个就是由于需要在线编译 less，所以会有大概几秒到几十秒的延时。
并且吧，我去试了下ant-design-dark-theme的效果，antd 可能一开始就没想支持暗色主题，所以仅仅通过定义变量，出来的效果还是有很多细节问题的。
算了算了，放弃，还是只有通过定义变量加上样式覆盖的方式去实现暗色风格。
然后在乱逛时看到这个回答如何评价 Ant Design 这个项目（一个设计语言），里面说到了 CSS in JS 的一些好处，虽然其实项目也在用 CSS modules，但是其实我没并有意识到它多么多么好用（毕竟关于命名冲突，大家约定一下以组件名或者页面名作为前缀就好了）。
然后我看到了这篇CSS in JS，发现，啥，竟然 material-ui 在用 CSS in JS，还搞了个 @material-ui/styles ？
然后去瞅了瞅 material-ui，发现！！！竟然默认有暗色主题！！！并且秒切换哦，厉害了呀。（因为对于 CSS in JS 来说，改主题色，其实就真的是改了个变量值而已，不会涉及到 less 编译，所以快。）
不得不说，material-ui 在自带暗色主题这个功能上，还是更加有远见一些，因为确实有些项目是需要暗色风格的。同时使用 CSS in JS 的方案，也使得在线实时换肤更加简单，真香真香！