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;
}