javascript设计模式-工厂方法模式
2024-08-24 12:28:02
工厂方法模式笔记
通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例
对于创建多类对象,简单工厂不太实用,这是简单工厂模式的应用局限,当然这正是工厂方法模式的价值之所在
通过工厂方法模式可以轻松的创建多个类的实例对象,而且创建对象的方式避免了使用者与对象类之间的耦合,用户不必关心创建该对象的具体类,只需调用工厂方法即可。
demo实例:为页面创建不同功能的按钮
按钮工厂类
/*按钮工厂类*/
var ButtonFactory=function(type,content){
if(this instanceof ButtonFactory){
var s = new this[type](content);
}else{
return new ButtonFactory(type,content);
}
}
工厂原型中设置创建所有类型数据对象的基类
//工厂原型中设置创建所有类型数据对象的基类
ButtonFactory.prototype = {
defaultBtn:function(content){
//默认/基本按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#333';
btn.style.background='#fff';
document.getElementById('container').appendChild(btn); })(content);
},
primaryBtn:function(content){
//原始按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#fff';
btn.style.background='#337ab7';
btn.style.borderColor='#2e6da4';
document.getElementById('container').appendChild(btn);
})(content);
},
successBtn:function(content){
//操作成功按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#fff';
btn.style.background='#5cb85c';
btn.style.borderColor='#4cae4c';
document.getElementById('container').appendChild(btn);
})(content);
},
infoBtn:function(content){
//弹出信息的按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#fff';
btn.style.background='#5bc0de';
btn.style.borderColor='#46b8da';
document.getElementById('container').appendChild(btn);
})(content);
},
warnBtn:function(content){
//谨慎操作的按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#fff';
btn.style.background='#f0ab4e';
btn.style.borderColor='#eea236';
document.getElementById('container').appendChild(btn);
})(content);
},
dangerBtn:function(content){
//危险动作的按钮
this.content = content;
(function(content){
var btn=document.createElement("button");
btn.innerHTML=content;
btn.style.color='#fff';
btn.style.background='#d9534f';
btn.style.borderColor='#d43f3a';
document.getElementById('container').appendChild(btn);
})(content);
}
}
//测试的数据
var data=[
{type:'defaultBtn',content:'默认按钮'},
{type:'primaryBtn',content:'原始按钮'},
{type:'successBtn',content:'成功按钮'},
{type:'infoBtn',content:'信息按钮'},
{type:'warnBtn',content:'警告按钮'},
{type:'dangerBtn',content:'危险按钮'},
];
循环生成多个对象实例
for(var i=5;i>0;i--){
ButtonFactory(data[i].type,data[i].content);
}
html中css代码
#container{width:500px;margin:100px auto;}
button{display: inline-block;padding: 6px 12px;margin-bottom:;font-size: 14px;font-weight:;line-height: 1.42857143;
text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;
cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
background-image: none;border: 1px solid transparent;border-radius: 4px;margin-right:5px;}
html代码
<div id="container"></div>
浏览器显示截图
最新文章
- 服务器三大体系SMP、NUMA、MPP介绍
- 解决libcurl7.50.3在windows XP SP3 VC++ 6.0下编译报错 unresolved external symbol __imp__IdnToAscii@20 unresolved external symbol __imp__IdnToUnicode@20
- WPF,Silverlight与XAML读书笔记第四十六 - 外观效果之三皮肤与主题
- 为什么接口类型可以直接new?
- Glide
- Wordpress固定链接设置
- Oracle中instr 函数的详解
- c++ 中static关键字
- Android(java)学习笔记86:案例短信发送器
- jfinal文件上传和form表单值为null的解决方法
- android ListView和GridView拖拽移位具体实现及拓展
- Mysql int(11) 和 int(1)
- vue 单页面应用实战
- SecureCRT 6.7.1 RI和谐 皴 补丁 方法
- 基于Jquery 简单实用的弹出提示框
- sqlite数据库之简单操作
- mysql自连接求累计金额
- mysql语法、特殊符号及正则表达式的使用
- Java基础 -- Java 抽象类 抽象方法
- HARD FAULT
热门文章
- CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总
- ASP.NET Core 1.1 Preview 1 简介(包含.NETCore 1.1升级公告)
- 解析大型.NET ERP系统 单据编码功能实现
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
- Java多线程系列--“JUC锁”03之 公平锁(一)
- SQL Tuning 基础概述03 - 使用sql_trace和10046事件跟踪执行计划
- javascript的变量作用域--对比js、php和c的for循环
- Eclipse 安装 SVN 的在线插件
- ASP.NET Core 中文文档 第三章 原理(16).NET开放Web接口(OWIN)
- 安装nodejs express框架时express命令行无效