javascript设计模式-工厂方法模式
工厂方法模式笔记
通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例
对于创建多类对象，简单工厂不太实用，这是简单工厂模式的应用局限，当然这正是工厂方法模式的价值之所在
通过工厂方法模式可以轻松的创建多个类的实例对象，而且创建对象的方式避免了使用者与对象类之间的耦合，用户不必关心创建该对象的具体类，只需调用工厂方法即可。
demo实例:为页面创建不同功能的按钮
按钮工厂类
1 /*按钮工厂类*/ 2 var ButtonFactory=function(type,content){ 3 if(this instanceof ButtonFactory){ 4 var s = new this[type](content); 5 }else{ 6 return new ButtonFactory(type,content); 7 } 8 }
工厂原型中设置创建所有类型数据对象的基类
1 //工厂原型中设置创建所有类型数据对象的基类 2 ButtonFactory.prototype = { 3 defaultBtn:function(content){ 4 //默认/基本按钮 5 this.content = content; 6 (function(content){ 7 var btn=document.createElement("button"); 8 btn.innerHTML=content; 9 btn.style.color='#333'; 10 btn.style.background='#fff'; 11 document.getElementById('container').appendChild(btn); 12 13 })(content); 14 }, 15 primaryBtn:function(content){ 16 //原始按钮 17 this.content = content; 18 (function(content){ 19 var btn=document.createElement("button"); 20 btn.innerHTML=content; 21 btn.style.color='#fff'; 22 btn.style.background='#337ab7'; 23 btn.style.borderColor='#2e6da4'; 24 document.getElementById('container').appendChild(btn); 25 })(content); 26 }, 27 successBtn:function(content){ 28 //操作成功按钮 29 this.content = content; 30 (function(content){ 31 var btn=document.createElement("button"); 32 btn.innerHTML=content; 33 btn.style.color='#fff'; 34 btn.style.background='#5cb85c'; 35 btn.style.borderColor='#4cae4c'; 36 document.getElementById('container').appendChild(btn); 37 })(content); 38 }, 39 infoBtn:function(content){ 40 //弹出信息的按钮 41 this.content = content; 42 (function(content){ 43 var btn=document.createElement("button"); 44 btn.innerHTML=content; 45 btn.style.color='#fff'; 46 btn.style.background='#5bc0de'; 47 btn.style.borderColor='#46b8da'; 48 document.getElementById('container').appendChild(btn); 49 })(content); 50 }, 51 warnBtn:function(content){ 52 //谨慎操作的按钮 53 this.content = content; 54 (function(content){ 55 var btn=document.createElement("button"); 56 btn.innerHTML=content; 57 btn.style.color='#fff'; 58 btn.style.background='#f0ab4e'; 59 btn.style.borderColor='#eea236'; 60 document.getElementById('container').appendChild(btn); 61 })(content); 62 }, 63 dangerBtn:function(content){ 64 //危险动作的按钮 65 this.content = content; 66 (function(content){ 67 var btn=document.createElement("button"); 68 btn.innerHTML=content; 69 btn.style.color='#fff'; 70 btn.style.background='#d9534f'; 71 btn.style.borderColor='#d43f3a'; 72 document.getElementById('container').appendChild(btn); 73 })(content); 74 } 75 }
//测试的数据
1 var data=[ 2 {type:'defaultBtn',content:'默认按钮'}, 3 {type:'primaryBtn',content:'原始按钮'}, 4 {type:'successBtn',content:'成功按钮'}, 5 {type:'infoBtn',content:'信息按钮'}, 6 {type:'warnBtn',content:'警告按钮'}, 7 {type:'dangerBtn',content:'危险按钮'}, 8 ];
循环生成多个对象实例
1 for(var i=5;i>0;i--){ 2 ButtonFactory(data[i].type,data[i].content); 3 }
html中css代码
1 #container{width:500px;margin:100px auto;} 2 button{display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143; 3 text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation; 4 cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; 5 background-image: none;border: 1px solid transparent;border-radius: 4px;margin-right:5px;}
html代码
1 <div id="container"></div>
浏览器显示截图
