jqoker / blog Goto Github PK

1. inquirer命令行引导问答
2. metalsmith页面生成器
3. fs-extra更好用的文件操作工具
4. request-promise-native请求工具
5. download-git-repo 下载解析git仓库
6. nprogress 进度条组件
7. chalk 终端字体颜色工具
8. ora加载loading
9. opn开启服务工具
10. winston日志工具
11. swig模板引擎
12. lru-cache缓存控制
13. Sequelize数据库操作
14. puppeteer 让node端重现chrome功能（自动化UI测试）
15. jsdom模拟浏览器（自动化UI测试）
16. Enzyme一款react测试工具，用于测试组件
17. Storybook一款用于维护开发组件的工具，组件阅览，组件状态修改与预览同步
18. debug调试工具
19. keymirror一个用于快速生成对象的工具
20. chalk终端颜色设置器
21. cors 跨域处理
22. routing-controllers 一款用于expressjs,koa的路由库，使路由编写方式类似于java spring框架方式
23. typedi 依赖注入工具
24. Cerebral 一款允许你使用声明式开发方式开发组件的工具（支持react,angular,vue等主流框架）

1. Tranck.js：纯浏览器的图像算法库，通过javascript计算来执行算法逻辑
2. regl-cnn：浏览器端的数字识别类库，与track.js 不同的是，它利用浏览器的WebGL 来操纵GPU, 实现了CNN
3. ConvNetJS：Deep Learning in your browser
4. deck.gl 一款地图展示

一、 释义

vt. 减少; 缩小; 使还原; 使变弱;
vi. 减少; 节食; 蒸发; （液体） 浓缩变稠;

关键点： 减少，浓缩变稠

二、如何理解？

1、减少顾名思义由多到少。
2、浓缩变稠：由弱变强。

隐含意义：具有记忆力

三、函数定义

函数的定义：给定一个数集A，假设其中的元素为x。现对A中的元素x施加对应法则f，记作f（x），得到另一数集B。假设B中的元素为y。则y与x之间的等量关系可以用y=f（x）表示。我们把这个关系式就叫函数关系式，简称函数。函数概念含有三个要素：定义域A、值域C和对应法则f。其中核心是对应法则f，它是函数关系的本质特征。可以简单地理解为函数为一中对应法则，给定一个x输出一个y。

四、高阶函数定义

在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数:
1、接受一个或多个函数作为输入
2、输出一个函数

也就是说，高阶函数是一种增强的表现。

五、高阶函数例子

设定：f(X) = 2 * X^2 + 1
我们可以假定： g(X) = X + 1，h(X) = 2 * X^2

因此，f(X) = g(h(X))

六、工程含义

功能分隔聚集，将功能按模块分隔，用时再组合在一起。有管道之意。

1. optimize-css-assets-webpack-plugin css资源优化
2. webpack-bundle-analyzer 包分析器
3. webpack-manifest-plugin manifest生成器
4. webpack-dashboard 打包面板
5. prettier 代码格式化

1. react-loadable动态加载组件
2. react-dev-utils是从react create app cli剥离出的工具包，里面存在打包等方面的工具
3. SortableJS 拖拽库
4. split-on-first从第一处分隔
5. js-xlsx 表格处理库
6. react-vis 图表库

图表相关

1. reactjs-graphs
2. react-digraph
3. react-force-graph
4. react-diagrams

1. moxios 针对axios的一款接口mock测试工具
2. husky 定义git钩子，用于代码提交等生命周期时做额外处理
3. jest 测试框架
4. dotenv从项目下面的.env文件中获取配置参数，用于解构
5. Puppeteer 一款node下的浏览器，可用于测试，截图等功能

方案一

前端处理：使用canvas手动绘制，这种情况依赖前端处理能力、移动设备性能。另外还需要考虑canvas兼容性问题，不支持某些特性或完全不支持。比如微信小程序中的canvas只提供部分特性

方案二

服务端处理：使用puppeteer工具(截图功能)，在服务端生成图片返回给前端。基本原理是前端通过接口方式和服务端交互，触发服务端执行截图功能。图片上面的动态数据，前端通过接口上传，另外考虑扩展性，每个动态图片均对应一个模板文件(html)。在上传时制定模板ID来限定具体模板。之后使用puppeteer工具进行截图，并将截图下发至前端

另外针对不常变更的图片可以充分利用缓存机制。另外可以一张图片可以分为高频、低频部分。低频部分可以提前截取快照，高频部分动态生成。之后再将高频、低频部分拼接成整张图片

服务端处理对机器有一定要求：由于puppeteer截图比较耗费内存和cpu，建议服务器内存配置8G以上，cpu 4核以上，并且开启node多核

1. mermaid 一款允许使用markdown方式制定图表、流程图的工具

一、插件

插件不能单独运行，必须依赖于主体；而主体可独立运行
主体职责为：提供服务（一般通过API方式），提供插件加载机制，交互能力
插件职责为：利用主体提供的服务，扩展主体行为

二、中间件

中间件就像工厂流水线中的某个具体环节，赋予具体环节特定功能。
首先要明白，"中间件"的"中间"是指哪两端的中间。这两端中间的事务功能是什么。

react-router

一、路由声明

V4版本之前，使用静态路由配置方式，之后版本，移除了静态路由配置概念，使用动态路由。具体原因可查看backstory

• 静态路由：预先配置好路由结构（比如express,angular,spring等框架中的路由，均为渲染前定义好路由规则，体现出集中管理的概念。

• 动态路由：路由规则不先定义，在渲染的时候才定义，这样一来react-router中的部件均为react组件，使用简单方便，可以在应用内任何需要路由的地方定义路由，就像插入一个react组件一样简单。体现出权责分散的概念。

感悟：权责分散意味着整体上的把控是有所欠缺的，而集中管理有缺乏灵活性

二、解决方案

解决方案并不是将两者之一去除，而是将两者的优点糅合在一起。通过react-router-config模块将静态路由配置在需要的地方通过renderRoutes方法生成相应路由组件即可。这样就既能知整体又知局部。

备注：renderRoutes 方法负责根据路由配置生成路由组件，并添加额外的属性而已