工厂方法模式

// 工厂方法模式
// 案例：投放培训广告，有java用绿色字体、php用黄色字体红色背景

// 工厂方法模式
// 案例：投放培训广告，有java用绿色字体、php用黄色字体红色背景

// 创建JAVA学科类
var Java = function (content) {
	// 将内容保存在content里面以日后备用
	this.content = content;
	// 创建对象时，通过闭包直接执行，将内容按需求的样式插入到页面内
	(function(content){
		var div = document.createElement('div');
		div.innerHTML = content;
		div.style.color = 'green';
		document.getElementById('container').appendChild(div);
	})(content);
}

// 创建PHP学科类
var Php = function (content) {
	// 将内容保存在content里面以日后备用
	this.content = content;
	// 创建对象时，通过闭包直接执行，将内容按需求的样式插入到页面内
	(function(content){
		var div = document.createElement('div');
		div.innerHTML = content;
		div.style.color = 'yellow';
		div.style.background = 'red';
		document.getElementById('container').appendChild(div);
	})(content);
} 

// 学科类工厂
function JobFactory(type,content){
	switch(type){
		case 'java':
			return new Java(content);
		case 'php':
			return new Php(content);
	}
}

// 调用 两个学科
JobFactory('java','Java哪家强');
JobFactory('php','php');

// 问题：
// 如果还需要添加UI学科，js学科的话，就需要修改工厂以及新增学科类。如果经常添加就比较麻烦
// 解决办法：工厂方法模式
// 将工厂方法看作是一个实例化对象的工厂类，安全起见，我们采用安全模式类，而我们将创建对象的基类放在工厂方法类的原型中即可。
// 如果后续需要添加学科，只需在工厂原型中添加对象基类

// 问题：
// 如果还需要添加UI学科，js学科的话，就需要修改工厂以及新增学科类。如果经常添加就比较麻烦
// 解决办法：工厂方法模式
// 将工厂方法看作是一个实例化对象的工厂类，安全起见，我们采用安全模式类，而我们将创建对象的基类放在工厂方法类的原型中即可。
// 如果后续需要添加学科，只需在工厂原型中添加对象基类
var Factory = function(type,content){
	if (this instanceof Factory) {
		// 判断是否是Factory的子类  是否有new 是则返回工厂原型中的对象基类实例
		var s = new this[type](content);
		return s;
	}else{
		return new Factory(type, content);//没有new  重新返回new
	}
}

// 工厂原型中设置创建所有类型数据对象的基类
Factory.prototype = {
	Java:function (content) {
		// 将内容保存在content里面以日后备用
		this.content = content;
		// 创建对象时，通过闭包直接执行，将内容按需求的样式插入到页面内
		(function(content){
			var div = document.createElement('div');
			div.innerHTML = content;
			div.style.color = 'green';
			document.getElementById('container').appendChild(div);
		})(content);
	},
	Php:function (content) {
		// 将内容保存在content里面以日后备用
		this.content = content;
		// 创建对象时，通过闭包直接执行，将内容按需求的样式插入到页面内
		(function(content){
			var div = document.createElement('div');
			div.innerHTML = content;
			div.style.color = 'yellow';
			div.style.background = 'red';
			document.getElementById('container').appendChild(div);
		})(content);
	},
	UI: function (content) {
		// 将内容保存在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);
	}
}


var data = [
	{type:'Java',content:'js哪家强'},
	{type:'Php',content:'php哪家强'},
	{type:'UI',content:'java哪家强'}
]
// 多个遍历调用
for (var i = 0; i < data.length; i++) {
	Factory(data[i].type,data[i].content);
}