javascript常用的设计模式

JavaScript常用的设计模式

设计模式是一种解决特定类问题的经验总结,是经验的提炼。在JavaScript中,设计模式可以帮助我们避免重复的代码,提高代码的可维护性和可读性。下面是常见的JavaScript设计模式:

工厂模式

工厂模式是一种创建型模式,通过定义一个用于创建对象的接口来创建具体的对象实例。

function Car(type, brand, price) {
  this.type = type;
  this.brand = brand;
  this.price = price;
}

function CarFactory() {}

CarFactory.prototype.createCar = function(type, brand, price) {
  return new Car(type, brand, price);
};

const factory = new CarFactory();
const car1 = factory.createCar('SUV', 'Jeep', 30000);
const car2 = factory.createCar('Sedan', 'Toyota', 25000);

console.log(car1); // Car {type: "SUV", brand: "Jeep", price: 30000}
console.log(car2); // Car {type: "Sedan", brand: "Toyota", price: 25000}

上面的代码通过定义Car和CarFactory类,以及CarFactory.prototype.createCar方法来实现了工厂模式。CarFactory.createCar方法接受参数type, brand和price,然后返回一个新的Car对象实例,从而实现了对象的创建。

观察者模式

观察者模式是一种行为型模式,用于从被观察者对象中订阅信息,并在特定情况下执行一些操作。

function Subject() {
  this.observers = [];
}

Subject.prototype.subscribe = function(observer) {
  this.observers.push(observer);
};

Subject.prototype.unsubscribe = function(observer) {
  this.observers = this.observers.filter(function(o) {
    return o !== observer;
  });
};

Subject.prototype.notify = function(data) {
  this.observers.forEach(function(observer) {
    observer.update(data);
  });
};

function Observer(name) {
  this.name = name;
}

Observer.prototype.update = function(data) {
  console.log(this.name + ' received: ' + data);
};

const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
const observer3 = new Observer('Observer 3');

subject.subscribe(observer1);
subject.subscribe(observer2);
subject.subscribe(observer3);

subject.notify('Hello World!');

subject.unsubscribe(observer2);

subject.notify('Hello Again!');

上面的代码通过定义Subject和Observer类,以及订阅、取消订阅和通知方法来实现了观察者模式。当调用Subject.notify方法时,所有Observer实例都会收到通知,并且执行自己的update方法。当调用Subject.unsubscribe方法时,相关Observer实例会被移除,并且不再收到通知。

结语

以上是常见的两种JavaScript设计模式,当然还有很多其他类型的设计模式,如单例模式、适配器模式、代理模式等等。在实际项目中,我们可以根据具体问题来选择适合的设计模式,从而提高代码的可维护性和可读性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript常用的设计模式 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解JS正则replace的使用方法

    详解JS正则replace的使用方法 什么是正则表达式 正则表达式是一种模式匹配的工具,可以用来检查一个字符串是否符合某种模式。在编程中,正则表达式可以被用于搜索、替换和验证。 replace方法 replace方法是JavaScript中字符串对象的一个方法,可以在一个字符串中替换指定的内容,并返回替换后的新字符串。其语法如下: str.replace(r…

    JavaScript 2023年5月28日
    00
  • 详解iframe跨域的几种常用方法(小结)

    下面我们来详细讲解“详解iframe跨域的几种常用方法(小结)”这篇文章。 简述 本篇文章主要针对在使用iframe时可能会遇到的跨域问题进行了详细的讲解。因为iframe与当前页面是存在跨域的问题,所以我们需要采取一些方法来解决这个问题,而文章主要介绍了以下几种常用方法: 利用window.postMessage和message事件 利用location.…

    JavaScript 2023年6月11日
    00
  • Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用

    一、什么是jQuery Ajax? jQuery Ajax是一组用于处理Ajax请求的方法和函数。通过它可以实现异步获取数据和处理数据的功能,可以向服务器发送请求以及在不刷新页面的情况下接收来自服务器的响应数据,从而实现网页动态更新的效果。 二、向WebService发出请求,返回泛型集合数据的异步调用 在使用jQuery Ajax与Web Service交…

    JavaScript 2023年6月11日
    00
  • Javascript Date getDay() 方法

    以下是关于JavaScript Date对象的getDay()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的getDay()方法 JavaScript Date对象的getDay()方法返回一个星期中的某一天(0-6)。该方法可用获取当前日期的星期几。 下是使用Date对象的getDay()方法的示例: var date = new…

    JavaScript 2023年5月11日
    00
  • Javascript计算时间差的函数分享

    下面我来为你详细讲解“JavaScript计算时间差的函数分享”的完整攻略。在JavaScript中,我们可以通过Date对象来获取当前时间,并利用Date对象的方法计算时间差。 获取当前时间 我们可以使用new Date()获取当前时间,具体代码如下: const now = new Date(); console.log(now); 上述代码中,now就…

    JavaScript 2023年5月27日
    00
  • javascript进行四舍五入方法汇总

    JavaScript 进行四舍五入方法汇总 在JavaScript中,进行四舍五入操作的方法有多种,下面将为大家详细介绍其中常用的几种方法。 一、toFixed() toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,并将结果以字符串形式返回。 下面是一个示例: var num = 3.14159; console.log(num.to…

    JavaScript 2023年5月28日
    00
  • jQuery验证手机号邮箱身份证的正则表达式(含港澳台)

    下面是关于“jQuery验证手机号邮箱身份证的正则表达式(含港澳台)”的完整攻略。 什么是正则表达式? 正则表达式是一种特殊的字符序列,它们可以用于搜索和验证文本中的信息。尤其在表单验证场景中,正则表达式是一种非常常见的用法。 手机号验证的正则表达式 以下是验证手机号的正则表达式,支持大陆、港澳台地区: // 手机号验证正则表达式 /^(13[0-9]|14…

    JavaScript 2023年6月10日
    00
  • js闭包用法实例详解

    JS闭包用法实例详解 什么是闭包? 闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。在创建的内部函数中,可以访问外部函数的参数和变量,即使外部函数已经返回退出。 为什么要使用闭包? 闭包的主要作用是作为函数工厂,可以用来封装变量和方法,使全局变量不被污染。 同时,闭包可以让一个函数访问另一个函数的局部变量,使得…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部