再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧!
前几次已经和大家分享过了,如何实现javascript的封装继承和多态,这次我们开始正式介绍javascript设计模式。
这次我们要介绍的是创建型设计模式,创建型设计模式是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。
在创建型设计模式中,主要为大家分享的有简单工厂模式,工厂方法模式,抽象工厂模式,建造者模式,原型模式,单例模式。本次主要和大家分享,简单工厂模式。
简单工厂模式
简单工厂模式(Simple Factory): 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象的实例。主要用来创建同一类对象。
这样说有可能概念很模糊,下面我用示例给大家演示
如果我们要写一组js方法分别要根据不同情况弹出alert(提示框),Confirm(确认框),Prompt(可输入提示框),我们会怎么做?
就谈谈我吧,要换做以前我会直接调用这3个方法,哪里使用哪里直接调用
function TestAlert(){
alert("这是一个提示框!");
}
function TestConfirm(){
confirm("这是一个确认框!")
}
function TestPrompt(){
prompt("今天天气怎么样!","");
}
但是,如果需求更改,我要弹出别的提示,我有可能会再写3个方法
function TestAgainAlert(){
alert("这又是一个提示框!");
}
function TestAgainConfirm(){
confirm("这又是一个确认框!")
}
function TestAgainPrompt(){
prompt("明天天气怎么样!","");
}
以前或许觉得没什么就复制粘贴改改就行,但是如果写的多了,有可能方法在哪自己都忘了还要一个个去找,但是有了封装的概念之后,我可能会这么改,我可以把这三个提示框看成3个类,分别是提示类,确认类,可输入提示类
var AlertClass=function(text){
this.content=text;
}
AlertClass.prototype.show=function(){
alert(this.content);
};
我们来看看调用
var TestAlert=new AlertClass("这是一个提示框!");
TestAlert.show();
其他的类同理
//确认类
var ConfirmClass=function(text){
this.content=text;
}
ConfirmClass.prototype.show=function(){
confirm(this.content);
};
var TestConfirm=new ConfirmClass("这是一个确认框!");
TestConfirm.show();
//可输入提示类
var PromptClass=function(text){
this.content=text;
}
PromptClass.prototype.show=function(){
prompt(this.content);
};
var TestPrompt=new PromptClass("今天天气怎么样!");
TestPrompt.show();
这样,我们封装成类了之后可以便于管理,但是还是很麻烦因为不同的情况我们需要,实例化不同的对象,这个时候我们可以通过简单工厂模式,去解决这个问题。
我们先定义一个工厂
var EjectFactory=function(name,text){
switch(name){
case 'alert':
return new AlertClass(text);
case 'confirm':
return new confirm(text);
case 'prompt':
return new PromptClass(text);
}
}
这样我们就创建了一个工厂,我们试着调用一下。
var TestAgainAlert=EjectFactory('alert','这是一个简单工厂模式创建的提示框!');
TestAgainAlert.show();
是不是看上去很简单,这样我们就可以通过一个工厂去决定我们要去实例化哪个类的实例,简单工厂模式的理念就是创建对象,像我刚才演示就是对不同的类实例化,当然除此之外简单工厂模式还可以用来创建相似的对象。
我们同样用上面的例子,我们可以看到上面的例子同样的都有content属性和show方法,那么我们可以把他们提出来。
var CreateEjectFactory=function(type,text){
//我们先创建一个对象,并对对象拓展属性和方法
var o=new Object();
o.content=text;
o.show=function(){
if(type=="alert") alert(text);
if(type=="confirm") confirm(text);
if(type=="prompt") prompt(text);
}
return o;
}
我们来调用一下
var TestAgainAlert=CreateEjectFactory('alert','这还是一个简单工厂模式创建的提示框!');
TestAgainAlert.show();
我们上述两种简单工厂模式的创建方法,第一种是通过实例化对象创建的,第二种是通过创建一个新对象然后包装其属性和功能来实现的,我们具体的选择还是要根据我们的实际需求来决定。
也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~
好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。
再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- 再起航,我的学习笔记之JavaScript设计模式07(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- 再起航,我的学习笔记之JavaScript设计模式30(简单模板模式)
简单模板模式 概念介绍 简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板 在实际的业务中如果我们需要进行前后台交互,或多 ...
- 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)
装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...
- 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)
中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...
- 再起航,我的学习笔记之JavaScript设计模式16(享元模式)
### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...
- 再起航,我的学习笔记之JavaScript设计模式06(工厂方法模式)
上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建 ...
- 【读书笔记】读《JavaScript设计模式》之工厂模式
一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它 ...
随机推荐
- sqlserver年月日转汉字大写
也是今天sql群里有人问,看起来这个问题挺简单,但是我不知道具体该怎么实现.百度了一把,找到一个高手贡献的答案,记一下. 参考链接 sql中转换中文日期 ------ 配合相关函数 ------ cr ...
- RPC簡介
RPC 技术原理 RPC ( Remote Procedure Call Protocol,远程过程调用协议 ): 客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...
- Linux sar命令工具详细介绍
sar命令工具详细介绍 by:授客 QQ:1033553122 由于篇幅限制,采用网盘分享, 下载地址: sar命令工具详细介绍.pdf
- vue图片上传及java存储图片(亲测可用)
1.前言 在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交.单纯的上传文件,java的存储图片的方式也有局限性. 我知道的后端保存图片有两种方式:一种是直接存储 ...
- JSON学习笔记-4
JSON 数组 1.访问数组 1.一次访问一个嵌套内容值var myObj, x; myObj = { "name":"网站", , "sites&q ...
- [Asp.net mvc]Asp.net mvc 使用Json传递数据
在之前的练习中一直是直接传递的Model到后台或是单个数据到后台,今天在使用中遇到了点问题,不能使用Model传递到后台,但又要实现多个数据到后台,实验了多次有了以下的解决方案,给自己留个笔记. 功能 ...
- Oracle EBS 键弹性域 段限定词取值
中间是回车符 对应编码时 Chr(10) substr(replace(t.compiled_value_attributes, Chr(10), ''), 3, 1)
- MVC $.Ajax()+Json实现数据库访问并显示数据
我们在使用搜索引擎时经常会看到这样一个效果 在输出输入相关文字时会有与之对应的相关提醒,作为一个MVC初学者我也做了一个简单版的“搜索工具”,分享给初学mvc和ajax的童鞋(各位大神勿喷),也加深我 ...
- 使用Instruments中的CoreAnimation分析动画
使用Instruments中的CoreAnimation分析动画 1. 打开Instruments中的CoreAnimation 2. 运行前的准备工作 要注意勾选以下选项,便于调试 3. 运行与调试 ...
- Linux grep/egrep命令详解
grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来 grep搜索成功,则返回0,如果搜索不成功,则返回1,如果搜索的文件不存在,则返回2. grep的规则表达式( ...