我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧!

前两次我们分享了简单工厂模式,和工厂方法模式,这一次我们接着来分享抽象工厂模式

抽象工厂模式

抽象工厂模式(Abstract Factory): 通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。

在了解抽象工厂模式前,我们要先了解一下如何在JavaScript中实现抽象类。

我们知道JavaScript中没有abstract所以我们无法像传统的面向对象语言一样轻松的创建一个抽象类,但是我们可以在类的方法中手动地抛出错误来模拟抽象类。

abstract修饰符可以用于类、方法、属性、事件和索引指示器(indexer),表示其为抽象成员,抽象方法是没有方法体的方法。

我们创建一个学生抽象类,当直接使用其实例对象的方法时,我们让其抛出错误 。

  1. var Students=function(){};
  2. Students.prototype={
  3. getName:function(){
  4. throw new Error('抽象方法不能被调用');
  5. },
  6. getCourse:function(){
  7. throw new Error('抽象方法不能被调用');
  8. }
  9. };

这样我们就创建了一个抽象类,那么抽象类有什么作用呢?

我们现在创建的这个Students类其实什么都不能做,但是在继承上很有用,因为我们定义了一种类型,并定义了该类型所必备的方法,如果子类中没有重写这些方法,那么在调用的时候便会报错。

针对抽象类我们也有一套相关的模式,这个模式就是我们今天要介绍的抽象工厂模式。

抽象工厂模式,在javascript中一般不用来创建具体对象,我们一般用它作为父类来创建子类。

抽象工厂方法

  1. var AbstractFactory=function(ParentType,ChildType){
  2. //判断抽象工厂中是否有该抽象类
  3. if(typeof AbstractFactory[ParentType]==='function'){
  4. //缓存类
  5. function CacheClass(){};
  6. //继承父类属性和方法
  7. CacheClass.prototype=new AbstractFactory[ParentType]();
  8. //将子类的constructor指向子类
  9. ChildType.constructor=ChildType;
  10. //子类原型继承父类
  11. ChildType.prototype=new CacheClass();
  12. }else{
  13. //如果不存在这个抽象方法我们就抛出错误
  14. throw new Error('未创建该抽象类');
  15. }
  16. };

接着我们添加抽象属性

  1. AbstractFactory.Students=function(){
  2. this.type="Students";
  3. };
  4. AbstractFactory.Students.prototype={
  5. getName:function(){
  6. throw new Error('抽象方法不能被调用');
  7. },
  8. getCourse:function(){
  9. throw new Error('抽象方法不能被调用');
  10. }
  11. };

我们可以看到,抽象工厂其实就是一个实现子类继承父类的方法,在这个方法中五门需要通过传递子类以及要继承的父类的名称,并且在抽象工厂方法中又增加了一次对抽象类存在性的一次判断,如果存在我们就通过寄生式继承继承父类,如果不存在我们就抛出异常。

我们对抽象工厂添加抽象类也很特殊,因为抽象工厂是个方法,不需要实例化对象,所以我们只需为抽象工厂添加类的属性即可。

讲完了创建,我们接着来讲如何使用它们。

我们先创建一个学生子类

  1. var Primary=function(name,course){
  2. this.name=name;
  3. this.course=course;
  4. }

接着我们通过抽象工厂实现对Students抽象类的继承

  1. AbstractFactory("Students",Primary);
  2. Primary.prototype.getName=function(){
  3. return this.name;
  4. }
  5. Primary.prototype.getCourse=function(){
  6. return this.course;
  7. }

最后我们试着调用一下

  1. var student=new Primary("张三","数学");
  2. console.log(student.getName());//张三
  3. console.log(student.getCourse());//数学
  4. console.log(student.type);//Students

抽象工厂模式是设计模式中最抽象的一种,也是创建模式中唯一一种抽象化创建模式,该模式创建出的结果不是一个真实的对象实例,而是一个类簇,它制定了类的结构,这也就和我们之前介绍的简单工厂模式创建单一对象,工厂方法模式创建多类对象有了区别,但是由于JavaScript中不支持抽象化创建和虚方法,所以这种模式不能像其他面向对象语言中应用的那么广泛。

也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。

欢迎转载,转载请注明作者,原文出处。

再起航,我的学习笔记之JavaScript设计模式07(抽象工厂模式)的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...

  2. 再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  3. 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  4. 再起航,我的学习笔记之JavaScript设计模式30(简单模板模式)

    简单模板模式 概念介绍 简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板 在实际的业务中如果我们需要进行前后台交互,或多 ...

  5. 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)

    装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...

  6. 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)

    中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...

  7. 再起航,我的学习笔记之JavaScript设计模式16(享元模式)

    ### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...

  8. 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

  9. 再起航,我的学习笔记之JavaScript设计模式02

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

随机推荐

  1. Fastify 系列教程一 (路由和日志)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  2. 【代码笔记】iOS-单击手势的添加

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  3. sqlserver年月日转汉字大写--自定义函数--繁体

    两个自定义函数结合 函数一: create function convertNumToChinese ()) ) as begin ) ' set @temStr = '壹' ' set @temSt ...

  4. mysql 的varchar类型小记

    参考链接:MySQL的varchar长度问题 今天用mysql做一个demo,创建了个表: -- 借款表 CREATE TABLE jk ( id ) NOT NULL auto_increment, ...

  5. elixir 模式匹配

    elixir 模式匹配刚接触还是有点不习惯,在Elixir里,=操作符被称为匹配操作符 iex(29)> x = 11iex(30)> x1iex(31)> 1 = x1iex(32 ...

  6. Android获取SD卡路径及SDCard内存的方法

    这篇文章主要介绍了Android获取SD卡路径及SDCard内存的方法,较为详细的分析了Android针对SD卡操作所涉及的类及其具体函数功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了A ...

  7. ExpandableListView控件实现二级列表

    效果图如下: 二级列表附有点击事件. 1.布局文件: 此处加了一个自定义的导航RelativeLayout,记得注activity的时候添加 android:theme="@style/Th ...

  8. 搭建Kafka开发环境

    Kafka版本是:kafka_2.10-0.8.2.1 1.maven工程方式 在pom.xml中配置kafka依赖 1 2 3 4 5 <dependency>     <grou ...

  9. Linux 运维工程师一定要知道的六类好习惯和23个教训

    一.线上操作规范 1.测试使用当初学习Linux的使用,从基础到服务到集群,都是在虚拟机做的,虽然老师告诉我们跟真机没有什么差别,可是对真实环境的渴望日渐上升,不过虚拟机的各种快照却让我们养成了各种手 ...

  10. MVC $.Ajax()+Json实现数据库访问并显示数据

    我们在使用搜索引擎时经常会看到这样一个效果 在输出输入相关文字时会有与之对应的相关提醒,作为一个MVC初学者我也做了一个简单版的“搜索工具”,分享给初学mvc和ajax的童鞋(各位大神勿喷),也加深我 ...