提高复用性的目的
- 遵循DRY原则（不要重复你自己）
- 减少代码量，节省开销
什么是好的复用
- 对象可以再重复使用，不用修改
- 重复代码少
- 模块功能单一
减少代码数量，高效复用代码
桥接模式：把变化部分提出，写一个方法传递不同部分给相同部分做参数
目的：通过桥接代替耦合
应用场景：减少模块之间的耦合
基本结构
// 有三种形状，每种形状都有3种颜色
function rect(color) {
showcolor(color);
}
function circle(color) {
showcolor(color);
}
function delta(color) {
showcolor(color);
}
function showcolor(color){
// 提取出来的设置颜色方法
}
// 需要一个红色的圆形
new circle('red');
// 对于三种形状、每种形状有3种颜色的需求，可以不用创建9种不同颜色的不同形状示例（创建不同的选中效果、Express种创建get等方法）
// 创建不同的选中效果
// 需求：有一组菜单，上面每种选项，都有不同的选中效果。
//menu1,menu2,menu3
// 未使用桥接模式
function menuItem(word){
this.word="";
this.dom=document.createElement('div');
this.dom.innerHTML=this.word;
}
var menu1=new menuItem('menu1');
var menu2=new menuItem('menu2');
var menu3=new menuItem('menu3');
menu1.onmouseover=function(){
menu1.style.color='red';
}
menu2.onmouseover=function(){
menu1.style.color='green';
}
menu3.onmouseover=function(){
menu1.style.color='blue';
}
menu1.onmouseout=function(){
menu1.style.color='white';
}
menu2.onmouseout=function(){
menu1.style.color='white';
}
menu3.onmouseout=function(){
menu1.style.color='white';
}
// 下面使用桥接模式----------------
function menuItem(word,color){
this.word=word;
this.color=color;
this.dom=document.createElement('div');
this.dom.innerHTML=this.word;
document.getElementById('app').appendChild(this.dom);
}
menuItem.prototype.bind=function(){
var self=this;
this.dom.onmouseover=function(){
console.log(self.color);
this.style.color=self.color.colorOver;
}
this.dom.onmouseout=function(){
this.style.color=self.color.colorOut;
}
}
function menuColor(colorover,colorout){
this.colorOver=colorover;
this.colorOut=colorout;
}
var data=[
{word:'menu1',color:['red','black']},
{word:'menu2',color:['green','black']},
{word:'menu3',color:['blue','black']}
]
for(var i=0;i<data.length;i++){
new menuItem(
data[i].word,
new menuColor(data[i].color[0],data[i].color[1])
).bind();
}// Express种创建get等方法
// 需求：express种有get,post等等方法，有七八个，如何方便快速地创建。
//express
// app.get
// app.post
var methods = ['get', 'post', 'delete', 'put'];
methods.forEach(function (method) {
app[method] = function () {
route[method].apply(route, slice.call(arguments, 1))
}
})
// Route
methods.forEach(function(method){
Route.prototype[method] = function(){
var handles = flatten(slice.call(arguments));
for (var i = 0; i < handles.length; i++) {
var handle = handles[i];
if (typeof handle !== 'function') {
var type = toString.call(handle);
var msg = 'Route.'+method+'() requires a callback function but got a ' + type
throw new Error(msg);
}
debug('%s %o', method, this.path)
var layer = Layer('/', {}, handle);
layer.method = method;
this.methods[method] = true;
this.stack.push(layer);
}
return this;
}
})享元模式
目的：减少对象/代码数量
应用场景：当代码中创建了大量类似对象和类似的代码块
基本结构
// 有一百种不同文字的弹窗，每种弹窗行为相同，
// 但文字和样式不同，我们没必要新建一百个弹窗对象
function Pop() {
}
// 保留同样的行为
Pop.prototype.action = function(){
}
Pop.prototype.show = function(){
// 显示弹窗
}
// 提取出每个弹窗会不同的部分作为一个外部数组
var popArr = [
{text:'this is window1', style:[400,400]},
{text:'this is window2', style:[400,200]}
]
var poper = new Pop();
for(var i=0;i<100;i++) {
poper.show(popArr[i])
}
// 只需一个类，不需要new一百次弹窗
// 这个类只保留所有弹窗共有的，每个弹窗不同的部分留作为一个公共享元。示例（文件上传、jQuery的extend）
// 文件上传
// 需求：项目中有一个文件上传功能，该功能可以上传多个文件
// 基础实现
function uploader(fileType,file){
this.fileType=fileType;
this.file=file;
}
uploader.prototype.init=function(){
//初始化文件上传的html
}
uploader.prototype.delete=function(){
//删除掉该html
}
uploader.prototype.uploading=function(){
//上传
}
var fileob1,fileob2,fileob3,fileob4
new uploader('img',fileob1);
new uploader('txt',fileob2);
new uploader('img',fileob3);
new uploader('word',fileob4);
// 享元模式下----------------------
var 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){
//上传
}
var uploader = new uploader();
for(var i=0;i<data.length;i++){
uploader.uploading(data[i].type,data[i].file);
}// jQuery的extend
// 需求：extends方法，需要判断参数数量来进行不同的操作。
//extends
$.extend({a:1}) // a:1拷贝到jq上
$.extend({a:1},{b:1})// {a:1,b:1}
var jQuery={};
jQuery.fn={};
jQuery.extend = jQuery.fn.extend = function() {
// 未享元
// if(arguments.length==1){
// for(var item in arguments[0]){
// this[item]=arguments[0][item]
// }
// }else if(arguments.length==2){
// for(var item in arguments[1]){
// arguments[0][item]=arguments[1][item]
// }
// return arguments[0];
// }
// 享元模式下
var target=arguments[0];
var source;
if(arguments.length==1){
target=this;
source=arguments[0];
}else if(arguments.length==2){
target=arguments[0];
source=arguments[1];
}
for(var item in source){
target[item]=source[item]
}
return target;
} 创建高可复用性的代码
模板方法模式
目的：定义一系列操作的骨架，简化后面类似操作的内容
应用场景：当项目中出现很多类似操作内容
基本结构
// 编写导航组件，有的带消息提示，有的是竖着，有的是横着
function baseNav(){
// 基础类，此处定下基本骨架
}
baseNav.prototype.action = function(fn){
// 特异性的处理，留出一个回调等待具体实现
}
// 导航组件多种多样，可能后面还会新增类型，那么我们不妨写一个基础的组件类，
// 然后具体的实现，延迟到具体使用时。示例（编写一个弹窗组件、封装一个算法计算器）
// 编写一个弹窗组件
// 需求：项目有一系列弹窗，每个弹窗的行为，大小，文字都会不同
// 基础弹窗模板 （基本行为）
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';
}
// 继承基础弹窗原型，扩展自己的执行方法(装饰者模式)
// +扩展行为
function ajaxPop(word,size){// 一个请求弹窗
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(fn){
confirm.call(this);
fn()
}
var pop=new ajaxPop('sendmes',{width:100,height:300});
pop.init();
pop.confirm(axios.get());
var axios={get:function(){
return Promise.resolve();
}};// 封装一个算法计算器
// 需求：现在我们有一系列自己的算法，
// 但是这个算法常在不同的地方需要增加一些不同的操作
//算法计算器
// 算法骨架
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){
//结果边两
var _resultnum=num;
//算法队列数组组装
var _arr=[baseCount];
_arr=this.beforeCounter.concat(_arr);
_arr=_arr.concat(this.afterCounter);
//不同部分的相同算法骨架
function baseCount(num){
num+=4;
num*=2;
return num;
}
//循环执行算法队列
while(_arr.length>0){
// shift()数组从头执行,执行一个删一个，结果传为下一个的参数
_resultnum=_arr.shift()(_resultnum);
}
return _resultnum;
}
//使用
var countObject=new counter();
countObject.addBefore(function(num){
num--;
return num;
})
countObject.addAfter(function(num){
num*=2;
return num;
})
countObject.count(10);Javascript的组合与继承
组合
- Javascript最初没有专门的继承，所以最初JavaScript推崇函数式的编程，然后进行统一组合桥接到一起
- 桥接模式可以看出组合的一种体现，组合的好处时耦合低，方便方法复用，方便扩展
继承
- 在es6出现class和extend，继承的方式多种多样，但是都是各有弊端
- 模板方法模式可以看出继承的一种体现，继承的好处是可以自动获得父类的内容与接口，方便统一化，缺点是不方便扩展
尽量用组合解决问题
【题目1】优化如下代码：
需求：基于axios进行二次封装
// 1，直接调用二次封装的接口名发请求
function a() {
this.instance = axios.create({
baseURL: 'http://localhost:9002/',
timeout: 5000
})
}
// 2，把每个url变成一个api
// 此处问题提示：如果100多个url，难道我们需要写一百次吗？
a.prototype.getIndex = function (fn) {
this.instance.get('./mode1/index').then(fn);
}
a.prototype.loginIn = function (fn) {
this.instance.post('./login/loginIn').then(fn);
}
a.prototype.loginOut = function (fn) {
this.instance.post('./login/loginOut').then(fn);
}
a.prototype.shopList = function (fn) {
this.instance.get('./shop/shopList').then(fn);
}优化后：
function a() {
this.instance = axios.create({
baseURL: 'http://localhost:9002/',
timeout: 5000
})
}
const APIS = {
getIndex:{
url: './mode1/index',
method: 'get'
},loginIn:{
url: './login/loginIn',
method: 'post'
},loginOut:{
url: './login/loginOut',
method: 'post'
},shopList:{
url: './shop/shopList',
method: 'get'
}
}
for (api in APIS) {
a.prototype[api] = function (fn) {
this.instance[api.method](api[url]).then(fn);
}
};朋友们有什么想法都可以评论，大家一起讨论。比如说遇到什么场景使用什么设计模式优化方案等。。。
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
