JS 设计模式一（接口）

stackfing 发布于2019-08-19 18:12 / 3271人阅读

摘要：例如，我有一个父类，定义了一个的接口。设计模式的一个例子以上是书中的实现方法。可以看到每次在使用前都会做一次接口的遍历这样会大大影响效率。所以我把他修改为这种方式实现，已达到代码中给提示的目的来实现接口的个设计模式。

什么是接口

接口是父类要求子类实现的方法，但是父类并不规定子类应该如何实现。例如，我有一个Person父类，定义了一个job的接口。然后定义一个Student类继承Person这个父类。他在就一定要定义job这个函数。

接口之利

在面向对象的编程中接口有一定的自我描述性。并能促进代码的重用。接口可以告诉要使用他的程序员这个类实现了哪些方法。一个程序员为类写下了接口，第二个程序员就只要实现了接口，就可以方便大的项目的解耦。也可以实现依赖倒转原则。

接口之弊

JS并没有提供接口的内置语法，因为JS是动态编译的。其他实现接口的语言如C++，JAVA都是在编译过程中实现对接口的校验。JS没有这个过程，要实现接口的校验一定会带来性能上的影响。

《javascript设计模式》的一个例子

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.length; i < len; i++) {
        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.length; i < len; i++) {
        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.length; j < methodsLen; j++) {
            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.");
            }
        }
    } 
};
var DynamicMap = new Interface("DynamicMap", ["centerOnPoint", "zoom", "draw"]);

function displayRoute(mapInstance) {
    Interface.ensureImplements(mapInstace, DynamicMap);
    mapInstance.centerOnPoint(12, 34);
    mapInstance.zoom(5);
    mapInstance.draw();
    ...
}

以上是书中的实现方法。

可以看到每次在使用前都会做一次接口的遍历这样会大大影响效率。而且这个有一定的强制性影响了JS代码的灵活性。我试着做了另一种方法来做到接口的提示作用。并减少强制性。

我的方法

var Interface = function (object, methods) {
  for (var i = 0, len = methods.length; i < len; i++) {
    if (typeof methods[i] !== "string") {
      throw new Error("Interface constructor expects method names to be passed in as a string.");
    }
    object[methods[i]] = function () {
      throw new Error(this.constructor.name + " Interface function is undefined");
    };
  }
};
function Person(name) {
  this.name = name;
  this.sayjob = function () {
    console.log("say");
    this.job();
  };
  this.sayage = function () {
    console.log("say");
    this.age();
  };
}
function creatPerson(name) {
  var object = new Person(name);
  Interface(object, ["job", "age"]);
  return object;
}
function Student(name) {
  this.__proto__ = creatPerson(name);
  this.job = function () {
    console.log("job is student");
  };
}
function creatStudent(name) {
  var object = new Student(name);
  return object;
}
var b = creatStudent("b");
b.job();
//b.age();
b.sayjob();
//b.sayage();

总结

我使用了JS的原型来实现，当接口函数被调用时候查看按照JS的运行原理当子类没有实现时候会调用父类中的方法弹出错误并给出提示。我认为接口的主要目的是做限制，不过在JS这种灵活度特别高的语言中，我个人认为这样的限制影响了性能。也带损失了灵活性。所以我把他修改为这种方式实现，已达到代码中给提示的目的来实现接口的个设计模式。

GPU云服务器云服务器接口设计短信接口设计 api接口设计 java开发接口设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79323.html

接口

摘要：前言这一系列的文章将主要基于设计模式这本书的要点还有一些翻阅的博客文章借鉴来源会注明外加自己的一些与直觉不同于其他设计模式类的书设计模式是一本讲述设计模式在动态语言中的实现的书它从设计的角度教人编写代码书中的许多实例代码来自实战项目对面向对前言这一系列的文章将主要基于js设计模式这本书的要点还有一些翻阅的博客文章,借鉴来源会注明,外加自己的一些demo与直觉.不同于其他设计模式类的...

zhjx922 2019-08-19 18:32 评论0 收藏0
JS 外观模式

摘要：外观模式在中常常用于解决浏览器兼容性问题。实现外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式的优势是易于使用，而且本身也比较轻量级。 1. 简介外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。外观模式在JS中常常用于解决浏览器兼容性问题。 2. 实现外观模式不仅简化类中的接口，而且...

BothEyes1993 2019-08-22 11:18 评论0 收藏0
JS设计模式学习_基础篇

摘要：工厂模式单例模式结构型设计模式关注于如何将类或对象组合成更大更复杂的结构，以简化设计。一、写在前面设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案当然我们可以用一个通俗的说法：设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，我们可能会条件反射一样自然而然想到符合这种场景的设计模式。比如，当系统中某个接口的结构已经无法满足...

venmos 2019-08-26 13:58 评论0 收藏0
关于前端接口测试的探索和挖坑

摘要：本文主要关注的是接口测试。所谓接口测试，就是检查系统提供的接口是否符合事先撰写的接口文档。作为接口测试的解决方案，我们必须具备通用性与易用性。开始最近几年，前端测试渐渐被人重视，相关的框架和方法已经比较成熟。断言库有should, expect, chai。单元测试框架有mocha, jasmine, Qunit。模拟浏览器测试环境有Phantomjs, Slimerjs。集...

Crazy_Coder 2019-08-20 16:46 评论0 收藏0
关于前端接口测试的探索和挖坑

摘要：本文主要关注的是接口测试。所谓接口测试，就是检查系统提供的接口是否符合事先撰写的接口文档。作为接口测试的解决方案，我们必须具备通用性与易用性。开始最近几年，前端测试渐渐被人重视，相关的框架和方法已经比较成熟。断言库有should, expect, chai。单元测试框架有mocha, jasmine, Qunit。模拟浏览器测试环境有Phantomjs, Slimerjs。集...

zxhaaa 2019-05-29 16:59 评论0 收藏0