webpack配置
1. 利用cross-env包设置环境变量
2. 利用http-proxy-middleware中间件进行代理设置
3. 利用webpack.DefinePlugin自带的插件定义全局变量_version查看git发布版本和时间
4. 利用插件ForkTsCheckerWebpackPlugin定义ts格式
5. 在vscode编辑器中安装esbenp.prettier-vscode同时定义和ForkTsCheckerWebpackPlugin对应的规则
6. 利用alias给模块定义别名
7. 给scss模块加入对应的模块加载器,让每一个样式生产自己的后缀名
8. 在开发环境下面配置热加载配置
区块链的nft项目
1. 利用bigNumber.js对所以的大数进行对应操作
2. 通过@web3-react/core连接metamask钱包
3. 当没有连接metamsk设置测试节点地址,生成web3对象
4. 对合约进行error和receipt事件监听分别对错误和落帐进行操作
5. 定义一个addressTable对象,分别定义env,prod环境对应的token地址
6. 对请求的响应体进行判断,判断组件已经注销,防止内存泄露
7. 利用useRoutes定义路由
8. 定义StateContext.Provider在组件的顶层,对全局变量进行管理
9. 在context中给所以的组件定义初始化状态
10. 获取到最新数据之后,利用dispatch方法更新数据,刷新试图
11. 使用useState定义loading变量和setLoading方法,使用在操作按钮上面
数据可视化项目
1. 使用provider和inject对多级组件进行通讯操作,减少数据的影响范围
2. 利用this.$set进行父子之间的组件通讯
3. 分装了line和bar和map的公共组件,方便业务层引用
4. 使用了concent对状态进行管理,
5. 使用compress对数据进行加密处理
6. 使用token对api进行鉴权操作
7. 利用mapVisual对地图不同阶段上不同的颜色
8.自定义formatter方法,渲染tooltip
9. 利用echart的themeRiver河流图画出谱图分析图
10. 利用graph关系图画出各个领域之间的关系
11 利用symbol特性给某一个图例自定义图标
错误监控系统项目
1. 利用window.addEventListener事件捕捉模式捕获资源404错误和js错误和Promise的错误
2. 利用event错误对象导出404错误的文件名和标签名
3. 利用event错误对象导出js执行错误的对应文件名和位置信息,已经获取当前的url信息
4. 利用event.path属性获取,然后利用parentNode递归查找所以父级原始,组成完成的原始链
5. 舰艇unhandledrejection事件,对Promise任务的报错进行补货
6. 页面加载完成之后触发elementsFromPoint创建节点原始,判断有多少个空白点
7. 对错误的信息进行上报,依据信息大小和浏览器版支持beacon(只在浏览器空闲时候发送请求)进行信息上报
8. skd执行的时候,需要对document.readyState进行判断是否资源已经加载完成,保证skd的正常进行
h5新闻列表开发项目
1. 利用token对api进行鉴权处理
2. 利用evice-pixel-ratio对1px进行处理
3. 利用transform:scale对12像素字体进行处理
4. 利用scrollTop计算当前列表的位置,只渲染当前可视区的数据
5. 利用transform的translateX属性做动画,减少动画过程的回流
6. 对实时搜索输入框进行截流操作,减少请求
7. 使用online和offline事件监听网络情况
8. 利用css的flex:1属性对页面进行高度自适应布局
9. 将所以的图片资源引用都放在函数组件外面,提前图片资源的加载
10.对于异步请求的响应体作出该组件是否已经销毁的判断,防止内存泄漏
管理后台搭建
1. 使用@ant-design作为管理后台的基础组件
2. 利用Menu组件进行导航的渲染
3. 利用Tree组件处理权限树
4. 利用concent进行全局的状态管理
5. 利用@ant-design/pro-table进行表格的开发
6. 利用@ant-desing/pro-form进行表单的开发
7. 利用message提示操作后的信息
8. 利用actionRef操作表格操作后的刷新操作