JavaScript快速学习设计模式

设计模式是任何优秀软件的基础，JavaScript 也不例外，学习设计模式，对代码组织多一些思路，通过代码片段来学习编码思路对于开发者来说是比较容易理解的，本文继续通过代码片段简单展示常见的设计模式，但不深入设计模式本身。

构造函数模式

构造函数（Constructor Pattern）作为初始化具有特定属性和方法的对象的函数。构造器模式类似于该定义。我们使用这种模式来创建同一对象的多个实例。

functionArticle(title,author){
this.title=title;
this.author=author;
this.showTitle=()=>console.log(this.title);
}
constarticle=newArticle("JavaScript设计模式","devpoint");
article.showTitle();

原型模式

原型模式（Prototype Pattern）：使用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象，原型模式是一种对象创建型模式，通过从原型克隆对象来创建对象的新实例。

如果发现直接构造一个新对象很复杂且效率低下，那么原型模式非常适合这种情况。

functionArticle(title,author){
this.title=title;
this.author=author;
this.showTitle=()=>console.log(this.title);
}
Article.prototype.showAuthor=function(){
console.log(this.author);
};
constarticle=newArticle("JavaScript设计模式","devpoint");
article.showAuthor();

工厂模式

工厂模式（Factory Pattern）的主要思想是将对象的创建与对象的实现分离，开发过程中可能在不知道它的情况下就使用了它的模式。在 JavaScript 中，它将对象创建与代码的其余部分分开，封装创建代码，公开 API 以生成不同的对象。

constVehicle=function(){};
constCar=function(){
this.say=function(){
console.log("Iamacar");
};
};
constTruck=function(){
this.say=function(){
console.log("Iamatruck");
};
};
constBike=function(){
this.say=function(){
console.log("Iamabike");
};
};
constVehicleFactory=function(){
this.createVehicle=(vehicleType)=>{
letvehicle;
switch(vehicleType){
case"car":
vehicle=newCar();
break;
case"truck":
vehicle=newTruck();
break;
case"bike":
vehicle=newBike();
break;
default:
vehicle=newVehicle();
}

returnvehicle;
};
};
constvehicleFactory=newVehicleFactory();
constcar=vehicleFactory.createVehicle("car");
consttruck=vehicleFactory.createVehicle("truck");
constbike=vehicleFactory.createVehicle("bike");
car.say();//Iamacar
truck.say();//Iamatruck
bike.say();//Iamabike

命令模式

命令模式（Command Pattern）的主要目的是将动作或操作封装为对象。

假设需要为电子商务构建支付系统，根据所选的付款方式，将需要处理特定的流程。

if(selectedPayment=="creditcard"){
//处理信用卡支付
}

一些付款方式只需要处理一个步骤，但其他方式可能不止一个步骤。通过使用上面的示例代码，提供的是实现，而不是接口，这会导致紧密耦合。

命令模式是提供松散耦合的一个很好的解决方案。系统不应了解有关每种特定付款方式处理的太多信息。为了实现这一点，该模式将请求操作的代码与执行实际实现的代码分开。

functionCommand(operation){
this.operation=operation;
}
Command.prototype.execute=function(){
this.operation.execute();
};
functionCreditCardPayment(){
return{
execute:function(){
console.log("信用卡");
},
};
}
functionWechatPayment(){
return{
execute:function(){
console.log("微信支付");
},
};
}
functionAliPayment(){
return{
execute:function(){
console.log("支付宝");
},
};
}
functionCreditCardCommand(){
returnnewCommand(newCreditCardPayment());
}
functionWechatPalCommand(){
returnnewCommand(newWechatPayment());
}
functionAliPayCommand(){
returnnewCommand(newAliPayment());
}
functionPaymentHelper(){
letpaymentCommand;

return{
setPaymentCommand:function(command){
paymentCommand=command;
},
executeCommand:function(){
paymentCommand.execute();
},
};
}
functionrun(){
constpaymentHelper=newPaymentHelper();
paymentHelper.setPaymentCommand(newCreditCardCommand());
paymentHelper.executeCommand();
paymentHelper.setPaymentCommand(newWechatPalCommand());
paymentHelper.executeCommand();
paymentHelper.setPaymentCommand(newAliPayCommand());
paymentHelper.executeCommand();
}
run();

观察者模式

观察者模式（Observer Pattern）又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

functionNewsletter(){
this.observers=[];
}
Newsletter.prototype={
subscribe:function(observer){
this.observers.push(observer);
},
unsubscribe:function(observer){
this.observers=this.observers.filter((ob)=>ob!==observer);
},
notify:function(){
this.observers.forEach((observer)=>
console.log("你好！"+observer.toString())
);
},
};
constsubscriber1="订阅者1";
constsubscriber2="订阅者2";
constnewsletter=newNewsletter();
newsletter.subscribe(subscriber1);
newsletter.subscribe(subscriber2);
newsletter.notify();//输出：你好！订阅者1；你好！订阅者2

newsletter.unsubscribe(subscriber2);
newsletter.notify();//你好！订阅者1

单体模式

单体模式（Singleton Pattern）是 JavaScript 中最基本但又最实用的模式之一，比其他任何模式都更常用。这种模式提供了一种将代码组织为一个逻辑单元的方法，可用于减少全局变量的数量。

constutils=(function(){
letinstance;

functioninitialize(){
return{
sum:function(a,b){
returna+b;
},
};
}
return{
getInstance:function(){
if(!instance){
instance=initialize();
}
returninstance;
},
};
})();
constsum=utils.getInstance().sum(1,2);
console.log(sum);//3

单体模式主要的好处在于它对代码组织作用，把相关的方法和属性组织在一个不会被多次实例化的单体中，使代码的调试和维护变得轻松，但会导致模块间的强耦合。

模块模式

模块模式（Module Pattern）也可以说是单体模式的一种，该模式是用于实现软件模块概念的设计模式，可以将模块内的函数、变量和属性设为公共或私有成员。

constarticleModule=(function(){
//私有
consttitle="JavaScript设计模式";
//公共
return{
printTitle:function(){
console.log(title);
},
};
})();
articleModule.printTitle();//JavaScript设计模式

以上就是JavaScript快速学习设计模式，希望对大家有所帮助。更多精彩内容分享：头条

课程教程：JavaScript快速学习设计模式

内容版权声明：除非注明，否则皆为本站转载文章。文章及图片版权归原作者所有，如有侵权请联系我们，我们立刻删除。