JavaScript的设计模式解析——工厂模式

2023-11-18

这几天一直在看《JavaScript高级程序设计》,在第六章面向对象的程序设计中,自我感觉对于小白而而言,会一定程度的难以理解(什么意思啊,根本不明白哇等等)注意:大神请略过,小小码农,不敢妄言。

首先,我们开门见山,什么是工厂模式,工厂模式能干什么,又是怎么用的呢

1.什么是工厂模式

这里说一下,工厂模式(Factory Pattern)是软件工程领域的一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。但是呢,对于JavaScript而言,在ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节。
划重点:工厂模式是用来创建对象的一种常见的设计模式。我们不暴露创建对象的具体逻辑,将逻辑封装在一个函数中,这个函数被视为一个工厂。
二话不说,直接上代码:

function createFactory(name,age,job) {
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function (){
		alert(this.name);
	}
	return 0;
}
//实例化
var person1 = new createFactory("Xiao Ming",24,"Software Engineer");
var person2 = new createFactory("Xiao Hong",20,"Doctor");

//输出控制台
console.log(person1.name);//Xiao Ming
console.log(person2.sayName());//Xiao Hong

在这里,createFactory函数就是视为一个工厂,在工厂里面,它能够根据接受的参数(name,age,job)来构建一个包含这些信息的对象。可以无数次的调用这个函数,每次都会返回(这里是三个属性和一个方法)的对象。
工厂用来干什么: 当然这个前文已经说过了,用函数来封装以特定接口创建对象的细节(不太明白?)。就是将相同的逻辑(属性和方法)封装在函数中,实现对象的创建。
怎么用它呢?
1、对象构建十分复杂;比如说,衣服我们穿的时候很简单,但是做衣服的过程却是很复杂。则做衣服的过程可以使用工厂模式。
2、需要依赖具体的环境创建不同的实例;比如说,在工厂里不仅仅是做衣服的,还有做其他的(鞋,袜子等等),这些东西可以看做都不同的实例
3、处理大量具有相同属性的小对象。比如说,我们就买一件衣服,就没必要去工厂里生产。当需求量很大的时候,可以选择工厂。
划重点不能滥用工厂,会增加代码的复杂度。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript的设计模式解析——工厂模式 的相关文章

  • 如何从 JavaScript 中计算 HTML 表格的渲染高度?

    调整窗口大小时 我需要知道表格有多大 以便我可以动态地很好地适应中间的所有其他内容 表格高度仅取决于动态加载的内容 如何在 JavaScript 中计算表格的渲染高度 您可以使用element offsetHeight https deve
  • 将 Javascript 变量转换为 PHP 变量

    我想使用由 videoel getCurrentTime 函数返回给我的 javascript 变量 并将其转换为 php 变量 以便我能够将其添加到我的 SQL 插入查询中 例如 INSERT INTO tblData VALUES ph
  • React 渲染中的不变违规或 React 中迭代和返回的正确方法

    我在 React 渲染中遇到了持续存在的问题 这段代码 jsx React DOM var AnswerRows React createClass componentDidMount function render function th
  • Google 饼图未显示所有数据行

    我正在尝试绘制人口与国家名称的关系图 我发现 Google 可视化库仅渲染前几个 实际上数字似乎是随机的 具体取决于我使用的数据 有时添加 其他 条目 但它没有t 实际上具有其余条目的值 Example 1 With all countri
  • Three.js - 在代码中包含网格数据

    我有这个 Three js 代码 其中 JSON 加载器从文件 models mountain json 加载网格 var Three new function this scene new THREE Scene this camera
  • 是否可以将反应组件导出为非反应项目中的函数

    有没有办法在非 React 项目中将 React 组件导出为函数并传入 props 作为函数的参数 我最近用 create react app 完成了一个 React 项目 现在我想将它用于其他非 React 项目 纯 Javascript
  • 在 Angular2 项目中集成 Treant-js

    我正在尝试在 Angular2 项目中使用 treant js 但我正在努力解决如何正确集成它的问题 我有一个工作正常的 JavaScript HTML 示例 我正在尝试在 Angular2 中工作 我创建了一个组件 从 npm 添加了 t
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 使用 Lodash 的 TypeScript:_.map(["123", " 234 "], _.trim) 返回 boolean[]?

    我有一个字符串数组 它们已像这样分割 var searchValue 600 800 123 180 var groups searchValue split gt 600 800 123 180 因此项目周围可能存在空格 并且我想删除空格
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • 如何根据所需表单输入的值更改 CSS 样式

    我想知道如何编写 javascript 来改变所需的表单元素的样式 如果它们有价值的话就改变它们 我想要做的是当所需的文本字段为空时 在它们周围有一个彩色边框 并在它们有值时删除边框样式 我想做的是编写一个 javascript 函数来检查
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一

