文档章节

JavaScript设计模式-工厂模式

达达前端
 达达前端
发布于 01/06 08:10
字数 2075
阅读 26
收藏 0

file

作者 | Jeskson

掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

什么是工厂模式,场景为你去买饺子吃,直接点餐,不用自己做,而餐厅要做好饺子(包饺子过程),做好直接卖给客户。

class Product{
 constructor(name) {
  this.name = name
 }
 init() {
  alert('init')
 }
 da1() {
  alert('da1')
 }
 da2() {
  alert('da2')
 }
}

class Creator {
 create(name) {
  return new Product(name)
 }
}

生成工厂

let creator = new Creator();

// 生成工厂实例
let p = creator.create('p1')
p.init()
p.da1()

jquery

class jquery {
 constructor(selector) {
  let slice = Array.prototype.slice
  let dom = slice.call(document.querySelectorAll(selecotr))
  let len = dom ? dom.length : 0
  for(let i = 0; i<len; i++) {
   this[i] = dom[i]
  }
  this.length = len
  this.selector=selector || ''
 }
 append(node){
 }
 addClass(name){
 }
 html(data){
 }
 //...
}
window.$ = function(selector) {
 return new jQuery(selector)
}

工厂模式的主要思想是将对象的创建与对象的实现分离。是一种关注对象创建概念的模式,如何使用工厂模式,当我们的对象或者组件设置涉及到高程度级别的复杂度,实例对象比较复杂的情况下适用工厂模式,多对象,适用于共同属性的对象,工厂模式可以成批量地生产模式。

工厂模式将逻辑封装在一个函数中,这个函数视为一个工厂,工厂模式根据抽象程度的不同分为,简单工厂,工厂方法,抽象工厂。

我们需要一个实例对象,需要一个工厂,作为一个函数,工厂函数中有各种各样的需求物品,那么你如何获取到你想要的实例。

简单工厂模式,由一个工厂对象决定创建某种产品对象类的实例。

// 函数
function person(name,age){
 // 实例对象
 var dada = new Object();
 // 属性
 dada.name ='dada';
 dada.age = 12;
 // 工作
 dada.job = function() {
  console.log(this.name, this.age);
 }
 return dada;
}
var da1 = person('da',12);

简单工厂模式(Simple Factory),又叫静态工厂方法,由一个工厂对象来决定创建某一种产品对象类的实例,主要用来创建同一类对象。工厂方法模式,通过对产品类的抽象使其创造业务只要负责用户创建多类产品的实例。

工厂模式,就是调用需要的功能到工厂里获取,不关心创建过程。工厂模式理解为产品从工厂获得。

简单工厂模式

file

工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式。

简单工厂

public class Factory{
    public static ISample creator(int which){
        if (which==1)
            return new SampleA();
        else if (which==2)
            return new SampleB();
    }
}

抽象工厂

工厂模式中有: 工厂方法(Factory Method) 抽象工厂(Abstract Factory).

public abstract class Factory{
    public abstract Sample creator();
    public abstract Sample2 creator(String name);
}
public class SimpleFactory extends Factory{
    public Sample creator(){
        .........
        return new SampleA
    }
    public Sample2 creator(String name){
        .........
        return new Sample2A
    }
}
 
public class BombFactory extends Factory{
    public Sample creator(){
        ......
        return new SampleB
    }
    public Sample2 creator(String name){
        ......
        return new Sample2B
    }
}

简单工厂模式

简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式,可以理解为是不同工厂模式的一个特殊实现。

file

简单工厂模式,使用一个类来生成实例,复杂工厂模式,使用子类来决定一个变量成员应该为哪个具体的类的实例。

工厂模式根据抽象程度的不同可以分为:

1.简单工厂 2.工厂方法 3.抽象工厂

file

file

file

工厂模式,把一个功能的相同代码,放到一个函数中,如何以后想实现这个功能就不需要重新写代码了,而是调用这个函数。体现了高内聚、低耦合的思想,减少页面的中的冗余代码,提高代码的重复利用率。

// 创建一个函数名为createPerson,参数name,age
function createPerson(name, age) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.it = function () {
        console.log(this.name + 'it');
    }
    return obj;
}

var p1 = createPerson('da1' , 12);
p1.it();

var p2 = createPerson('da2' , 13);
p2.it();

简单工厂模式的构建,工厂类,抽象产品类,具体产品类。

工厂类,是核心类,负责创建所有实例的内部逻辑,工厂类可以直接被调用创建我们的产品实例,抽象产品类,简单工厂模式所创建的所有对象的父类,负责描述所有实例所拥有的公共接口,具体产品类,为具体的实例对象。

file

