封装的目的
1.定义变量不会污染外部
2.能够作为一个模块调用
3.遵循开闭原则
什么是好的封装
1.变量外部不可见
2.调用接口使用
3.留出扩展接口
封装对象时的设计模式
创建一个对象的模式
1.工厂模式
目的：方便我们大量创建对象
应用场景：当某一个对象需要经常创建的时候
2.建造者模式
目的：需要组合出一个全局对象
应用场景：当要创建单个，庞大的组合对象时
3.单例模式
目的：需要确保全局只有一个对象
应用场景：为了避免重复新建，避免多个对象存在互相干扰
基本结构
工厂模式的基本结构
function Factory(type){
switch(type) {
case 'type1':
return new Type1();
case 'type2':
return new Type2();
case 'type3':
return new Type3();
}
}
工厂模式就是写一个方法，只需调用这个方法，就能拿到你要的对象
建造者模式的基本结构
把一个复杂的类各个部分，拆分成独立的类，然后再在最终类里组合到一块，final为最终给出去的类
//模块一
function Mode1(){
}
//模块二
function Mode2(){
}
//最终的使用类
function Final(){
this.mode1 = new Mode1();
this.mode2 = new Mode2();
}
单例模式的基本结构
通过定义一个方法，使用时只允许通过此方法拿到存在内部的同一实例化对象
let Singleton = function(name){
this.name = name;
}
Singleton.getInstance = function(name){
if(this.instance){
return this.instance;
}
return this.instance = new Singleton(name);
}
工厂模式的示例
1.多彩的弹窗
需求：项目有一个弹窗需求，弹窗有多种，他们之间存在内容和颜色的差异。
//创建3个消息弹窗，3个确认，3个取消，分别有不同的颜色
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
})()
var arr = [{type:'infoPop',content:'hello',color:'red'},{type:'infoPop',content:'hello',color:'red'},{type:'infoPop',content:'hello',color:'red'}]
pop('infoPop','hello','red');
- 源码示例-jquery
需求：jquery需要操作dom,每一个dom都是一个jq对象。
(function(){
var jQuery = function(selectory,context){
return new jQuery.fn.init(selectory,context);
}
jQuery.fn = jQuery.prototype={
init:function(){}
}
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend=function(){}
jQuery.extend({
})
window.$=window.jQuery=jQuery;
})()
建造者模式的示例
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(){}
window.Editor = Editor;
2.Vue的初始化
需求：vue内部众多模块，而且过程复杂。
function Vue(){
if(!(this instanceof Vue)){
console.warn();
}
this._init(option)
}
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
单例模式的示例
1.写一个数据储存对象
需求：项目中有一个全局的数据储存者，这个储存者只能有一个，不然会需要进行同步，增加复杂度。
function 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)
- vue-router
需求：vue-router必须保障全局有且只有一个，否则的话会错乱。
let _Vue;
function install(Vue){
if(install.installed && _Vue === Vue) return
install.installed = true
_Vue = Vue
}
Vue.use(vue-router);
小结
工厂模式：如果你写的模块，需要大量创建类似对象
建造者模式：需要创建一个需要大量参数，且内部模块庞大
单例模式：防止重复注册，防止有多个对象互相干扰