随机推荐

  • nginx配置主域名跳转www域名并支持ssl

    server listen 80 listen 443 ssl server name xxxx com return 301 https www xxx com request uri server listen 80 server na
  • 视频转码后有色差要如何处理

    目录 视频转码后有色差要如何处理 KEY COLOR STANDARD KEY COLOR RANGE 视频转码后有色差要如何处理 以下是回答 欢迎大家留言讨论补充 1 色差是如何产生的 1 有损压缩产生的质量损失 解决方法为尽可能的提高码
  • 如何用计算机计算log除法,对数计算器_如何使用计算器计算对数

    如何使用计算器计算对数 示例 使用Windows自带的计算器 这理假设要计算的对数是logaN a 32 N 2 1 打开计算器 快捷键WIN R 输入calc 然后回车 怎样使用科学计算器计算对数 计算机上的log都是默认以10为底的对数
  • c语言实现面向对象编程(const * ,* const)

    c语言实现面向对象编程 面向对象思想 封装 继承 多态 代码实现 函数签名及返回值的约定 const 重载 参考了onlyshi的博客代码 orz传送门 参考了嵌入式实践一些代码 这里就不加了 面向对象思想 面向对象编程 OOP 并不是一种
  • 千年虫及UNIX时间

    转自 http hi baidu com dugucloud blog item b903ba803e5192c59123d99d html 千年虫何来 在上个世纪 许多计算机系统只用二进制7 8位数 足够十进制二位数使用 表示年份 比如说
  • ANR触发机制分析

    ANR是一套监控Android应用程序响应是否及时的机制 可以把发生ANR比作是引爆炸弹 那么整个流程包含三部分组成 埋定时炸弹 system server进程启动倒计时 在规定时间内如果目标应用进程没有干完所有的活 则system ser
  • MySQL的基本语法

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于MySQL的相关操作吧 目录 Welcome Huihui s Code World 一 数据库 建立 查看 使用 删除 建库 查看数据库 使用数据库 删除数
  • decrypt()解密和encrypt()加密

    1 解密函数 select dbo decrypt StName from student 2 加密函数 select dbo encrypt StName from student
  • CxImage的编译及简单使用举例

    1 从http sourceforge net projects cximage 下载最新的CxImage 702源码 2 解压缩后 以管理员身份打开CxImageFull vc10 sln工程 在编译之前先将每个工程属性的Characte
  • Vue中props组件和slot标签的区别

    在 Vue 中 props 和 slot 都是组件之间进行通信的机制 它们的作用和应用场景有一些区别 props 是一种组件的数据传递机制 通过在父组件中以属性的形式向子组件传递数据 子组件接收这些数据 并可以进行相应的处理和渲染 prop
  • 每日一练——day2

    前言 小亭子正在努力的学习编程 接下来将开启编程题的练习 分享的文章都是学习的笔记和感悟 如有不妥之处希望大佬们批评指正 同时如果本文对你有帮助的话 烦请点赞关注支持一波 感激不尽 第一题 题目描述 链接 https www nowcode
  • Jenkins执行python代码

    在ide运行正常 在jenkins运行提示 模块不存在 找了一圈 原来是jenkin运行python的环境没设置 解决方式 在Manage Jenkins System Configuration Configure System中设置全局
  • WSL2连接到宿主Windows程序的网络代理设置

    WSL2想要连上宿主机Windows里设置的网络代理端口很是蛋疼 前置条件 PS C Users overlord gt wsl l v NAME STATE VERSION Ubuntu 20 04 Running 2 获取Host和WS
  • Consul的简介与安装

    1 Consul简介 Consul是一套开源的分布式服务发现和配置管理系统 由HashiCorp公司用Go语言开发 Consul提供了微服务系统中的服务治理 配置中心 控制总线等功能 这些功能中的每一个都可以根据需要单独使用 也可以一起使用
  • wsl配置

    文章目录 1 systemd服务开启 2 固定IP 2 1 官网的方案 2 2 通过WSL2的Linux子系统设置静态IP 2 3 其他方案 3 运行 Linux GUI 应用安装 Chrome 浏览器 此文接我放弃了VMware 1 sy
  • vue(3)调整 App.vue 文件和router路由

    调整 App vue 文件 我们先把默认项目里面没用的东西先删除掉 把代码调整为下面的样子
  • js延迟加载的性能优化

    js的延迟加载有助于提高页面的加载速度 特别是竞价优化站是有一定的好处 今天来说说我是如何优化竞价站打开速度 案例 http yzmb pengchenggroup cn 动态创建DOM方式
  • 每日一题——有向网的邻接矩阵、邻接表、逆邻接表创建、打印及深度、广度遍历

    有向网的三种创建和深度广度遍历 include
  • 基于骨骼的行为识别笔记(NTU RGBD数据集解析)

    目录 1 人类行为 层次 2 输入数据 3 基于骨架的行为识别 4 数据集 4 1 NTU RGBD 4 1 1 下载方式 4 1 2 Benchmark 5 相关论文 5 1 Skeleton based Action Recogniti
  • JavaScript的设计模式解析——工厂模式

    这几天一直在看 JavaScript高级程序设计 在第六章面向对象的程序设计中 自我感觉对于小白而而言 会一定程度的难以理解 什么意思啊 根本不明白哇等等 注意 大神请略过 小小码农 不敢妄言 首先 我们开门见山 什么是工厂模式 工厂模式能