目录
一些代码和业务上的笔记
前言
好久没有写博客了，最近写业务代码有点吃老本的感觉，一方面是代码复杂度不算太高、另一方面也是缺乏对问题的进一步思考抽象。年轻人还是要多学习，不能发懒啊！
今早逛社区，正巧瞄到一眼背包问题(Knapsack problem)，顺藤摸瓜复习了下算法复杂度、子问题求解，React key diff顺序优化的东西，正好也把自己接手老项目时对代码的一些思考也记录下来。
前端项目的维护
相信大部分开发同学一开始接手公司的老项目，都会比较痛苦。一方面是技术架构比较陈旧混乱，另一方面是项目代码无法充分描述业务逻辑。
对于SPA前端项目，挖掘它的MVC尤为重要,以react+redux+react-router技术栈为例
Model的第一层数据是router，来架构业务组件的入参关系，在大部分github的react-router boilerplate中，一般会用constant来命名router文件以明确view的入参关系(虽然在实际项目中我基本没看到这样做的);
第二层是redux技术架构,最重要观察的点在于middleware和reducer，middleware最好只是做action relay/thunk等的工作(在实际项目中我见过在middlware中嵌入业务逻辑的代码，这种逻辑很隐晦，会让其他接手代码的同学掉到坑里)； reducer则是明确整个应用的数据结构(一般在这块建议要用typescript来描述store或者类似的model库来约束好数据结构)，middleware中最好一定要加入action log middleware，因为本质上前端就是数据的render而已，action的payload可以更好的描述业务。
对于SPA基本理清楚数据结构，结合viewModel来看，维护问题应该算是可控的。
对于前后端混杂项目，比如模板引擎 + js/css，资源代理、请求转发等工具环境搭建
这类项目接手的时候比较纠结，环境配置就够折腾的了。这个时候，有一套内部使用的代理工具就特别有效，一般可以考虑nginx代理静态资源+内部工具来转发请求的工具套件。在完成项目启动后，在完成业务的同时，是可以考虑推动下技术栈的微重构和业务分层的，不过控制好影响范围是件容易说不容易做的事情。
一些觉得比较好的实践
在技术栈上，我在2017年从不了解typescript转变成了typescript的铁粉，这种转变是令人身心愉悦的。
typescript VS ES5/6/7 javascript
js的代码一眼看上去是算法逻辑，一般需要开发者严格的自律才能具备较强的维护性。一般看到js代码的整齐度基本可以判断一个人的代码性格。
ts的代码因为有较强的struct type约束，所以看到的代码是数据结构+算法的集合体，引用我们组前端大哥的一句话描述就是：“代码即文档”。
string selector VS struct selector
对于数据选择器来说，有的库(比如lodash/get)会采用string selector来描述数据结构的路径，这样的坏处是string selector无法足够好的维护数据结构的变更，对于项目维护的可持续性来说，尽量采用结构型的描述方式是更合理的。
tool box vs tool
很久之前看过Dan和angular团队关于工具生态的一些讨论。
对于开发团队来说toolbox的建设非常重要，基本的脚手架、命令行工具、代理工具、环境集成工具、UI框架都是效率提升的利器。tool需要解耦、box则需要组装。
React diff算法
启发式算法（heuristic algorithm）:
定义:
一个基于直观或经验构造的算法，在可接受的花费（指计算时间和空间）下给出待解决组合优化问题每一个实例的一个可行解，该可行解与最优解的偏离程度一般不能被预计。
举例:
比如前端框架React针对Dom tree diff，通过作出合理假定将最优解的O(n\^3)复杂度转化为了O(n)完成了巨大的性能提升，具体的React diff算法细节可以看[react官方reconciliation介绍](Reconciliation - React)，这里贴一下React官方对启发式算法的两个假定(assumptions)：
1. Two elements of different types will produce different trees.
2. The developer can hint at which child elements may be stable across different renders with akeyprop.
针对以上两点假定，开发者写React代码的时候要记得使用唯一的常量key来标示children数组元素以便React内部进行优化重排，同时要利用好顺序排序算法，让前后数组A/B尽量保持顺序一致性，最大限度进行元素复用。
以上，比较琐碎，如有一些理解不当或者想法欢迎指正交流。
饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com
本文作者：饥人谷方应杭老师
