当前位置: 首页 > news >正文

(四)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)
}

相关文章:

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

工厂方法模式,通过对产品类的抽象&#xff0c;使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…...

新版GPT-4omini上线!快!真TM快!

大半夜&#xff0c;OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时&#xff0c;正准备去睡觉。mini版本质上是GPT-4o模型的精简版本&#xff0c;没有什么革命性的创新&#xff0c;因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线&#xff0c;官网和…...

【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现

更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…...

Tracy 小笔记:微信小程序 mpx 雷达图的实现

使用文档&#xff1a; https://www.kancloud.cn/xchhhh/wx-chart/399337 https://github.com/xiaolin3303/wx-charts https://gitee.com/mirrors/wx-charts/#wx-charts 参数说明&#xff1a; https://github.com/xiaolin3303/wx-charts/issues/56 下载 dist 里的 wx-charts-…...

Unity UGUI 之 Input Field

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Input Field是什么&#xff1f; 给玩家提供输入的输入框 2.重要参数 中英文对照着看…...

SpringBoot接入mongodb例子,并有增删改查功能

1&#xff0c;首先&#xff0c;在pom.xml中添加依赖&#xff1a; <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency><!--上面这…...

类和对象(三)

目录 一. 构造函数初始化列表 二. 类型转换 三. static成员 四. 友元 五. 内部类 六. 匿名对象 七. 对象拷贝时的编译器优化 一. 构造函数初始化列表 1. 之前我们实现构造函数时&#xff0c;初始化成员变量主要使用函数体内赋值&#xff0c;构造函数初始化还有一种方式&…...

Android SurfaceFlinger——GraphicBuffer初始化(二十九)

在 SurfaceFlinger 中,GraphicBuffer 是一个关键的数据结构,用于封装和管理图形数据的内存缓冲区。它不仅在 SurfaceFlinger 内部使用,也被其他组件如 GPU 驱动、摄像头服务、视频解码器等广泛利用,以实现高效的数据交换和图形渲染。 一、概述 GraphicBuffer 对象封装了一…...

pytest:4种方法实现 - 重复执行用例 - 展示迭代次数

简介&#xff1a;在软件测试中&#xff0c;我们经常需要重复执行测试用例&#xff0c;以确保代码的稳定性和可靠性。在本文中&#xff0c;我们将介绍四种方法来实现重复执行测试用例&#xff0c;并显示当前迭代次数和剩余执行次数。这些方法将帮助你更好地追踪测试执行过程&…...

一文入门SpringSecurity 5

目录 提示 Apache Shiro和Spring Security 认证和授权 RBAC Demo 环境 Controller 引入Spring Security 初探Security原理 认证授权图示​编辑 图中涉及的类和接口 流程总结 提示 Spring Security源码的接口名和方法名都很长&#xff0c;看源码的时候要见名知意&am…...

IPython的HTML魔法:%%html_header命令全解析

IPython的HTML魔法&#xff1a;%%html_header命令全解析 在IPython和Jupyter Notebook中&#xff0c;%%html_header是一个魔术命令&#xff0c;它允许用户在Notebook的单元格中添加HTML头部&#xff08;head&#xff09;内容。这个功能特别有用&#xff0c;当你需要定制Notebo…...

将SQL中的占位符替换成参数

将SQL中的占位符替换成参数 描述 描述 此方法是将SQL中的${}或#{}替换为直接拼接到SQL中或直接替换为?的形式。具体详情看下面代码。 import java.util.*; import java.util.regex.Matcher; import java.util.regex.Pattern;/*** author HuYu* date 2023-09-21* since 1.0**…...

锁相环 vivado FPGA

原理 同步状态/跟踪状态&#xff1a;相位差在2kπ附近&#xff0c;频率差为0到达上述状态的过程称为捕获过程锁相环的捕获带&#xff1a;delta w的最大值&#xff0c;大于这个值的话就不能捕获鉴相器&#xff08;PD-phase discriminator&#xff09;&#xff1a;相乘加LPF&…...

英语科技写作 希拉里·格拉斯曼-蒂(英文版)pdf下载

