(四)js前端开发中设计模式之工厂方法模式

工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例

const Java = function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'green'document.getElementById('container').appendChild(oDiv)})()
}const Php = function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'red'document.getElementById('container').appendChild(oDiv)})()
}const JavaScript = function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'pink'document.getElementById('container').appendChild(oDiv)})()
}

简单工厂模式,扩展的话需要改动两个地方,一个是工厂类,一个是具体产品类

function JobFactory(type, content) {switch (type) {case 'java':return new Java(content)breakcase 'javascript':return new JavaScript(content)break}
}JobFactory('java', 'Java 培训哪家强1111')

安全模式实例

var Demo = function () {}
Demo.prototype.show = function () {console.log('show')
}//正常使用
let d1 = new Demo()
d1.show() //show//非正常使用
// let d2 = Demo()
// d2.show() //报错//改造上面的 democonst Demo2 = function () {// if (this instanceof Demo2) {// return this// } else {// return new Demo2()// }console.log('🚀 ~ Demo2 ~ this:', this)if (!(this instanceof Demo2)) {console.log('🚀 ~ Demo2 ~ new Demo2():', new Demo2())return new Demo2()}
}Demo2.prototype.show = function () {console.log('show 999')
}let d2 = Demo2()
d2.show() //报错

工厂方法模式,扩展的话只需要改动工厂类

const Factory = function (type, content) {if (this instanceof Factory) {return new this[type](content)} else {return new Factory(type, content)}
}Factory.prototype = {//注意方法这里不能简写需要:functionJava: function (content) {//注意这里不能加thisthis.content = contentconsole.log('🚀 ~ content11111:', content);(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'green'document.getElementById('container').appendChild(oDiv)})()},JavaScript: function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'red'document.getElementById('container').appendChild(oDiv)})()},UIEvent: function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'pink'document.getElementById('container').appendChild(oDiv)})()},Php: function (content) {this.content = content;(function () {let oDiv = document.createElement('div')oDiv.innerHTML = contentoDiv.style.color = 'blue'document.getElementById('container').appendChild(oDiv)})()}
}

实现

