websdk_1_.pdf

Transcript

1. Ts编写Npm模块与WebSDK设计思想 WebSDK设计思路与实践 分享人 杨尚志 日期 2018-11-29
2. 应用升级与迭代，避免不了要考虑兼容。 背景 但，在“编程哥”眼中，项目还没上就考虑长远的代码逻辑，是不太负责任的 “猛”的回车一下，发版再说! 等到版本迭代时，就出现了“产品姐”跟“编程哥”互相“开心”聊天的情况 “我哪里知道要兼容~” “为啥你们不先考虑下兼容，耽误了这期上线”
3. 软件开发工具包（缩写：SDK、外语全称：Software Development Kit）一般 都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建 立应用软件时的开发工具的集合。 版本迭代升级过程，兼容问题不容忽视，SDK能合理的解决兼容性问题，在应 用迭代过程中发挥重要作用。 Moschat项目中，与客户端对接的技术需要从Cef过渡到Electron，为保证升级的 稳定性，采用SDK接入方式在不同版本中使用不同的底层接口，合理解决版本迭 代未可预测的兼容问题。 背景
4. 亟待解决 1. 统一用法 2. 减少if/else 3. 异常统一处理，不影响主流程 4. 重写接口，统一管理 5. 增加扩展性 1. Cef接入的SDK没有AOP控制，用法不统一 2. PC跟Web交互方式不一致，过多的if/else，代码阅读效率不高 3. 没有统一错误处理 4. SDK分布各个模块，没有直观的SDK接口列表 表现 那么
5. 探索一 PC window.YY === Object Web window.YY === undefined Other window.YY === Other Instance 表现 1. 环境用户自定义，并根据当前环境接入不同的SDK 2. SDK只作call处理 那么
6. 探索二 1. If (YY && YY.Sdk &＆ YY.Sdk.xxx) {} 2. Else if( Cef && Cef.Sdk && Cef.Sdk.xxx) {} 3. Else … 表现 那么 1. 按不同环境统一管理SDK 2. SDK按接口方式命名与使用 3. 不同环境执行不同逻辑
7. WebSDK SDK Implements Environment PC win: { getUserInfo() { return YY.win.getUserInfo() } } Web win: { getUserInfo() { return {} } } WebSDKBOM.config() WebSDK(‘win.getVersion’) 根据环境选择SDK 初始化SDK 调用后回调实现的SDK
8. 代码实现思路解析 1. 初始化SDK，将SDK放至全局instance 2. 其它配置（统一报错处理，日志打印等） config (setting: any = []) init (key: String, …args: any[] ) 1. key， Sdk目标获取的值，如 ‘win.overlay’ 2. args，参数 3. 通过把key进行split(`.`)拆分，得到数据后，进行遍历 key.split(`.`).forEach(item => {}) 4. 迭代SDK后，结果为函数则回调，非函数则返回 return sdk(…args) / sdk
9. 代码 config(setting: any = {}): void { __mergeEnv(setting) // 覆盖数据 } init(key: string, ...args: any[]) { instance.key = key instance.args = args try { if (!(key && /^([a-zA-Z])/.test(key))) { return instance._catchError(MsgConfig.call(instance, 'KEY_INPUT')) } const _tmpKeysArray = key.replace(/\[/g, '.').replace(/\]/g, '').split('.') let _tmpSdk: any = instance._config.sdk for (let item of _tmpKeysArray) { _tmpSdk = _tmpSdk[item] if (_tmpSdk === null || _tmpSdk === undefined) { return instance._catchError(MsgConfig.call(instance, 'KEY_NOT_FIND')) } if (typeof _tmpSdk === 'function') { return _tmpSdk(...args) } } return _tmpSdk } catch (error) { error = Object.assign({}, MsgConfig.call(instance, 'CATCH'), {error}) return instance._catchError(error) } }
10. 代码 WebSDK(‘win.getSdkInfo’)
11. 升级 1. 针对单个SDK异常拦截与处理 2. SDK升级或更新同步问题 1. 通过调用 SDK前，设置异常拦截，执行结束后清掉拦截操作 2. 通过CDN放置SDK文件，加载后注入SDK 问题 方案
12. Jest https://github.com/wanwusangzhi1992/WebStudy/tree/master/dayTest/jest- typescript TS-Jest
13. QA
14. END Thank you