1 提高复用性的目的
- 遵循DRY原则
- 减少代码量，节省开销
2 什么是好的复用
- 对象可以再重复使用，不用修改
- 重复代码少
- 模块功能单一
3 减少代码数量，高效复用代码的模式
3.1 桥接模式
目的：通过桥接代替耦合
应用场景：减少模块之间的耦合
基本结构：
//3种形状，每种形状都有3种颜色
function rect(color){
showcolor(color);
}
function circle(color){
showcolor(color);
}
function delta(color){
showcolor(color);
}
function showcolor(color){
}
//需要一个红色的圆形
new circle('red');
//对于3种形状、每种形状有3种颜色的需求，可以不用创建9种不同颜色的不同形状
应用示例：
1.创建不同的选中效果：有一组菜单，上面每种选项，都有不同的选中效果。
未使用桥接模式：
//menu1, menu2, menu3
function menuItem(word){
this.word = word;
this.dom = document.createElement('div');
this.dom.innerHTML = this.word;
}
let menu1 = new menuItem('menu1');
let menu2 = new menuItem('menu2');
let menu3 = new menuItem('menu3');
menu1.onmouseover = function(){
menu1.style.color = 'red';
}
menu2.onmouseover = function(){
menu2.style.color = 'green';
}
menu3.onmouseover = function(){
menu1.style.color = 'blue';
}
menu1.onmouseout = function(){
menu1.style.color = 'white';
}
menu2.onmouseout = function(){
menu2.style.color = 'white';
}
menu3.onmouseout = function(){
menu3.style.color = 'white';
}
使用桥接模式：
//menu1, menu2, menu3
function menuItem(word, color){
this.word = word;
this.dom = document.createElement('div');
this.dom.innerHTML = this.word;
this.color = color
}
let menu1 = new menuItem('menu1');
function menuColor(colorover, colorout){
this.colorover = colorover;
this.colorout = colorout;
}
menuItem.prototype.bind = function(){
let self = this;
this.dom.onmouseover = function(){
this.style.color = self.color.colorOver;
}
this.dom.onmouseout = function(){
this.style.color = self.color.colorout;
}
}
let data = [
{
word: 'menu1', color: ['red', 'black']},
{
word: 'menu2', color: ['green', 'black']},
{
word: 'menu3', color: ['blue', 'black']},
]
for(let i = 0; i < data.length; i++){
new menuItem(data[i].word, new menuColor(data[i].color[0], data[i].color[1])).bind();
}
2.Express中创建get等方法：express中有get,post等方法，有七八个，如何方便快速地创建。
未使用桥接模式：
function express(){
}
express.prototype.get = function(){
}
express.prototype.post = function(){
}
express.prototype.delete= function(){
}
使用桥接模式：
let methods = ['get', 'post', 'delete', 'put'];
methods.forEach(function(method){
app[method] = function(){
route[method].apply(route, slice.call(arguments))
}
})
methods.forEach(function(method){
Route.prototype[method] = function(){
...
}
})
3.1 享元模式
目的：减少对象/代码数量
应用场景：当代码中创建了大量类似对象和类似的代码块
基本结构：
//有一百种不同文字的弹窗，每种弹窗行为相同，但是文字和样式不同，没必要新建一百个弹窗对象
function Pop(){
}
Pop.protoType.action = function(){
}
Pop.protoType.sjow= function(){
}
let popArr = [{
texr:'ls,style=:[400,400],{texr:'grdga,style=:[400,400]}];
ley poper = newPop();
for(let i = 0;i<100; i++){
Pop.show(popArr[i])
}
//只需一个类，不需要new一百次弹窗
//这个类只保留所有弹窗共有的，每个弹窗不同的部分留作为一个共享元
应用示例：
1.文件上传：项目中有一个文件上传功能，该功能可以上传多个文件。
未使用享元模式：
function uploader(fileType, file){
this.fileType = fileType;
this.file = file;
}
uploader.prototype.init = function(){
//初始化文件上传的html
}
uploader.prototype.delete = function(){
//删除html
}
uploader.prototype.uploading = function(){
//上传
}
let fileob1, fileob2, fileob3, fileob4;
new uploader('img', fileob1);
new uploader('txt', fileob1);
new uploader('img', fileob1);
new uploader('word', fileob1);
使用享元模式：
let fileob1, fileob2, fileob3, fileob4;
let data = [
{
type:'img', file:fileob1},
{
type:'txt', file:fileob2},
{
type:'img', file:fileob3},
{
type:'word', file:fileob4},
];
function uploader(){
}
uploader.prototype.init = function(){
//初始化文件上传的html
}
uploader.prototype.delete = function(){
//删除html
}
uploader.prototype.uploading = function(fileType, file){
//上传
}
let uploader = new uoloader();
for(let i = 0; i < data.length; i++){
uploader.uploading(data[i].type, data[i].file)
}
2.jquery的extend：extend方法，需要判断参数数量来进行不同操作。
未用享元模式：
$.extend({
a:1});
$.extend({
a:1}, {
b:1});//{a:1, b:1};
function extend(){
if(arguments == 1){
for(let item in arguments[0]){
this[item] = arguments[0][item];
}
}else{
for(let item in arguments[1]){
arguments[0][item] = arguments[1][item];
}
}
}
使用享元模式：
function extend(){
let target = arguments[0];
let source;
if(arguments === 1){
target = this;
source = arguments[0];
}
else{
target = arguments[0];
source = arguments[1];
}
for(let item in source){
target[item] = source[item];
}
}
4 创建高可复用性的代码的模式
4.1 模板方法模式
目的：定义一系列操作的骨架，简化后面类似操作的内容
应用场景：当项目中出现很多类似操作内容
基本结构：
//编写导航组件，有的带消息提示，有的是竖的，有的是横的
function baseNav(){
//基础类，此处定下基本骨架
}
baseNav.prototype.action = function(fn){
//特异性的处理，留出一个回调等待具体实现
}
//导航组件多种多样，可能后面还会新增类型，那么我们不妨写一个基础的组件类，然后具体的实现，延迟到具体的使用时
应用示例：
1.编写一个弹窗组件：项目有一系列弹窗组件，每个弹窗的行为、大小、文字都会不同。
function basePop(word, size){
this.word = word;
this.size = size;
this.dom = null;
}
basePop.prototype.init = function(){
let div = document.createElement('div');
div.innerHtml = this.word;
div.style.width = this.size.width + 'px';
div.style.height = this.size.height + 'px';
}
basePop.prototype.hidden = function(){
this.dom.style.display= 'none'
}
basePop.prototype.confirm = function(){
this.dom.style.display= 'none'
}
function ajaxPop(word, size){
basePop.call(this, word, size)
}
ajaxPop.prototype = new basePop();
let hidden = ajaxPop.prototype.hidden;
ajaxPop.prototype.hidden = function(){
hidden.call(this);
console.log(1)
}
let confirm = ajaxPop.prototype.confirm;
ajaxPop.prototype.confirm = function(){
confirm.call(this);
$.ajax();
}
2.封装一个算法计算器：现在我们有一系列自己的算法，但是这个算法常在不同的地方需要增加一些不同的操作。
function counter(){
this.beforeCounter = [];
this.afterCounter = [];
}
counter.prototype.addBefore = function(fn){
this.beforeCounter.push(fn)
}
counter.prototype.addAfter = function(fn){
this.afterCounter .push(fn)
}
counter.prototype.count = function(num){
let _resultnum = num;
let _arr = [baseCount];
_arr = this.beforeCounter.concat(_arr);
_arr = _arr.concat(this.afterCounter);
//基础计算
function baseCount(num){
num+=4;
num*=4;
return num;
}
while(_arr.length>0){
_resultnum = _arr.shift()(_resultnum)
}
return _resultnum
}
let countObject = new counter();
countObject.addBefore(function(num){
num--;
return num;
})
countObject.addAfter(function(num){
num*=2;
return num;
})
countObject.count(10);
桥接模式可以看出组合的一种体现，组合的好处是耦合低，方便方法复用，方便扩展。
模板方法模式可以看出继承的一种体现，继承的好处是可以自动获得父类的内容与接口，方便统一化。
总结
- 桥接模式：通过独立方法间的桥接来形成整体功能，这样每个方法都可以被高度复用。
- 享元模式：提取出公有部分与私有部分，私有部分作为外部数据传入，从而减少对象数量。
- 模板方法模式：当一个功能朝着多样化发展，不妨先定义一个基础的，把具体实现延迟到后面。