这篇是 js-interface 的 README，虽然并非很复杂的一个东西，若是有人看的话我就写写源码思路了 ORZjavascript
在作一个先后分离的项目时，有些头疼 Api 之类的东西要怎么管理，在阅读 《JavaScript 设计模式》 一书时，第二章提到了在 JavaScript 中模拟接口 (interface) 的概念，以方便使用众多设计模式，所以尝试着作一个接口的模拟。因为我本职是一名后端 Java 开发，所以但愿在这个模拟层能够加入 接口默认实现、接口继承、方法重载 等能力，虽然这些东西加上以后不可避省得会在性能上有所牺牲，但对我来讲能够提高一些开发体验（我知道 TypeScript，只是想搞个轮子试试 ：P）。java
既然初衷是为了方便管理 Api，那么就作一个关于 Api 的 demo。node
const config = {
// 接口的名字
name: 'IApi',
// 是否打开此接口的 debug 开关
// 开发时必须打开，不然不会启动 （方法声明、方法实现等）入参的类型检查。
// 打开这个的状况下，还会得到一些调试用的信息。
debug: true，
}
let IApi = new Interface(config)
最简单的声明方式：webpack
IApi.method({name: 'getName'})
// 等价于
IApi.method({name: 'getName', args: undefined})
这样就声明了 IApi 接口含有一个 getName 方法，它没有任何参数，也没有默认实现，这就要求在后面任何 IApi 的子接口或实现类必须实现该方法，不然会抛出一个异常。ios
若是想指定方法的参数列表：git
IApi.method({ name: 'getName', args: null })
注意！github
args 为 null 时表示该方法能够接受任意数量的任意参数，若是重载了一个方法（详细的请参阅后面关于重载的说明）：web
// 声明一个空参方法
IApi.method({ id: 0, name: 'getName', args: null })
// 重载上面的方法，使其有且只有一个 'string' 类型，名为 name 的参数
IApi.method({ id: 1, name: 'getName', args: [
{name: 'name', type: 'string', support: val => typeof val === 'string'}
] })
注意！axios
在参数描述中，type 属性只是一个字符串值，它并不真的表明参数的实际类型。它跟 name 属性同样只是提供用于调试的信息，所以你能够填入任何你认为合适的、足以标记该参数一些信息的字符串值。后端
真正决定方法是否接受该参数的是 support 属性，当它返回 true 时会检查下一个参数直到全部参数检查完毕或某个位置的参数不被接受。
若是须要，能够在 support 中对实际入参进行特殊处理，好比转换对象、特定属性检查等等。
若是想为方法提供默认实现：
IApi.method({
name: 'getName',
// 默认实现，不能为箭头函数！
implement: function() {
return "IApi"
}
})
回到咱们的 demo，综合运用一下：
// 声明两个方法，它们都没有参数，也不须要重载所以这样就能够了
IApi
.method({ name: 'getName' })
// 项目中使用 Axios，所以这里须要一个方法来获取 axios 实例
.method({ name: 'getAxios' })
// 声明四个请求方式对应的方法
const methods = ['get', 'post', 'put', 'delete']
methods.forEach(method => {
IApi.method({
name: method,
args: null,
implement: function() {
// 处理了 this 指向问题，放心用吧
return this.getAxios()[method].apply(this, arguments)
.then(responseHandler)
.catch(errorHandler)
}
})
})
假定咱们要建立接口 A，要继承 B、C、D、E 等接口，使用以下语句：
const A = new Interface({
name: 'A',
debug: true
}).extends([B, C, D, E])
extends 方法会将传入的接口所持有的全部方法声明（即经过 Interface.method(config) 所声明的那些方法 ）拷贝至接口 A，包括那些方法声明的默认实现。
注意！
通常来讲，不会在多个接口中重载同一个方法签名，但若是真的有这样的需求，能够自行设置 id 的规则，好比：
const B = new Interface(...)
.method({ id: 'B00', name: 'getName', args = [...] })
.method({ id: 'B01', name: 'getName', args = [...] })
const C = new Interface(...)
.method({ id: 'C00', name: 'getName', args = [...] })
而后实现该方法时指定要实现哪个声明：
// 注意！若是一个方法被重载，则不能在 class 中声明该方法。
class AImpl { ... }
const AInstance = new AImpl(...)
B.implement({
object: AInstance,
id: 'B00', // 指定要实现的方法声明
name: 'getName'
})
再次回到咱们的 demo，综合运用一下：
const IAuthenticationApi = new Interface({
name: 'IAuthentication',
debug: true
})
// 指明 IAuthenticationApi 继承自 IApi 接口
.extends(IApi)
IAuthenticationApi
// 重载方法 login
// loin (username :string, password :string)
.method({
id: 0,
name: 'login',
args: [
{name: 'username', type: 'string', support: val => typeof val === 'string'},
{name: 'password', type: 'string', support: val => typeof val === 'string'}
]
})
// login()
.method({
id: 1,
name: 'login'
})
// 编写一个实现类
class AuthenticationApi {
constructor(axios) { this.axios = axios }
// 直接实现 getName 方法
getName() { return "AuthenticationApi" }
// 直接实现 getAxios 方法
getAxios() { return this.axios }
}
// 实现重载方法
IAuthenticationApi
.implement({
// 指定挂载实现到 AuthenticationApi 上
object: AuthenticationApi,
// 指定此实现是对应 id 为 0 的方法声明
id: 0,
name: 'login',
implement: function(username, password) {
console.log('带参数的 login')
// 还记得咱们在 IApi 接口中定义了 get 方法（包括默认实现）吗？
this.get('https://www.baidu.com')
return Promise.resolve('hello')
}
})
.implement({
object: AuthenticationApi,
id: 1,
name: 'login',
implement: function () {
console.log('无参数的 login')
},
})
IAuthenticationApi.ensureImplements(AuthenticationApi)
let authenticationService = new AuthenticationApi(axios)
// 挂载代理函数到实例上，不然会提示
// Uncaught TypeError: authenticationService.login is not a function
IAuthenticationApi.ensureImplements(authenticationService)
authenticationService
.login('sitdownload', '1498696873')
// login(string, string) 会返回一个 Promise 还记得吗 ：P
.then(str => alert(`${str} world!`))
authenticationService.login()
首先确保在建立接口时打开了 debug 开关（{ debug: true }）。
上面的 demo 运行正常的话你将会获得下面的日志：
// 注册方法
Interface 注册方法: IApi.getName()
Interface 注册方法: IApi.getAxios()
Interface 注册方法: IApi.get(any)
Interface 注册方法: IApi.post(any)
Interface 注册方法: IApi.put(any)
Interface 注册方法: IApi.delete(any)
Interface 注册方法: IAuthentication extends IApi.getName()
Interface 注册方法: IAuthentication extends IApi.getAxios()
Interface 注册方法: IAuthentication extends IApi.get(any)
Interface 注册方法: IAuthentication extends IApi.post(any)
Interface 注册方法: IAuthentication extends IApi.put(any)
Interface 注册方法: IAuthentication extends IApi.delete(any)
Interface 注册方法: [0]IAuthentication.login(username :string, password :string)
Interface 注册方法: [1]IAuthentication.login()
// 实现方法
Interface 实现方法: 保存 [0]IAuthentication.login(...) 实现:
ƒ implement(username, password)
Interface 实现方法: 保存 [1]IAuthentication.login(...) 实现:
ƒ implement()
// 匹配方法
Interface 方法匹配: 精准匹配
IAuthentication.login({ username: "sitdownload" } :string, { password: "1498696873" } :string).
// 在控制台这行是能够打开实现的具体位置的
ƒ implement(username, password)
// 方法输出
AuthenticationApi.js?7b55:25 带参数的 login
// 匹配方法
Interface 方法匹配: 没法精准匹配 IAuthentication.get("https://www.baidu.com")，使用 any 实现匹配:
ƒ implement()
Interface 方法匹配: 精准匹配 IAuthentication.login().
ƒ implement()
// 方法输出
AuthenticationApi.js?7b55:35 无参数的 login
// AuthenticationApi.login(username, password) 中请求了 'https://www.baidu.com'
Failed to load https://www.baidu.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.
// IApi.get(any) 中将异常直接向下抛了
Uncaught (in promise) {type: "network", payload: Error: Network Error
at createError (webpack-internal:///./node_modules/_axios@0.18.0@axios/lib/…}
若是要发版了，确认全部的接口方法都正确实现后，就能够把 debug 关掉，这样就不会有 Interface 内部的一些入参检查和调试输出。