第一,啥是简单工厂模式,简单工厂模式也可以叫静态工厂模式,实质是由一个工厂类传入的参数来动态决定应该创建哪一个产品类的实例,是由一个具体类的实例化交给一个静态工厂方法来执行,它不属于GOF的23种设计模式,但是现实中经常会用到,而且思想也非常简单。

第二,简单工厂的模式,结构包含有 工厂角色(简单工厂模式的核心),Factory,抽象产品角色(是所有具体产品角色的父类,它负责描述所有实例所共有的公共接口),Product,具体产品角色(简单工厂模式的创建目标),ConcreteProduct。

第三,简单的工厂模式,创建的对象要少一些,不会造成工厂方法中的业务逻辑太多,用户传入工厂的参数,想要东西的结果,不关心工厂创建本身。

第四,工厂方法,客户端不知道它所需要的对象的类,抽象工厂类通过其子类来指定创建哪个对象。

第五,简单工厂的优点就是明确了各自的职责和权利,有利于整个软件体系结构的优化。缺点就是违反了开闭原则,如果要新添加类,就要改变工厂类。

第六:

// 工厂对象
var gongchang = {};
// 工厂制作衣服
 gongchang.chanyifu = function(){
  // 工人
  this.gongren = 50;
  console.log("有"+this.gongren);
 }
// 工厂生产鞋子
 gongchang.chanxie = function(){
  this.gongren = 50;
  console.log("制作鞋子");
 }
 // 工厂运输
 gongchang.yunshu = function(){
  this.gongren = 20;
  console.log("运输");
 }
 // 工厂厂长
 gongchang.changzhang = function(name){
  return new gongchang[name]();
 }
 
 var da1 = gongchang.changzhang("da1");
 var da2 = gongchang.changzhang("da2");

 var dada = gongchang.changzhang("dada");
  // 工厂模式
  function createBook(name, time, type) {
    // 创建一个对象,并对对象拓展属性和方法
    var o = new Object()
    o.name = name
    o.time = time 
    o.type = type
    o.getName = function(){
      console.log(this.name)
    }
    // 将对象返回
    return o
  }

资料例子:

https://www.cnblogs.com/xiaogua/p/10502892.html

最后

欢迎加我微信(xiaoda0423),拉你进技术群,长期交流学习... 欢迎关注「达达前端」,认真学前端,做个有专业的技术人...

在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞👍 求关注❤️ 求分享👥 对暖男我来说真的

非常有用!!!

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info:

【作者】:Jeskson 【原创公众号】:达达前端小酒馆。 【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)! 【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
2019/01/04
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
从工厂模式说起,简单聊聊设计模式在前端中的应用

设计模式是一套可以被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式,是为了可重用代码,让代码更容易被他人理解并且提高代码的可靠性。 设计模式的基本原则...

罗辑思维前端开发团队
2019/07/26
0
0
[译] 你需要知道的7个JavaScript设计模式

原文地址 设计模式在JavaScript中用于在JavaScript的Web项目中解决一些常见问题的可重复解决方案。 简介 JavaScript设计模式是非常适合作为一种模式去提供问题的解决方案,但这并不能代表可以...

金刚小仓
2019/09/30
0
0
JavaScript设计模式系列三之单例模式(附案例源码)

文章初衷 设计模式其实旨在解决语言本身存在的缺陷 目前javaScript一些新的语法特性已经集成了一些设计模式的实现, 大家在写代码的时候,没必要为了用设计模式而去用设计模式, 那么我这边为什...

小钱钱阿圣
2017/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在Javascript数组的开头添加新的数组元素?

问题: I have a need to add or prepend elements at the beginning of an array. 我需要在数组的开头添加或添加元素。 For example, if my array looks like below: 例如,如果我的数组如下...

技术盛宴
2分钟前
5
0
利用Python实现SQL自动化

笔者在工作中经常要使用SQL,其不乏存在恼人的细微差异和种种限制,但说到底,它是数据行业的基石。因此,对于每一位数据领域的工作者,SQL都是不可或缺的。精通SQL意义非凡。 SQL是很不错,...

Python圈子
4分钟前
5
0
UI库

amazeui layUI

四季变幻
11分钟前
5
0
如何实现RSA签名与验签

md5,sha1,sha256等签名方式相信大家已经都非常熟悉了,今天介绍如何使用RSA进行签名。 RSA签名使用起来其实也是非常的简单,无非就是使用私钥进行签名,使用公钥进行验签。使用方法如下。 ...

专业写BUG的程序员
13分钟前
13
0
我的Spring Cloud(十):Zipkin 服务跟踪

一、概述 为什么要有服务跟踪,分布式系统中有很多个服务在相互调用,调用关系是错综复杂的,如果这时出现了问题,我们在进行问题排查的时候,或者在优化架构的时候,工作量就比较大,这时候...

Zing丶
14分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部