手把手教你系列- 实现多态API

目前chameleon-api提供的是主要的跨端方法，如果你在里面没有找到需要的方法，还可以使用多态协议接口多态来进行扩展。今天我们就手把手来实现一个多态api接口。

举例-创建一个获取一些信息的跨端接口

我们可以在项目根目录下执行cml init component，选择Polymorphic function，输入文件名称，例如getSomeInfo，生成如下文件结构

├── components
│   ├── getSomeInfo   
│   │   ├── getSomeInfo.interface

文件内容如下：

<script cml-type="interface">
interface GetSomeInfoInterface {
  type Info = {
    env: String,
    extra: String,
    myInput: String,
  }
  getSomeInfo(input: String): Info;
}
</script>
<script cml-type="web">
class Method implements GetSomeInfoInterface {
  getSomeInfo(input) {
    // 一些获取的操作，得到信息
    return {
      env: 'web',
      extra: '其他的信息',
      myInput: input
    }
  }
}
export default new Method();
</script>
<script cml-type="weex">
class Method implements GetSomeInfoInterface {
  getSomeInfo(input) {
    // 一些获取的操作，得到信息
    return {
      env: 'weex',
      extra: '其他的信息',
      myInput: input
    }
  }
}
export default new Method();
</script>
<script cml-type="wx">
class Method implements GetSomeInfoInterface {
  getSomeInfo(input) {
    // 一些获取的操作，得到信息
    return {
      env: 'wx',
      extra: '其他的信息',
      myInput: input
    }
  }
}
export default new Method();
</script>
<script cml-type="alipay">
class Method implements GetSomeInfoInterface {
  getSomeInfo(input) {
    // 一些获取的操作，得到信息
    return {
      env: 'alipay',
      extra: '其他的信息',
      myInput: input
    }
  }
}
export default new Method();
</script>
<script cml-type="baidu">
class Method implements GetSomeInfoInterface {
  getSomeInfo(input) {
    // 一些获取的操作，得到信息
    return {
      env: 'baidu',
      extra: '其他的信息',
      myInput: input
    }
  }
}
export default new Method();
</script>

在interface文件中，在cml-type="interface"部分规定入参和出参的具体类型。在cml-type="web|weex|wx|alipay|baidu"等各自端中实现对应方法。即可实现一个可以跨端使用的多态接口。

使用多态接口

在你的项目中可以通过路径引用到该方法，进行使用。

import myApi from 'components/getSomeInfo/getSomeInfo.interface'
const someInfo = myApi.getSomeInfo();
// 对获得的信息进行使用

值得一提的是，你可以在每个端自由引入在该端所需的库（你的项目库，npm包，jsbridge等），尽情丰富方法的实现，如在web端，当网页在客户端外的时候，你可以使用普通方法进行实现；如果该网页也会出现在客户端内，你可以使用jsbridge对于方法进行增强，获得更好的体验。