JavaScript 的 7 种设计模式 javascript设计模式( 二 )


3.1导出模块有两种方法可以导出函数和变量声明:
在函数和变量声明前添加export关键字 。例如:
// utils.jsexport const greeting = 'Hello World';export function sum(num1, num2) {console.log('Sum:', num1, num2);return num1 + num2;}export function subtract(num1, num2) {console.log('Subtract:', num1, num2);return num1 - num2;}// This is a private functionfunction privateLog() {console.log('Private Function');}
在代码末尾添加export关键字 , 以公开函数和变量 。例如:
// utils.jsfunction multiply(num1, num2) {console.log('Multiply:', num1, num2);return num1 * num2;}function divide(num1, num2) {console.log('Divide:', num1, num2);return num1 / num2;}// This is a private functionfunction privateLog() {console.log('Private Function');}export {multiply, divide};
3.2导入模块与导出模块类似,有两种方法可以使用import关键字导入模块 。例如:
一次导入多个项目 。
// main.js// importing multiple itemsimport { sum, multiply } from './utils.js';console.log(sum(3, 7));console.log(multiply(3, 7));
导入所有模块
// main.js// importing all of moduleimport * as utils from './utils.js';console.log(utils.sum(3, 7));console.log(utils.multiply(3, 7));
3.3在导入和导出中使用别名重命名导出
// utils.jsfunction sum(num1, num2) {console.log('Sum:', num1, num2);return num1 + num2;}function multiply(num1, num2) {console.log('Multiply:', num1, num2);return num1 * num2;}export {sum as add, multiply};
重命名导入
// main.jsimport { add, multiply as mult } from './utils.js';console.log(add(3, 7));console.log(mult(3, 7));
四 。单一模式单一对象是只能实例化一次的对象 。如果它不存在,singleton模式将创建该类的一个新实例 。如果有实例,则只返回对该对象的引用 。重复调用构造函数总是会得到相同的对象 。
JavaScript是一种内置单例的语言 。我们只是不称之为单例,我们称之为对象文字 。例如:
const user = {name: 'Peter',age: 25,job: 'Teacher',greet: function() {console.log('Hello!');}};
【JavaScript 的 7 种设计模式 javascript设计模式】因为JavaScript中的每个对象都占用一个唯一的内存位置,而当我们调用这个用户对象时,实际上是在返回这个对象的引用 。
如果我们试图将用户变量复制到另一个变量并修改它 。例如:
const user1 = user;user1.name = 'Mark';
我们将看到两个对象都被修改了,因为JavaScript中的对象是通过引用而不是通过值来传递的 。因此,内存中只有一个对象 。例如:
// prints 'Mark'console.log(user.name);// prints 'Mark'console.log(user1.name);// prints trueconsole.log(user === user1);
您可以使用构造函数来实现单例模式 。例如:
let instance = null;function User() {if(instance) {return instance;}instance = this;this.name = 'Peter';this.age = 25;return instance;}const user1 = new User();const user2 = new User();// prints trueconsole.log(user1 === user2);
当调用这个构造函数时,它将检查实例对象是否存在 。如果对象不存在,则将此变量赋给实例变量 。如果对象存在,则只返回对象 。
单实例也可以用模块模式实现 。例如:
const singleton = (function() {let instance;function init() {return {name: 'Peter',age: 24,};}return {getInstance: function() {if(!instance) {instance = init();}return instance;}}})();const instanceA = singleton.getInstance();const instanceB = singleton.getInstance();// prints trueconsole.log(instanceA === instanceB);
在上面的代码中,我们通过调用singleton.getInstance方法创建了一个新实例 。如果实例已经存在 , 此方法只返回实例 。如果实例不存在 , 通过调用init()函数创建一个新的实例 。
动词 (verb的缩写)工厂模式工厂模式使用工厂方法创建对象,而不指定特定的类或构造器模式 。
模式用于创建对象,而不暴露实例化的逻辑 。当我们需要根据具体情况生成不同的对象时,可以使用这种模式 。例如:
class Car{constructor(options) {this.doors = options.doors || 4;this.state = options.state || 'brand new';this.color = options.color || 'white';}}class Truck {constructor(options) {this.doors = options.doors || 4;this.state = options.state || 'used';this.color = options.color || 'black';}}class VehicleFactory {createVehicle(options) {if(options.vehicleType === 'car') {return new Car(options);} else if(options.vehicleType === 'truck') {return new Truck(options);}}}
这里 , 创建了一个car和一个truck类(带有一些默认值),用于创建新的Car和Truck对象 。此外 , VehicleFactory类被定义为根据options对象中的Vehiclefactory属性创建并返回一个新对象 。
const factory = new VehicleFactory();const car = factory.createVehicle({vehicleType: 'car',doors: 4,color: 'silver',state: 'Brand New'});const truck= factory.createVehicle({vehicleType: 'truck',doors: 2,color: 'white',state: 'used'});// Prints Car {doors: 4, state: "Brand New", color: "silver"}console.log(car);// Prints Truck {doors: 2, state: "used", color: "white"}console.log(truck);