const data = [{type: 'Java',content: 'Java 培训哪家强'},{type: 'JavaScript',content: 'JavaScript 培训哪家强'},{type: 'Php',content: 'PHP 培训哪家强'},{type: 'UIEvent',content: 'UIEvent 培训哪家强'}
]//创建实例
for (let i = 0; i < data.length; i++) {Factory(data[i].type, data[i].content)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端 Tips

js监听iframe window事件 : const iframe document.querySelector(iframe); iframe.contentWindow.NativeFunction function NativeFunction(para) {} vue keepAlive页面销毁&#xff1a; 方法用在keepAlive页面返回时。自测没问题。参考的某大神的&#xff0c;github来源…

HTTP 协议浅析

HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是应用层最重要的协议之一。它定义了客户端和服务器之间的数据传输方式&#xff0c;并成为万维网&#xff08;World Wide Web&#xff09;的基石。本文将深入解析 HTTP 协议的基础知识、工作…

机械学习—零基础学习日志(高数10——函数图形)

零基础为了学人工智能&#xff0c;真的开始复习高数 函数图像&#xff0c;开始新的学习&#xff01;本次就多做一做题目&#xff01; 第一题&#xff1a; 这个解法是有点不太懂的了。以后再多研究一下。再出一道题目。 张宇老师&#xff0c;比较多提示了大家&#xff0c;一定…

设计模式12-构建器

设计模式12-构建器 由来和动机原理思想构建器模式的C代码实现构建器模式中的各个组件详解1. 产品类&#xff08;Product&#xff09;2. 构建类&#xff08;Builder&#xff09;3. 具体构建类&#xff08;ConcreteBuilder&#xff09;4. 指挥者类&#xff08;Director&#xff0…

kettle从入门到精通 第七十九课 ETL之kettle kettle读取数据库BLOB字段转换为文件

上一课我们讲解了如何将文件以二进制流的方式写入数据库&#xff0c;本节课我们一起学习下如何将二进制数据读取为文件。 1、将二进制流转换为文件这里主要用到了步骤【文本文件输出】。表输入步骤从表中读取blob字段&#xff0c;java代码定义二进制流转换为文件的全路径&#…

Apache Tomcat文件包含漏洞复现(详细教程)

1.漏洞原理 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;其安装后会默认开启ajp连接器&#xff0c;方便与其他web服务器通过ajp协议进行交互。属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和…

设计模式13-单件模式

设计模式13-单件模式 写在前面对象性能模式典型模式1. 单例模式&#xff08;Singleton Pattern&#xff09;2. 享元模式&#xff08;Flyweight Pattern&#xff09;3. 原型模式&#xff08;Prototype Pattern&#xff09;4. 对象池模式&#xff08;Object Pool Pattern&#xf…

WVP+ZLMediaKit,和摄像头GB28181 实现摄像头播放

WVP&#xff08;webvideoplatform&#xff09;是一个基于gb/t28181-2016标准实现的开箱即用的网络视频平台&#xff0c;负责实现核心信令与设备管理后台部分&#xff0c;支持NAT穿透&#xff0c;支持海康、大华、宇视等品牌的IPC、NVR接入。它可以依托ZLMediaKit提供的功能&…

【Django】在vscode中新建Django应用并新增路由

文章目录 打开一个终端输入新建app命令在app下的views.py内写一个视图app路由引入该视图项目路由引入app路由项目(settings.py)引入app&#xff08;AntappConfig配置类&#xff09;运行项目 打开一个终端 输入新建app命令 python manage.py startapp antapp在app下的views.py内…

源代码加密软件有什么用?源代码怎么防泄密

在软件开发领域&#xff0c;源代码被视为软件的生命线&#xff0c;它包含了实现特定功能的算法、业务逻辑以及技术细节&#xff0c;是软件公司的核心竞争力所在。由于源代码的重要性&#xff0c;其安全防护变得尤为关键。一旦源代码泄露&#xff0c;企业不仅面临财务损失&#…

thinkphp8结合layui2.9 图片上传验证

<?php declare (strict_types 1);namespace app\index\validate;use think\Validate;class Upload extends Validate {/*** 定义验证规则* 格式&#xff1a;字段名 > [规则1,规则2...]** var array*/protected $rule [image > fileExt:jpg,png|fileSize:204800|fi…

DevExpress WinForms自动表单布局,创建高度可定制用户体验(二)

使用DevExpress WinForms的表单布局组件可以创建高度可定制的应用程序用户体验&#xff0c;从自动安排UI控件到按比例调整大小&#xff0c;DevExpress布局和数据布局控件都可以让您消除与基于像素表单设计相关的麻烦。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&a…

【JavaEE初阶】线程的概念及创建

目录 &#x1f4d5; 前言 &#x1f4d5; 认识线程&#xff08;Thread&#xff09; &#x1f6a9; 概念 &#x1f60a;线程是什么 &#x1f642; 为啥要有线程 &#x1f62d; 进程和线程的区别&#xff08;面试题重点&#xff09; &#x1f92d; Java的线程和操作系统线程…

自学Java第15Day

学习目标&#xff1a;面向对象进阶 学习内容&#xff1a;常用API 学习时间&#xff1a; 3 点-下午 6 点 学习产出&#xff1a; 1.Math 方法名说明public static int abs(int a)获取参数绝对值public static double ceil(double a)向上取整public static double floor(double …

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(八)-无人机探测与避让(DAA)机制

目录 引言 5.6 探测与避让&#xff08;DAA&#xff09;机制 5.6.1 基于PC5的探测与避让&#xff08;DAA&#xff09;机制 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Airc…

华为AR6300S路由器开启SSH远程登录

登录华为路由器&#xff1a; 使用控制台线连接到路由器的控制台端口或者通过Telnet或Web界面远程登录到设备。进入系统视图&#xff1a; 输入system-view&#xff08;或者简写为sys&#xff09;命令进入系统视图模式&#xff0c;这是配置全局参数的地方。生成RSA密钥对&#x…

2024年7月27日(星期六)骑行小河边村

2024年7月27日 (星期六&#xff09;骑行小河边村&#xff0c;早8:30到9:00&#xff0c;大观公园门口集合&#xff0c;9:00准时出发【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:大观公园门口集合 &#xff0c;家住东&#xff0c;西&#xff0…

【自然语言处理(NLP)】基本概念和应用

自然语言处理&#xff08;NLP&#xff09;&#xff1a;基本概念和应用 目录 引言自然语言处理的基本概念 词法分析句法分析语义分析上下文分析 自然语言处理的关键技术 词嵌入序列到序列模型注意力机制和Transformer预训练语言模型 自然语言处理的应用 文本分类情感分析机器翻…

NodeRed测试modbus RTU或modbus TCP通讯

目录标题 STEP1 添加modbus节点STEP2 查看是否安装成功STEP3 modbusTCP读取写入设置读取设置写入设置 STEP4 读写测试 STEP1 添加modbus节点 节点管理——控制板——安装 找到node-red-contrib-modbus&#xff0c;点击安装 STEP2 查看是否安装成功 安装成功后&#xff0c;左…

30.【C语言】函数系列下

1.嵌套调用 *定义&#xff1a;函数之间的互相调用 *例&#xff1a; int function1(int a, int b) {function2(b);//嵌套函数的调用return a; } //注意&#xff1a;不能将function2定义在function1的里面&#xff0c;这不叫嵌套函数的调用 void function2(int c) {} #include…