在javascript中实现接口有三种方式：注释描述、属性验证、鸭子模型。
note：因为我看的是英文书，翻译水平有限，不知道有些词汇如何翻译，大家只能领会精神了。
1. 注释描述 （Describing Interfaces with Comments）
例子：
复制代码 代码如下:
/*
interface Composite {
function add(child)
function remove(child)
function getChild(index)
}
interface FormItem {
function save()
}
*/
var CompositeForm = function(id, method, action) { // implements Composite, FormItem
...
}
//Implement the Composite interface.
CompositeForm.prototype.add = function(child) {
...
}
CompositeForm.prototype.remove = function(child) {
...
}
CompositeForm.prototype.getChild = function(index) {
...
}
// Implement the FormItem interface.
CompositeForm.prototype.save = function() {
...
}
模拟其他面向对象语言，使用interface 和 implements关键字，但是需要将他们注释起来，这样就不会有语法错误。
这样做的目的，只是为了告诉其他编程人员，这些类需要实现什么方法，需要在编程的时候加以注意。但是没有提供一种验证方式，这些类是否正确实现了这些接口中的方法，这种方式就是一种文档化的作法。
2. 属性验证（Emulating Interfaces with Attribute Checking）
例子：
复制代码 代码如下:
/* interface
Composite {
function add(child)
function remove(child)
function getChild(index)
}
interface FormItem {
function save()
}
*/
var CompositeForm = function(id, method, action) {
this.implementsInterfaces = ['Composite', 'FormItem']
...
}
...
function addForm(formInstance) {
if(!implements(formInstance, 'Composite', 'FormItem')) {
throw new Error("Object does not implement a required interface.")
}
...
}
// The implements function, which checks to see if an object declares that it
// implements the required interfaces.
function implements(object) {
for(var i = 1i <arguments.lengthi++) {
// Looping through all arguments
// after the first one.
var interfaceName = arguments[i]
var interfaceFound = false
for(var j = 0j <object.implementsInterfaces.lengthj++) {
if(object.implementsInterfaces[j] == interfaceName) {
interfaceFound = true
break
}
}
if(!interfaceFound) {
return false
// An interface was not found.
}
}
return true
// All interfaces were found.
}
这种方式比第一种方式有所改进，接口的定义仍然以注释的方式实现，但是添加了验证方法，判断一个类型是否实现了某个接口。
3.鸭子类型（Emulating Interfaces with Duck Typing）
复制代码 代码如下:
// Interfaces.
var Composite = new Interface('Composite', ['add', 'remove', 'getChild'])
var FormItem = new Interface('FormItem', ['save'])
// CompositeForm class
var CompositeForm = function(id, method, action) {
...
}
...
function addForm(formInstance) {
ensureImplements(formInstance, Composite, FormItem)
// This function will throw an error if a required method is not implemented.
...
}
// Constructor.
var Interface = function(name, methods) {
if(arguments.length != 2) {
throw new Error("Interface constructor called with "
+ arguments.length + "arguments, but expected exactly 2.")
}
this.name = name
this.methods = []
for(var i = 0, len = methods.lengthi <leni++) {
if(typeof methods[i] !== 'string') {
throw new Error("Interface constructor expects method names to be "
+ "passed in as a string.")
}
this.methods.push(methods[i])
}
}
// Static class method.
Interface.ensureImplements = function(object) {
if(arguments.length <2) {
throw new Error("Function Interface.ensureImplements called with "
+arguments.length + "arguments, but expected at least 2.")
}
for(var i = 1, len = arguments.lengthi <leni++) {
var interface = arguments[i]
if(interface.constructor !== Interface) {
throw new Error("Function Interface.ensureImplements expects arguments"
+ "two and above to be instances of Interface.")
}
for(var j = 0, methodsLen = interface.methods.lengthj <methodsLenj++) {
var method = interface.methods[j]
if(!object[method] || typeof object[method] !== 'function') {
throw new Error("Function Interface.ensureImplements: object "
+ "does not implement the " + interface.name + " interface. Method " + method + " was not found.")
}
}
}
}
何时使用接口？
一直使用严格的类型验证并不适合，因为大多数javascript程序员已经在没有接口和接口验证的情况下编程多年。当你用设计模式开始设计一个很复杂的系统的时候，使用接口更有益处。看起来使用接口好像限制了javascript的灵活性，但实际上他让你的代码变得更加的松耦合。他使你的代码变得更加灵活，你可以传送任何类型的变量，并且保证他有你想要的方法。有很多场景接口非常适合使用。
在一个大型系统里，很多程序员一起参与开发项目，接口就变得非常必要了。程序员经常要访问一个还没有实现的api，或者为其他程序员提供别人依赖的一个方法存根，在这种情况下，接口变得相当的有价值。他们可以文档化api，并作为编程的契约。当存根被实现的api替换的时候你能立即知道，如果在开发过程中api有所变动，他能被另一个实现该接口的方法无缝替换。
如何使用接口？
首先要解决的问题是，在你的代码中是否适合使用接口。如果是小项目，使用接口会增加代码的复杂度。所以你要确定使用接口的情况下，是否是益处大于弊端。如果要使用接口，下面有几条建议：
1.引用Interface 类到你的页面文件。interface的源文件你可以再如下站点找到: http://jsdesignpatterns.com/.
2.检查你的代码，确定哪些方法需要抽象到接口里面。
3.创建接口对象，没个接口对象里面包含一组相关的方法。
4.移除所有构造器验证，我们将使用第三种接口实现方式，也就是鸭子类型。
5.用Interface.ensureImplements替代构造器验证。
您可能感兴趣的文章:
小议javascript 设计模式 推荐
JavaScript 设计模式之组合模式解析
javascript 设计模式之单体模式 面向对象学习基础
JavaScript 设计模式 安全沙箱模式
JavaScript设计模式之观察者模式（发布者-订阅者模式）
JavaScript设计模式之原型模式(Object.create与prototype)介绍
JavaScript设计模式之工厂方法模式介绍
javascript设计模式之中介者模式Mediator
学习JavaScript设计模式之责任链模式
上一节中，我们完成了CEF各基本组件的封装，并完成了浏览器基本功能的实现。 >>点这里回顾上节内容
本节我们将尝试扩展所实现的各组件，实现浏览器与页面的双向通信。
本篇的小目标：
上一节曾提到过，CEF应用在默认情况下包含很多子进程，这些进程会共享同一个执行入口。除了主进程的各类处理接口外，CEF还提供了各类子进程的处理接口。而 页面到浏览器的消息通道 就可以借助对 渲染进程 的控制来实现，整体流程如下：
完成上述步骤后，在页面调用对应的消息通道函数时，V8处理器则会相应地进行处理，从而完成消息的发送。
另一方面，实现 浏览器到页面 的消息通道和第二节中基于Qt WebEngine的方法类似，CEF也提供了执行JS脚本的方法，只需在页面中定义好对应的消息接口，并通过执行脚本方法执行该接口即可完成消息的发送。
因此，实现双向通道主要的问题集中在针对渲染进程处理和JS脚本执行的扩展上。接下来先就渲染进程处理进行说明。
为了实现对渲染进程的处理，我们首先需要向上一节中封装的QCefContext中添加对渲染进程入口的解析和处理。具体实现如下：
上面的实现除了处理了CEF主进程外，还判断了子进程是否为渲染进程（Windows环境下的renderer进程和Linux环境下的zygote进程），如果发现当前处理的是渲染进程，则创建一个渲染进程处理器QCefRenderHandler的实例。QCefRenderHandler的声明如下：
和主进程CefApp的实现类似，这里也实现了CefApp接口，此外额外实现了CefRenderProcessHandler接口的OnContextCreated方法，来获取V8上下文的引用，具体实现如下：
上面的实现将sendMessage函数定义为消息通道，并注册到了window对象上。sendMessage函数的具体实现则放在v8Handler的实现中。QCefV8Handler声明如下：
QCefV8Handler通过实现CEF V8处理器的Execute执行方法，完成对所加载的JS函数的过滤，并进行相应的处理，实现如下：
这里首先对函数名和参数进行了校验，之后调用CefBrowser的IPC方法SendProcessMessage向主进程的CefClient发送消息，从而完成页面向浏览器主进程消息的传递。
要实现页面到浏览器的消息通道，除了完成了上面渲染进程的控制扩展，我们还需要在QCefClient中添加接收IPC消息的接口实现。首先在QCefClient头文件中声明对CefClient接口的重载：
然后实现这个接口，完成消息的接收处理：
可以看到这里只是对收到的消息进行了简单的转换，并通过信号发送给感兴趣的下游控件使用。在第四小节的实现中，我们将QCefClient封装到了QCefView中，因此在QCefView中也需要将这个信号转发给它的下游控件：
这样，QCefView接收JS消息的通道就实现完成了。
这里额外讲解一下有关js alert的特殊处理。要实现js调用alert方法时的弹窗提醒，需要额外在CefClient中实现CefJSDialogHandler接口的OnJSDialog方法，参考实现如下：
承前所述，浏览器到页面的消息发送通过CEF的JS脚本执行接口实现。首先在QCefView中，声明并实现一个执行JS脚本的方法：
然后指定一个特定的JS方法，作为消息通道使用：
如此，QCefView发送JS的通道也实现完成了。
完成了消息通道的实现，接下来我们实际使用一下我们定义好的消息通道。
首先是Qt端的实现，在MainDlg的initWebView方法中，添加对JS消息的监听，并将监听到的消息通过QMessageBox显示出来：
然后添加文本输入和发送按钮，并在按钮点击信号对应的槽中调用QCefView的消息发送方法：
接下来在页面端实现消息接收和发送的接口msgutils.js：
可以看到这里我们使用了上面定义的recvMessage和sendMessage两个函数。然后在页面上调用这些接口：
实际运行一下浏览器，并加载我们实现的这个页面，消息发送效果如下：
有关CEF消息通道的讲解就先进行到这里。下一节将分析使用CEF接口实现Https双向认证的方法。
>>返回系列索引
[1] Chromium Embedded Framework官网
[2] Chromium Embedded Framework官方教程
一个基于node.js的轻量级 API mock服务 。
在存放mock数据的文件夹下执行命令启动服务。
如果mock数据文件放在名为 mock-data 的文件夹下，则在 mock-data 文件夹下执行以下命令。
以下命令默认端口为 7777
或者使用自定义端口
服务启动后，访问地址为
在存放mock数据的目录下新建 .json 或者 .js 为后辍的文件。
mock规则示例如下：
如果对同一接口分别创建了 js 和 json 两个mock文件，会优先取 js文件 的数据。
mock文件名必须和API接口的文件名一致，才能将API和mock文件匹配。
示例:
示例：
1） 先安装包
2） 在任意位置新建一个文件夹 mock-test
3） 在 mock-test 目录下新建mock数据文件 test.json ，并添加内容如下：
4） 在 mock-test 目录下面执行命令启动mock服务 (默认端口7777)
5） 打开浏览器，输入以下地址，访问mock文件
请求地址只要以 test 结尾的，都可以访问到上面创建的 test.json 文件
6） 项目中使用
以webpack4为例：
Github仓库源码地址： https://github.com/ahbool/mock123 ，欢迎 +Star
