前端设计模式（一）

单例模式：保证创建的对象是唯一的：如果已经创建直接返回 反之创建
先上使用方法
var a = new Single('tom')
var b = new Single('john')
console.log(a === b) // true

var Single = function(name) {this.name = name}
显然这样创建是不对的 作出如下调整
var Single = function(name) { 
	if(instance) return instance;
	instance = new Single(name);
	return instance;
}
进一步修改
var Single = function(name) {
	var instance = null
	function Single(name) {
		this.name = name
	}
	if(instance) return instance;
	instance = new Single(name);
	return instance;
}
但这样返回的是一个对象 而左边我们想要的是函数  再修改如下
var Single = (function(
	function Single(name) {
		this.name = name;
	}
	return function() {}
))()
进一步完善 在返回的函数里面判断是否已经创建了单例
var Single = (function()
	{
		var instance = null
		function Single(name) {
			this.name = name
		}
		return function(name) {
			// 如果已经创建了实例 直接返回
			if(instance) return instance
			// 否则新建实例
			return instance = new Single(name)
		}
	})()

发布订阅模式 
先举例子 拿物联网的一个场景来说 前端需要显示来自设备的消息
前端：订阅者 
设备：发布者
消息服务中心：
1.接收订阅者的订阅
2.转发发布者的消息 notify
class SP {
	constructor() {
		this.subscribes = []
	}
	subscribe(sub) {
		this.subscribes.push(sub)
	}
	publish(message) {
		this.subscribes.forEach((item, index) => {
			item(message)
		})
	}
}

var sp = new SP()
sp.subscribe(function(msg) {console.log("前端接收到消息: ", msg)})
var msg = {'Tem': '26.4°C', 'Light': 80}
sp.publish(JSON.stringify(msg))

假如设备发布的消息类型不止一种，除了正常上报的温度和光照数据，还有报警信息
class SP {
	constructor() {
		this.subscribes = {}
	}
	subscribe(type, sub) {
		if(!this.subscribes[type])
			this.subscribes[type] = []
		this.subscribes[type].push(sub)
	}
	publish(type, message) {
		this.subscribes[type].forEach((item, index) => {
			item(message)
		})
	}
}

var sp = new SP()
sp.subscribe('data', function(msg) {console.log("前端接收到上报数据: ", msg)})
var msg = {'Tem': '26.4°C', 'Light': 80}
sp.publish('data', JSON.stringify(msg))

代理模式
明星和经纪人以及商业公司
明星与商业公司的沟通可以通过经纪人代为沟通 最终只需要明星签订合同
模拟场景：商业公司现在需要找明星拍广告
var company = {
	name: '哈哈',
	findstar: function(star) {
		star.recv(this.name)
	}
}
var star = {
	recv: function(name) {
		console.log('公司',name, '来找你拍广告了')
	}
}
company.findstar(star)

// 现在是公司直接找明星谈，引入经纪人传递消息
var company = {
	name: '哈哈',
	findstar: function(proxy) {
		proxy.recv(this.name)
	}
}
var star = {
	recv: function(name) {
		console.log('公司',name, '来找你拍广告了')
	}
}
var proxy = {
	recv: function(name) {
		star.recv(name)
	}
}	
company.findstar(proxy)  // 向经纪人发消息


虚拟代理实现图片预加载
当网络不好或者图片太大导致页面加载时图片位置出现了空白 一个做法就是先使用一张图片占位
异步加载图片，等拿到需要的图片后再来填充到img标签中
var Img = {
	setImg: function(src) {
		var img = document.getElementById('img');
		img.src = src;
	}
}
proxyImg.setImg(imgurl)  // 这个真正图片的url需要缓存下来先 用于异步加载该图片
var proxyImg = {
	// 代理对象等待真正的图片加载好再调用Img的setImg
	var img = new Image
	img.onload = function() {
		Img.setImg(this.src) // img.src  加载完后设置真正图片
	}
	// 尚未拿到真正图片时，先使用本地图片
	return {
		setImg: function(src) {
			// 先设置本地图片
			Img.setImg('本地图片.jpg')
			// 缓存真正图片url
			img.src = src
		}
	}
}

迭代器模式
var Iterable = function(obj) {
	var cur = 0
	var next = function() {cur = cur + 1}
	var getCurItem = function() {
		return obj[cur]
	}
	var isDone = function() { return cur >= obj.length }
	return {
		length: obj.length,
		next,
		getCurItem,
		isDone
	}
}