(四)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前端开发中设计模式之工厂方法模式
工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…...
新版GPT-4omini上线!快!真TM快!
大半夜,OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时,正准备去睡觉。mini版本质上是GPT-4o模型的精简版本,没有什么革命性的创新,因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线,官网和…...
【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现
更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…...
Tracy 小笔记:微信小程序 mpx 雷达图的实现
使用文档: https://www.kancloud.cn/xchhhh/wx-chart/399337 https://github.com/xiaolin3303/wx-charts https://gitee.com/mirrors/wx-charts/#wx-charts 参数说明: https://github.com/xiaolin3303/wx-charts/issues/56 下载 dist 里的 wx-charts-…...
Unity UGUI 之 Input Field
本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 1.Input Field是什么? 给玩家提供输入的输入框 2.重要参数 中英文对照着看…...
SpringBoot接入mongodb例子,并有增删改查功能
1,首先,在pom.xml中添加依赖: <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency><!--上面这…...
类和对象(三)
目录 一. 构造函数初始化列表 二. 类型转换 三. static成员 四. 友元 五. 内部类 六. 匿名对象 七. 对象拷贝时的编译器优化 一. 构造函数初始化列表 1. 之前我们实现构造函数时,初始化成员变量主要使用函数体内赋值,构造函数初始化还有一种方式&…...
Android SurfaceFlinger——GraphicBuffer初始化(二十九)
在 SurfaceFlinger 中,GraphicBuffer 是一个关键的数据结构,用于封装和管理图形数据的内存缓冲区。它不仅在 SurfaceFlinger 内部使用,也被其他组件如 GPU 驱动、摄像头服务、视频解码器等广泛利用,以实现高效的数据交换和图形渲染。 一、概述 GraphicBuffer 对象封装了一…...
pytest:4种方法实现 - 重复执行用例 - 展示迭代次数
简介:在软件测试中,我们经常需要重复执行测试用例,以确保代码的稳定性和可靠性。在本文中,我们将介绍四种方法来实现重复执行测试用例,并显示当前迭代次数和剩余执行次数。这些方法将帮助你更好地追踪测试执行过程&…...
一文入门SpringSecurity 5
目录 提示 Apache Shiro和Spring Security 认证和授权 RBAC Demo 环境 Controller 引入Spring Security 初探Security原理 认证授权图示编辑 图中涉及的类和接口 流程总结 提示 Spring Security源码的接口名和方法名都很长,看源码的时候要见名知意&am…...
IPython的HTML魔法:%%html_header命令全解析
IPython的HTML魔法:%%html_header命令全解析 在IPython和Jupyter Notebook中,%%html_header是一个魔术命令,它允许用户在Notebook的单元格中添加HTML头部(head)内容。这个功能特别有用,当你需要定制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
原理 同步状态/跟踪状态:相位差在2kπ附近,频率差为0到达上述状态的过程称为捕获过程锁相环的捕获带:delta w的最大值,大于这个值的话就不能捕获鉴相器(PD-phase discriminator):相乘加LPF&…...
英语科技写作 希拉里·格拉斯曼-蒂(英文版)pdf下载
下载链接: 链接1:https://pan.baidu.com 链接2:/s/1fxRUGnlJrKEzQVF6k1GmBA 提取码:b69t 由于是英文版,可能有些看着不太方便,可以在网页版使用以下软件中英文对照着看,看着更舒服,…...
《Dynamic Statistical Learning in Massive Datastreams》论文阅读笔记
论文地址: https://www3.stat.sinica.edu.tw/ss_newpaper/SS-2023-0195_na.pdf 论文题目翻译:《在大规模数据流中的动态统计学习》 核心观点: 动态跟踪和筛选框架(DTS):论文提出了一个在线学习和模型更新的新框架&…...
【数据分享】2008-2022年我国省市县三级的逐日NO2数据(excel\shp格式)
空气质量数据是在我们日常研究中经常使用的数据!之前我们给大家分享了2000-2022年的省市县三级的逐日PM2.5数据、2013-2022年的省市县三级的逐日CO数据和2013-2022年的省市县三级的逐日SO2数据(均可查看之前的文章获悉详情)! 本次…...
JavaEE (1)
web开发概述 所谓web开发,指的是从网页中向后端程序发送请求,与后端程序进行 交互. 流程图如下 Web服务器是指驻留于因特网上某种类型计算机的程序. 可以向浏览器等Web客户端提供文档,也可以放置网站文件,让全世界浏览; 它是一个容器&…...
事务、函数和索引
什么是事务? 事务(Transaction),就是将一组SQL语句放在同一批次内去执行,如果一个SQL语句出错,则该批次内 的所有SQL都将被取消执行。 特点 一个事务中如果有一个数据库操作失败,那么整个事务…...
Android APP 基于RecyclerView框架工程(知识体系积累)
说明:这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来(比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多,工程量的增加,后期想高效的分析和查找并不容易)…...
【iOS】GCD
参考文章:GCD函数和队列原理探索 之前写项目的时候,进行耗时的网络请求使用GCD处理过异步请求,但对一些概念都很模糊,这次就来系统学习一下GCD相关 相关概念 什么是GCD? Grand Center Dispatch简称GCD,是…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
