结构型设计模式-提高可复用性（桥接模式、享元模式、模板方法模式）
-
复用性要点：
- 对象可以再重复使用,不用修改
- 重复代码少
- 模块功能单一
桥接模式
目的：通过桥接代替耦合,
应用场景：减少模块之间的耦合,
一：基本结构
// 有三种形状,每种形状都有三种颜色
// 把颜色方法抽离出来 三种形状再调用
function rect(color){
showcolor(color)
}
function circle(color){
showcolor(color)
}
function delta(color){
showcolor(color)
}
// 颜色方法
function showcolor(color){
}
// 需要的时候只需要传入颜色
new circle('red');
// 对于三种形状 每种形状有3中颜色的需求,可以不用创建9中不同颜色的不同形状
二：示例
例子：创建不同的选中给效果
需求：有一组菜单,上面每种选项都有不同的效果
// menu1,menu2,menu3
function menuItem(word,color){
this.word = word;
this.dom = document.createElement('div');
this.dom.innerHTML = this.word;
this.color = color;
}
// 绑定方法
menuItem.prototype.bind = function(){
var self = this;
this.dow.onmouseover = function(){
this.style.color = self.color.cOver;
}
this.dom.onmouseout = function(){
this.style.color = self.color.cOut;
}
}
// 新建颜色对象
function menuColor(cOver,cOut){
this.cOver = cOver;
this.cOut = cOut;
}
// 储存菜单数据数组
var data = [
{
word:'menu1',
color:['red','yellow']
},{
word:'menu2',
color:['red','yellow']
}
]
for (var i = 0;i例子：Expree中创建get等方法
需求：express中有get,post等七八个方法,如何方便快速创建
首先在express中,可以通过
app.get 设置get请求中间件
app.post 设置post请求中间件
app.delete 设置delete请求中间件
首先创建一个类
function express(){
}
// 在express中有methods这么一个数组,通过第三方库require进来的,这里我们直接定义
var methods = ['get','post','delete','put'];
methods.forEach(function(method){
app[method] = function(){
// 然后他会借助一个route桥接过来,调用route内的method
route[method].apply(route,slice.call(arguments,1))
}
})
享元模式
目的：减少对象/代码数量,
应用场景：当代码中创建了大量的类似对象和类似代码块
一：基本结构
// 有一百种不同文字的弹框,每种弹框行为相同,但是文字样式不同,我们没必要新建一百个弹窗对象
function Pop(){
}
// 保留同样的行为
Pop.prototype.action = function(){
}
Pop.prototype.show = function(){
// 显示弹框
}
// 提取出每个弹窗会不同的部分作为一个外部的数组
var popArr = [
{text:'this is win1',style:[400,400]},
{text:'this is win2',style:[400,100]},
]
var poper = new Pop();
for (var i=0;i<100;i++) {
poper.show(popArr[i])
}
ps:只需要一个类,不需要new100次;这个类只保留所有弹框共有的,每个弹窗不同的部分留作为一个公共享元,
二：应用示例
例子：文件上传
需求：项目中有一个文件上传的功能,该功能可以上传多个文件
// 数组储存需要上传的
var data = [
{
type:'img',
file:'file1'
},{
type:'word',
file:'file2'
}
]
function uploader(){
}
uploader.prototype.init = function(){
// 初始化文件上传的html
}
uploader.prototype.delete = function(){
// 删除掉该html
}
uploader.prototype.uploading = function(fileType,file){
// 上传
}
var uploader = new uploader();
for(var i=0;i例子：jQuery的extend
需求：extends方法 需要判断参数的数量来进行不同的操作
// 首先extend方法简单讲解一下
$.extend({a:1});//如果给如一个对象,就会扩展到jQuery上面的
$.extend({a:1},{b:1});//如果给两,就会合并再返回 {a:1,b:1}
function extend(){
// 公共享元 默认第一个arg
var target = arguments[0];
// 被拷贝者存为变量
var source;
if(arguments==1){
target = this;
source = arguments[0];
}else{
target = arguments[0];
source = arguments[1];
}
for(var item in source){
target[item] = source[item]
}
// 原来的代码 上面为改造后
// if(arguments==1){
// for(var item in arguments[0]){
// 如果只有一个对象,把他放进this中
// this[item] = arguments[0][item]
// }
// }else{
// for(var item in arguments[1]){
// 如果有多个,则把第二个放进第一个arg中
// arguments[0][item] = arguments[1][item]
// }
// }
}
模板方法模式
目的：定义一系列操作的骨架,简化后面类似操作的内容,
应用场景：当项目中出现很多类似操作内容
一：基本结构
// 编写一个导航组件 有的带消息提示 有的是竖着 有的是横着
function baseNav(){
// 基础类 此处定下基本骨架
}
baseNav.prototype.action = function(fn){
// 特异性处理,留出一个回调等待具体实现
}
ps:导航组件多种多样 之后可能还有增加新类型 那么不妨写一个基础的组件类 然后具体的实现等到具体的使用时在操作
二：应用示例
例子：编写一个弹框组件(继承)
需求：项目有一系列弹窗,每个弹窗的行为大小文字都不一样
// 先定义一个基础弹窗
function basePop(word,size){
this.word = word;
this.size = size;
this.dom = null;
}
// 显示初始化
basePop.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.word;
div.style.width = this.size.width + 'px';
div.style.height = this.size.height + 'px';
this.dom = div;
}
// 基础操作
basePop.prototype.hidden = function(){
this.dom.style.display = 'none';
}
basePop.prototype.confirm = function(){
this.dom.style.display = 'none';
}
// 定义一个特殊类(ajax弹窗),会继承我们的基础类
function ajaxPop(word,siez){
basePop.call(this,word,size);
}
// 先继承基础行为
ajaxPop.prototype = new basePop();
// 拿去之前的隐藏行为
var hidden = ajaxPop.prototype.hidden;
// 定义新的隐藏行为
ajaxPop.prototype.hidden = function(){
// 先调用原有的隐藏行为
hidden.call(this);
// 假如特异性行为
console.log(1);
}
// 确认行为同理
var confirm = ajaxPop.prototype.confirm;
ajaxPop.prototype.confirm = function(){
confirm.call(this);
console.log(2);
}
例子：封装一个算法计算器(组合)
需求：现在我们有一系列自己的算法,但是这个算法在不同的地方需要增加一些不同的操作
function counter(){
// 因为扩展,增加两个队列
this.beforeCounter = [];
this.afterCounter = [];
}
// 扩展方法(计算前的,计算后的)
counter.prototype.addBefore = function(fn){
// 调用就push进队列
this.beforeCounter.push(fn);
}
counter.prototype.addAfter = function(fn){
// 调用就push进队列
this.afterCounter.push(fn);
}
// 基础计算骨架
counter.prototype.count = function(){
var _resultnum = num;
var _arr = [baseCount];
// 把_arr拼接成一个队列
_arr = this.beforeCounter.concat(_arr);
_arr = _arr.concat(this.afterCounter);
function baseCount(num){
// num是我们要计算的数据
num+=4;
num*=4;
return num;
}
// 当数组大于0就说明还有需要执行的,把第一项拿出来执行传入_resultnum再返回_resultnum;
while(_arr.length>0){
_resultnum = _arr.shift()(_resultnum);
}
return _resultnum;
}
// 接下来就是使用了
var counterObj = new counter();
counterObj.addBefore(function(num){
num--;
return num;
})
counterObj.addAfter(function(num){
num*=2;
return num;
})
counterObj.count(10);