下载链接&#xff1a; 链接1&#xff1a;https://pan.baidu.com 链接2&#xff1a;/s/1fxRUGnlJrKEzQVF6k1GmBA 提取码&#xff1a;b69t 由于是英文版&#xff0c;可能有些看着不太方便&#xff0c;可以在网页版使用以下软件中英文对照着看&#xff0c;看着更舒服&#xff0c;…...

《Dynamic Statistical Learning in Massive Datastreams》论文阅读笔记

论文地址: https://www3.stat.sinica.edu.tw/ss_newpaper/SS-2023-0195_na.pdf 论文题目翻译&#xff1a;《在大规模数据流中的动态统计学习》 核心观点&#xff1a; 动态跟踪和筛选框架&#xff08;DTS&#xff09;&#xff1a;论文提出了一个在线学习和模型更新的新框架&…...

【数据分享】2008-2022年我国省市县三级的逐日NO2数据(excel\shp格式)

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000-2022年的省市县三级的逐日PM2.5数据、2013-2022年的省市县三级的逐日CO数据和2013-2022年的省市县三级的逐日SO2数据&#xff08;均可查看之前的文章获悉详情&#xff09;&#xff01; 本次…...

JavaEE (1)

web开发概述 所谓web开发,指的是从网页中向后端程序发送请求,与后端程序进行 交互. 流程图如下 Web服务器是指驻留于因特网上某种类型计算机的程序. 可以向浏览器等Web客户端提供文档&#xff0c;也可以放置网站文件&#xff0c;让全世界浏览&#xff1b; 它是一个容器&…...

事务、函数和索引

什么是事务&#xff1f; 事务&#xff08;Transaction&#xff09;&#xff0c;就是将一组SQL语句放在同一批次内去执行&#xff0c;如果一个SQL语句出错&#xff0c;则该批次内 的所有SQL都将被取消执行。 特点 一个事务中如果有一个数据库操作失败&#xff0c;那么整个事务…...

Android APP 基于RecyclerView框架工程(知识体系积累)

说明&#xff1a;这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来&#xff08;比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多&#xff0c;工程量的增加&#xff0c;后期想高效的分析和查找并不容易&#xff09;&#xf…...

【iOS】GCD

参考文章&#xff1a;GCD函数和队列原理探索 之前写项目的时候&#xff0c;进行耗时的网络请求使用GCD处理过异步请求&#xff0c;但对一些概念都很模糊&#xff0c;这次就来系统学习一下GCD相关 相关概念 什么是GCD&#xff1f; Grand Center Dispatch简称GCD&#xff0c;是…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

【计算机网络】SDN

SDN这种新型网络体系结构的核心思想&#xff1a;把网络的控制层面与数据层面分离&#xff0c;而让控制层面利用软件来控制数据层面中的许多设备。 OpenFlow协议可以被看成是SDN体系结构中控制层面与数据层面之间的通信接口。 在SDN中取代传统路由器中转发表的是“流表”&…...

Linux 内核内存管理子系统全面解析与体系构建

一、前言: 为什么内存管理是核心知识 内存管理是 Linux 内核最核心也最复杂的子系统之一&#xff0c;其作用包括&#xff1a; 为软件提供独立的虚拟内存空间&#xff0c;实现安全隔离分配/回收物理内存资源&#xff0c;维持系统稳定支持不同类型的内存分配器&#xff0c;最优…...

分类数据集 - 场景分类数据集下载

数据集介绍&#xff1a;自然场景分类数据集&#xff0c;真实场景高质量图片数据&#xff1b;适用实际项目应用&#xff1a;自然场景下场景分类项目&#xff0c;以及作为通用场景分类数据集场景数据的补充&#xff1b;数据集类别&#xff1a;buildings、forest、glacier、mounta…...

gorm 配置数据库

介绍 GORM 是 Go 语言中最流行的 ORM&#xff08;对象关系映射&#xff09;库之一&#xff0c;基于数据库操作的封装&#xff0c;提供类似 Django ORM / SQLAlchemy 的开发体验。 特性描述支持多种数据库MySQL、PostgreSQL、SQLite、SQL Server、ClickHouse 等自动迁移自动根…...