因为专注,所以专业
2005 - 2020

你不知道的前端SDK开发技巧

时间:2020-02-05 17:38:01    作者:八叔模板堂
作者:陈达孚 ,来源:https://segmentfault.com/a/1190000012307844
香港中文大学研究生,《移动Web前端高效开发实战》作者之一,《前端开发者指南2017》译者之一,在中国前端开发者大会,中生代技术大会等技术会议发表过主题演讲, 专注于新技术的调研和使用.

类型检查和智能提示


接口


枚举

const Platform = {
    ios: 0,
      android: 1
}
enum Platform {
  ios,
  android
}


装饰器

export function facade(env: number) {
  return function(
    target: object,
    name: string,
    descriptor: TypedPropertyDescriptor<any>
  ) {
    let originalMethod = descriptor.value;
    let method;

    return {
      ...descriptor,
      value(...args: any[]): any {
        let [arg] = args;
        let { param, success, failure, polyfill } = arg;   // 这部分可以自定义
        if ((method = polyfill[env])) {
          method.use(param, success, failure);
          return;
        }
        originalMethod.apply(this, args);
      }
    };
  };
}
export function snakeParam(
  target: object,
  name: string,
  descriptor: TypedPropertyDescriptor<any>
) {
  let callback = descriptor.value!;

  return {
    ...descriptor,
    value(...args: any[]): any {
      let [arg, ...other] = args;
      arg = convertObjectName(arg, ConvertNameMode.toSnake);
      callback.apply(this, [arg, ...other]);
    }
  };
}÷


泛形

function identity<T>(arg: T): T {
    return arg;
}
export interface IRes {
  status: number;
  message: string;
  data?: object;
}
function example(): Promise<IRes> {
    return new Promise ...
}


构建


单元测试

describe('xxx api test', function() {            // 注意如果要用this调用mocha,不要用箭头函数
  this.timeout(6000);
  it('xxx', done => {
    SDK.file
      .chooseImage({
        count: 10,
        cancel: () => {
          console.log('选择图片取消----');
        }
      })
      .then(res => {
        console.dir(res);
        expect(res).to.be.an('object');
        expect(res).to.have.keys('ids');
        expect(res.ids).to.be.an('array');
        expect(res.ids).to.have.length.above(0);
        uploadImg(res.ids);
        done();
      });
  });
});
describe('proxy', () => {
  beforeEach(() => {
    nock('http://test.com')
      .post('/test1')
      .delay(200)
      .reply(200, {            // body
        test1: 1,
        test2: 2
      }, {
        'server-id': 'test' // header
      });
  });
  it(...
}

tips: 如何在非发包情况下给内部库添加声明

  • 给原包添加d.ts文件,然后发布.
  • 发布@types包,需要注意的是NPM不支持@types/@scope/{pkgname}这种写如果是私库包,可以使用@types/scope_{pkgname}这种写法.
  • "baseUrl": "./",
    "paths": {
        "*": ["/type/*"]
    }

tips: 如何处理resolve和reject不同类型的promise回调

interface IPromise<T, U> {
  then<TResult1 = T, TResult2 = never>(
    onfulfilled?:
      | ((value: T) => TResult1 | PromiseLike<TResult1>)
      | undefined
      | null,
    onrejected?:
      | ((reason: U) => TResult2 | PromiseLike<TResult2>)
      | undefined
      | null
  ): IPromise<TResult1 , TResult2>;
  catch<TResult = never>(
    onrejected?:
      | ((reason: U) => TResult | PromiseLike<TResult>)
      | undefined
      | null
  ): Promise<TResult>;
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部