javascript设计模式之创建型设计模式

简单工厂模式

 简单工厂模式，又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例

 简单工厂的理念就是创建对象

栗子一：

//比如说一个水果店，里面有很多种类的水果

//苹果基类
var Apple = function() {
	this.descr = '苹果有“智慧果”、“记忆果”的美称';
}

Apple.prototype = {
	getPrice : function() {
        console.log('10元一斤');
	},
	getArea : function() {
		console.log('源产地美国')
	}
}


//梨基类
var Pear = function() {
	this.descr = ' 梨是最常见的水果之一，秋天吃梨有润肺除燥的功效'
}
Pear.prototype = {
	getPrice : function() {
        console.log('8元一斤');
	},
	getArea : function() {
		console.log('源产地华北地区')
	}
}
//草莓基类
var Strawberry = function() {
	this.descr = ' 常吃草莓不仅能有效防止健康细胞发生癌变，还可以降低患乳腺癌、结肠癌、前列腺癌的风险'
}
Strawberry.prototype = {
	getPrice : function() {
        console.log('20元一斤');
	},
	getArea : function() {
		console.log('源产地亚热带地区')
	}
}
//水果店
var fruitShop = function(name) {
	switch(name) {
		case 'A':
		  return new Apple();
		case 'P':
		  return new Pear();
		case 'S':
		  return new Strawberry()
	}
}

var apple = fruitShop('A');

栗子二：

//创建一本书
function cearteBook(name,time,type) {
	var o = new Object();
	o.name = name;
	o.time = time;
	o.type = type;
	o.getName = function() {
		console.log(this.name);
	}
	return o;
}

var book1 = createBook('js book',2017,'js');

var boo2 = createBook('css book',2017,'css');

book1.getName();

book2.getName();

栗子三：

//提示框的工厂方法

function createPop(type,text){
	var o = new Object();
	o.content = text;
	o.show = function() {
		this.style.display="block";
	}
	if(type == 'alert') {
		//差异部分
	}
	if(type == 'prompt') {
		//差异部分
	}
	if(type == 'confirm') {
		//差异部分
	}
	return o;
}

var userNameAlert = createPop('alert','用户名只能是26个字母和数字')

工厂方法模式

//安全模式创建工厂类
var Factory = function(type,content){
	if(this instanceof Factory) {
		var s = new this[type](content);
		return s;
	}else{
		return new Factory(type,content)
	}
}

//工厂原型中设置创建所有类型数据对象的基类

Factory.prototye = {
	Java:function(content) {
        this.content = content;
		(function(content) {
			var div = document.createElement('div');
			div.innerHTML = content;
			div.style.border = "1px solid red";
			document.getElementById('container').appendChild(div);
		})(content);
	},
	JavaScript:function(content) {
       //...
	},
	UI:function(content) {
		this.content = content;
		(function(content) {
			var div = document.createElement('div');
			div.innerHTML = content;
			div.style.border = "1px solid red";
			document.getElementById('container').appendChild(div);
		})(content);
	},
	PHP:function(content) {
       //...
	}
}

var data = [
    {type:'css',content:'css魔法师'},
    {type:'css',content:'css魔法师'},
    {type:'css',content:'css魔法师'}
]

for(var i = 6;i>=0;i--){
	Factory(s[i].type,s[i].content);
}

小结： 工厂模式主要是为了创建对象实例或者类簇(抽象工厂)，关心最终产出的是什么

建造者模式

建造者模式的目的是为了创建对象，它更多关心的是创建这个对象的整个过程

//创建一位人类

var Human = function(param) {
	//技能
	this.skill = param && param.skill || '保密';
	//兴趣爱好
	this.hobby = param && param .hobby || '保密';
}

//类人原型方法
Human.prototype = {
	getSkill : function() {
		return this.skill;
	},
	getHobby : function() {
		return this.hobby;
	}
}

//实例化姓名

var Named = function(name) {
	var that = this;
	(function(name,that){
        this.wholeName = name;
        if(name.indexOf('') > -1) {
        	this.FirstName = name.slice(0,name.indexOf(''));
        	this.secondName = name.slice(name.indexOf(''));
        }
	})(name,that)
}

//实例化职位类

var Work = function(work) {
	var that = this;
	//构造器
	//构造函数中通过传入的职位特性来设置相应职位以及描述
	(function(work,that){
		switch(work) {
			case 'code':
			  that.work = '工程师';
              that.workDescript = '每天沉醉于编程';
              break;
            case 'UI':
            case 'UE':
              that.work = '设计师';
              that.workDescript = '设计更似一种艺术';
              break;
            case 'teach':
              that.work = '教师';
              that.workDescript = '教书育人';
              break;
            default:
              that.work = work;
              that.workDescript = '对不起，我们还不清楚您所选择职位的相关描述';
		}
	})(work,that)
}

//更换期望的职位
Work.prototype.changeWork = function(work) {
	this.work = work;
}

//添加对职位的描述
Work.prototype.changeDescript = function(setence) {
	this.workDescript = setence;
}


//创造一位应聘者

var Person = function(name,work) {
	var _person = new Human();
	_person.name = new Named(name);
	_person.work = new Work(work);
	return _person;
}

var person = new Person('xiaoming','code');

console.log(person.skill);
console.log(person.work.work);

注：栗子来自：张容铭《javascript设计模式》

原型模式

原型模式就是将可复用的、可共享的、耗时大的从基类中提出来然后放在其原型中，然后子类通过组合继承或者寄生组合式继承而将方法和属性继承下来

//图片轮播类

var LoopImages = function(imgArr,container) {
	this.imagesArray = imgArr; //轮播图片数组
	this.container = container; //轮播图片容器
}
LoopImages.prototype = {
	createImage : function() {
		console.log('创建轮播图片')
	},
	//切换下一张图片
	changeImage : function() {
		console.log('切换图片')
	}
}

//上下滑动切换类
var slideLoopImg = function(imgArr,container) {
	LoopImages.call(this,imgArr,container);
	//构造函数继承图片轮播类
}

SlideLoopImg.prototype = new LoopImages();
//重写继承的切换下一张图片方法
SlideLoopImg.prototype.changeImage = function() {
	console.log('....')
} 

//渐隐切换类
var FadeLoopImg = function(imgArr,container,arrow) {
	LoopImages.call(this,imgArr,container);
	this.arrow = arrow;
}
 FadeLoopImg.prototype = new LoopImages();
  FadeLoopImg.prototype.changeImage = function() {
	console.log('....')
} 

单例模式

单例模式：又被称为单体模式，是只允许实例化一次的对象类

var Buddle = {
	getById:function(id){
		return document.getElementById(id);
	},
	addEvent: function(e,obj,type,fn){
		var e = e || window.event;
		if(e.addEventListener){
           obj.addEventListener(type,fn,false);
		}else if(e.attachEvent){
			obj.attachEvent('on'+type,fn)
		}else{
			obj['on'+type] = fn
		}
	}
}

//调用
window.onload = function(){
  console.log(Buddle.getById('box'))
}