Slide 1

Slide 1 text

Ts编写Npm模块与WebSDK设计思想 WebSDK设计思路与实践 分享人 杨尚志 日期 2018-11-29

Slide 2

Slide 2 text

应用升级与迭代,避免不了要考虑兼容。 背景 但,在“编程哥”眼中,项目还没上就考虑长远的代码逻辑,是不太负责任的 “猛”的回车一下,发版再说! 等到版本迭代时,就出现了“产品姐”跟“编程哥”互相“开心”聊天的情况 “我哪里知道要兼容~” “为啥你们不先考虑下兼容,耽误了这期上线”

Slide 3

Slide 3 text

软件开发工具包(缩写:SDK、外语全称:Software Development Kit)一般 都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建 立应用软件时的开发工具的集合。 版本迭代升级过程,兼容问题不容忽视,SDK能合理的解决兼容性问题,在应 用迭代过程中发挥重要作用。 Moschat项目中,与客户端对接的技术需要从Cef过渡到Electron,为保证升级的 稳定性,采用SDK接入方式在不同版本中使用不同的底层接口,合理解决版本迭 代未可预测的兼容问题。 背景

Slide 4

Slide 4 text

亟待解决 1. 统一用法 2. 减少if/else 3. 异常统一处理,不影响主流程 4. 重写接口,统一管理 5. 增加扩展性 1. Cef接入的SDK没有AOP控制,用法不统一 2. PC跟Web交互方式不一致,过多的if/else,代码阅读效率不高 3. 没有统一错误处理 4. SDK分布各个模块,没有直观的SDK接口列表 表现 那么

Slide 5

Slide 5 text

探索一 PC window.YY === Object Web window.YY === undefined Other window.YY === Other Instance 表现 1. 环境用户自定义,并根据当前环境接入不同的SDK 2. SDK只作call处理 那么

Slide 6

Slide 6 text

探索二 1. If (YY && YY.Sdk && YY.Sdk.xxx) {} 2. Else if( Cef && Cef.Sdk && Cef.Sdk.xxx) {} 3. Else … 表现 那么 1. 按不同环境统一管理SDK 2. SDK按接口方式命名与使用 3. 不同环境执行不同逻辑

Slide 7

Slide 7 text

WebSDK SDK Implements Environment PC win: { getUserInfo() { return YY.win.getUserInfo() } } Web win: { getUserInfo() { return {} } } WebSDKBOM.config() WebSDK(‘win.getVersion’) 根据环境选择SDK 初始化SDK 调用后回调实现的SDK

Slide 8

Slide 8 text

代码实现思路解析 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

Slide 9

Slide 9 text

代码 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) } }

Slide 10

Slide 10 text

代码 WebSDK(‘win.getSdkInfo’)

Slide 11

Slide 11 text

升级 1. 针对单个SDK异常拦截与处理 2. SDK升级或更新同步问题 1. 通过调用 SDK前,设置异常拦截,执行结束后清掉拦截操作 2. 通过CDN放置SDK文件,加载后注入SDK 问题 方案

Slide 12

Slide 12 text

Jest https://github.com/wanwusangzhi1992/WebStudy/tree/master/dayTest/jest- typescript TS-Jest

Slide 13

Slide 13 text

QA

Slide 14

Slide 14 text

END Thank you