javascript设计模式-ag凯发k8国际

你好，欢迎收听极客视点。

javascript 中的设计模式指的是一些可重用的ag凯发k8国际的解决方案，这些方案适用于编写 javascript web 应用程序时常见的一些问题。最近，全栈开发人员德文（deven）探讨了 7 种出色的、受欢迎的 javascript 设计模式，这些模式主要归为以下三类：创作设计模式、结构设计模式和行为设计模式。

1. 构造函数设计模式

这是一种特殊的方法，用于在分配内存后初始化新创建的对象。由于 javascript 一般来说是面向对象的，所以它打交道最多的就是对象。在 javascript 中创建新对象有三种方法可用。

文档中列出了创建构造函数设计模式的一种方法。

// 创建一个新的空对象 var newobject = {}; // 创建一个新的空对象 var newobject = object.create(object.prototype); var newobject = newobject();

要访问函数的属性，你需要初始化对象。

const object = new constructorobject();

代码中的 new 关键字告诉 javascript，一个 constructorobject 应该充当一个构造函数。另外，这个设计模式并不支持继承。

2. 原型模式

原型模式是基于原型继承的，在这种模式中，被创建的对象充当其他对象的原型。实际上，原型（prototype）是被创建的每个对象构造函数的蓝图。

示例

var mycar= { name:"ford escort", brake:function(){ console.log("stop! i am applying brakes"); } panic : function (){ console.log ( "wait. how do you stop thuis thing?") } } // 使用 object create 实个新的例化一 car var yourcar= object.create(mycar); // 现在它就是另一个的原型了 console.log (yourcar.name);]

3. 模块设计模式

模块（module）设计模式对原型模式做了一些改进，模块模式设置了不同类型的修饰符（私有和公共）。你可以创建相似的函数或属性而不会发生冲突，你还可以灵活地公开重命名函数。这个设计模式的一个缺陷是无法覆盖（override）外部环境中创建的函数。

示例

function animalcontainter () { const container = []; function addanimal (name) { container.push(name); } function getallanimals() { return container; } function removeanimal(name) { const index = container.indexof(name); if(index < 1) { throw new error('animal not found in container'); } container.splice(index, 1) } return { add: addanimal, get: getallanimals, remove: removeanimal } } const container = animalcontainter(); container.add('hen'); container.add('goat'); container.add('sheep'); console.log(container.get()) //array(3) ["hen", "goat", "sheep"] container.remove('sheep') console.log(container.get()); //array(2) ["hen", "goat"]

4. 单例模式

在仅需要创建一个实例的情况下（例如一个数据库连接），这个模式是必需的。在这个模式中，只能在关闭连接时创建一个实例，或者在打开新实例之前必须关闭已有的实例。此模式也称为严格模式，它的一个缺点是测试时的体验很差，因为它隐藏的依赖项对象很难挑出来进行测试。

示例

function databaseconnection () { let databaseinstance = null; // 追踪特定时间创建实例的数量 let count = 0; function init() { console.log(`opening database #${count 1}`); // 现在执行操作 } function createintance() { if(databaseinstance == null) { databaseinstance = init(); } return databaseinstance; } function closeintance() { console.log('closing database'); databaseinstance = null; } return { open: createintance, close: closeintance } } const database = databseconnection(); database.open(); //open database #1 database.open(); //open database #1 database.open(); //open database #1 database.close(); //close database

5. 工厂模式

这个模式的创新之处在于，它不需要构造函数就能创建对象。它提供了用于创建对象的通用接口，你可以在其中指定要创建的工厂（factory）对象的类型，这样一来，你只需指定对象，然后工厂会实例化并返回这个对象供你使用。当对象组件设置起来很复杂，并且你希望根据所处的环境轻松地创建不同的对象实例时，使用工厂模式就是很明智的选择。在处理许多共享相同属性的小型对象，以及创建一些需要解耦的对象时也可以使用工厂模式。

示例

// dealer a dealera = {}; dealera.title = function title() { return "dealer a"; }; dealera.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${ this.password }` ); return `payment for service ${amount} is successful using ${this.title()}`; }; //dealer b dealerb = {}; dealerb.title = function title() { return "dealer b"; }; dealerb.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${this.password}` ); return `payment for service ${amount} is successful using ${this.title()}`; }; //@param {*} dealeroption //@param {*} config function dealerfactory(dealeroption, config = {}) { const dealer = object.create(dealeroption); object.assign(dealer, config); return dealer; } const dealerfactory = dealerfactory(dealera, { username: "user", password: "pass" }); console.log(dealerfactory.title()); console.log(dealerfactory.pay(12)); const dealerfactory2 = dealerfactory(dealerb, { username: "user2", password: "pass2" }); console.log(dealerfactory2.title()); console.log(dealerfactory2.pay(50));

6. 观察者模式

观察者（observer）设计模式在许多对象同时与其他对象集通信的场景中用起来很方便。在观察者模式中不会在状态之间发生不必要的事件 push 和 pull，相比之下，所涉及的模块仅会修改数据的当前状态。

示例

function observer() { this.observercontainer = []; } observer.prototype.subscribe = function (element) { this.observercontainer.push(element); } // 下面是从 container 中移除一个元素 observer.prototype.unsubscribe = function (element) { const elementindex = this.observercontainer.indexof(element); if (elementindex > -1) { this.observercontainer.splice(elementindex, 1); } } /** * we notify elements added to the container by calling * each subscribed components added to our container */ observer.prototype.notifyall = function (element) { this.observercontainer.foreach(function (observerelement) { observerelement(element); }); }

7. 命令模式

命令（command）设计模式将方法调用、操作或请求封装到单个对象中，以便你可以自行传递方法调用。命令设计模式让你可以从任何正在执行的命令中发出命令，并将责任委托给与之前不同的对象。这些命令以 run() 和 execute() 格式显示。

(function(){ var carmanager = { // 请求的信息 requestinfo: function( model, id ){ return "the information for " model " with id " id " is foo bar"; }, // 现在购买这个 car buyvehicle: function( model, id ){ return "you have successfully purchased item " id ", a " model; }, // 现在 arrange viewing arrangeviewing: function( model, id ){ return "you have successfully booked a viewing of " model " ( " id " ) "; } }; })();

小结

以上就是7种受欢迎的javascript设计模式，对于 javascript 开发人员来说，使用设计模式的好处很多。设计模式的一些主要优点包括提升项目的可维护性，还能减少开发周期中不必要的工作。javascript 设计模式可以为复杂的问题提供ag凯发k8国际的解决方案，提升开发速度并提高生产率，但并不能说这些设计模式就可以让开发人员偷懒了。希望今天的内容能给你带来参考价值。

英文原文：https://codesource.io/javascript-design-patterns/

总结

以上是ag凯发k8国际为你收集整理的javascript设计模式_开发者都应该了解的7种javascript设计模式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。