有关项目的一些技术难点及亮点

项目：手工交易系统

难点一：交易员需要支持3600多只股票按照拼音首字母检索，且要支持多音字（支持多音字检索）；

面临问题：没有汉字拼音字典来实现这个需求；

解决办法：写爬虫去爬取百度词典二级字库的7200多个常用汉字的拼音及多音字节，然后构造字典存储在前端实现。

相关优化：3600多只股票的名称和代码字段数据全部缓存在本地（放到js文件模板里，import进来），这样搜索框搜索的时候，不需要每次都向后端请求返回数据，而且搜索框有做防抖处理。

防抖：就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

需求：需要支持自定义快捷键设置；

解决办法：创建一张本地字典，可以支持用户输入快捷键并帮助他绑定相关事件。

（一大串json，放到localStorage里面，例：{ keyBuy: 114, keySell: 115 } ）

比如交易员设置f3和f4快捷键是买入和卖出，那么本地就会存储这两个按键的对应按键编码以及绑定的事件函数，下次他在股票交易的时候按这些快捷键，就会监听相应的事件，触发对应的事件函数。

难点二：每个交易模块要支持用户增删改和自定义布局、自定义拖拽改变位置和大小；

面临问题：自己开发的话成本较高；

解决办法：经过技术选型比较了react-grid-layout、react-dnd等库，综合考虑了性能和实现成本后，选用了react-grid-layout。

（react-grid-layout刚好能满足我们的需求，且API比较友好，性能也很好）

难点三：需要支持一屏内最多显示16只股票的十档行情和逐笔行情，这些行情数据交易所那边的实时数据推送频率不可控，可能会出现时间间隔少于16毫秒；

面临问题：行情推送在订阅的股票数量太多的情况下，推送频率太高，超出GUI刷新的频率限制；

解决办法：通过对数据进行最小时间间隔的合成处理。

本地构建工程化优化：

1、构建本地模拟cgi数据

原理：递归遍历本地一个cgi目录，把目录里的文件名映射到对应的ajax请求路径

2、webpack热加载

提高开发效率

其它的一些简单优化：

数据分页处理，不请求全量数据

项目中遇到的一些问题：

websocket断线重连，使用了一个reconnecting-websocket的模块，用来自动兼容断线重连的问题

文件缓存问题，webpack打包生成的文件名加hash码（hash/chunkhash/contenthash）

项目中安全相关的一些问题：

xss/csrf

前端工程化的理解：

官网项目

优化一：

seo优化  //待完成

优化二：

ssr

//待完成

解决兼容相关的一些问题：

多端适配