封装对象时的设计模式

1 封装的目的

• 定义变量不会污染外部
• 能够作为一个模块调用
• 遵循开闭原则

2 什么是好的封装

• 变量外部不可见
• 调用接口使用
• 留出扩展接口

3 创建一个对象的模式

3.1 工厂模式

目的：方便我们大量创建对象
应用场景：当某一个对象需要经常创建的时候
定义：属于创建型模式，把对象的实现和创建相分离，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

例如：分页页码的创建、弹窗

基本结构：

function Factory(type){
	switch (type){
		case 'type1':
			return new Type1();
		case 'type2':
			return new Type2();
		case 'type3':
			return new Type3();
	}
}

//工厂模式就是写一个方法，只需要调用这个方法，就能拿到你要的对象

应用示例：

1.多彩的弹窗：有一个弹窗需求，弹窗有多种，他们之间存在内容和颜色上的差异。

//创建3个消息弹窗，3个确认弹窗，3个取消弹窗，分别有不同的颜色
(function(){
	function pop(type, content, color){
		if(this instanceof pop){
			var s = new this[type](content, color)
		}
		else{
			return new pop(type, content, color)
		}
	}
	pop.prototype.infoPop = function(){} //消息弹窗
	pop.prototype.confirmPop= function(){} //确认弹窗
	pop.prototype.cancelPop = function(){} //取消弹窗

	window.pop = pop;
})()

pop('infoPop','hello','red')

2.源码示例-jquery：jquery需要操作都dom,每一个dom都是一个jq对象。

(function(){
	val jquery = function(selectory, contest){
		return new jquery.fn.init(selectory, contest);
	}
	jquery.fn = jquery.prototype = {
		init:function(){}
    }
    jquery.fn.init.prototype = jquery.fn;
	window.$ = window.jquery = jquery;
})()

3.2 建造者模式

目的：需要组合出一个全局对象
应用场景：当要创建单个、庞大的组合对象时

例如：轮播图

基本结构：

//模块1
function Mode1(){}
//模块2
function Mode2(){}

//最终的使用类
function Final(){
	this.mode1 = new Mode1();
	this.mode2 = new Mode2();
}

//把一个复杂的类各个部分拆分成独立的类，然后再在最终类里组合到一块，final为最终给出去的类

应用示例：

1.有一个编辑器插件，初始化的时候需要配置大量参数，而且内部功能很多。

//最终使用类
function Editor(){
	this.initer = new initHtml();
	this.fontControll= new fontControll();
	this.stateControll= new stateControll();
}

function initHTML(){}
initHTML.prototype.initStyle = function(){}
initHTML.prototype.renderDom = function(){}

function fontControll(){}
fontControll.prototype.changeColor = function(){}
fontControll.prototype.changeFontsize = function(){}

function stateControll(){
	this.state = [];
	this.nowstate = 0;
}
stateControll.prototype.saveState= function(){} //保存
stateControll.prototype.stateBack= function(){
	var state = this.state[this.nowstate-1];
	this.fontControll.changeColor(state.color)
	this.fontControll.changeFontsize (state.fontsize)
} //回滚
stateControll.prototype.stateGo= function(){} //前进

3.3 单例模式

目的：需要确保全局只有一个对象
应用场景：为了避免重复新建，避免多个对象存在互相干扰

基本结构：

let Singleton = function(name){
	this.name = name;
}
Singleton.getInstance = function(name){
	if(this.instance){
		return this.instance;
	}
	return this.instance = name.Singleton(name);
}

//通过定义一个方法，使用时只允许通过此方法拿到存在内部的同一实例化对象

应用示例：

1.写一个数据储存对象 需求：项目中有一个全局的数据储存者，这个储存者只能有一个，不然会需要进行同步，增加复杂度。

funtion store(){
	this.store = {}
	if(store.install){
		return store.install;
	}
	store.install = this;
}
store.install = null;

//例子：
var s1 = new store();
var s2 = new store();
s1.store.a = 1;
console.log(s2);  // store {store:{a:1}}

2.vue-router 需求：vue-router必须保障全局有且只有一个，否则的会会错乱。

let _Vue;
function install(Vue){
	if(install.installed && _Vue === vue) return
	install.installed = true;
	
	_Vue = vue;
}