记TradingView为代表的图表组件优化过程 - xw332/xw332.github.io GitHub Wiki

目前进度：

一期目标【100%】：分离图表代码和业务代码

二期目标【50%】：支持更多其他图表组件的适配工作，能适应app和小程序等非webview的原生环境

优化原则：

1、抽象组件功能，分离业务代码，分离父级方法

2、适配不同环境的同功能组件

优化思路：

1、分离业务流程代码，包括接口请求和数据处理

2、分离组件参数配置，包括初始化参数和主题配色

3、使用订阅发布模式，通知父级触发事件，避免父级向下传递无关组件逻辑的代码

4、使用适配器模式，抽象图表的组件功能，兼容各种api不同的图表和运行环境

优化流程：

tradingview的源码可以在官网提交申请表单，获得免费的github项目访问授权

源码主要有charting_library和datafeeds两个核心文件夹

charting_library是图表相关代码，没有提供源文件，可以直接引用charting_library.min.js

datafeeds是接口数据相关代码，提供了源文件有src、lib、dist三个核心文件夹，放到具体项目里开发的话，可以用lib里的文件，引用udf-compatible-datafeed.js

这里主要拆解datafeeds模块的修改：

requester.js是负责发起http接口，请求数据

history-provider.js是负责调用requester，请求历史数据

data-pulse-provider.js是负责动态获取实时数据

由于官方的代码里写死里请求接口的流程和路径名，所以requester需要整体重写，达到拦截并替换不同类型接口，或用ws代替http请求等需求

history-provider的history请求，需要增加symbolInfo的参数

data-pulse-provider需要去掉定时器的轮询请求方式

其他文件没有用到的话，可以保留源代码

其他：

1.15版是官方的最新稳定版，提升性能，修复bug

未发布稳定版的1.16版，支持移动端长按出十字星，此时滑动十字星，图表不动，可以达到查看每日指标数据的目的