js设计模式(存储库-策略-访问者)

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

存储库(Memento)

Memento 表示存储库,其存储对象的状态。在应用程序中可能存在需要保存和恢复对象状态的场景。大多数时候,使用 JSON 的对象的序列化和反序列化属性有助于实现这种设计模式。

var Toy = function (name, country, city, year) {
    this.name = name;
    this.country = country;
    this.city = city;
    this.year = year;
}

Toy.prototype = {
    encryptLabel: function () {
        var memento = JSON.stringify(this);
        return memento;
    },

    decryptLabel: function (memento) {
        var m = JSON.parse(memento);
        this.name = m.name;
        this.country = m.country;
        this.city = m.city;
        this.year = m.year;
        console.log(m);
    }
}

function print() {
    var darth = new Toy("Darth Vader", "USA", "2022");
    darth.encryptLabel();
    darth.decryptLabel();
}

策略模式

策略设计模式用于封装算法,可以用来完成特定的任务。基于某些前提条件,实际执行的策略(别名方法)会发生变化。这意味着策略中使用的算法是高度可互换的。

在我们的玩具工厂,我们使用三个不同的公司运送产品:FedEx、USPS 和 UPS。最终的运输成本取决于公司。因此,我们可以使用策略设计模式来决定最终成本。

Distributor.prototype = {
    setDistributor: function (company) {
        this.company = company;
    },

    computeFinalCost: function () {
        return this.company.compute();
    }
};

var UPS = function () {
    this.compute = function () {
        return "$45.95";
    }
};

var USPS = function () {
    this.compute = function () {
        return "$39.40";
    }
};

var Fedex = function () {
    this.compute = function () {
        return "$43.20";
    }
};

function run() {
    var ups = new UPS();
    var usps = new USPS();
    var fedex = new Fedex();
    var distributor = new Distributor();
    distributor.setDistributor(ups);
    console.log("UPS Strategy: " + distributor.computeFinalCost());
    distributor.setDistributor(usps);
    console.log("USPS Strategy: " + distributor.computeFinalCost());
    distributor.setDistributor(fedex);
    console.log("Fedex Strategy: " + distributor.computeFinalCost());
}

访问者模式(Visitor)

最后,我们有访问者设计模式。当必须为一组对象定义新操作时,它很有用。但是,对象的原始结构应该保持不变。当您必须扩展框架或库时,此模式很有用。与本文讨论的其他模式不同,访问者设计模式在 Javascript 中并未广泛使用。为什么? JavaScript 引擎提供了更高级和更灵活的方式来动态添加或删除对象的属性。

var Employee = function (name, salary, vacation) {
    var self = this;

    this.accept = function (visitor) {
        visitor.visit(self);
    };
    this.getSalary = function () {
        return salary;
    };
    this.setSalary = function (salary) {
        salary = salary;
    };
};

var ExtraSalary = function () {
    this.visit = function (emp) {
        emp.setSalary(emp.getSalary() * 2);
    };
};

function run() {
    var john = new Employee("John", 10000, 10),
    var visitorSalary = new ExtraSalary();
      john.accept(visitorSalary);
    }
}

 

版权声明:著作权归作者所有。

相关推荐

[译]Android UI设计与样式——dp和sp

朋友们,最近我一直在做一些Android UI设计和样式的培训课程。 我想和更多观众分享。 这是我的第一个android ui设计和样式教程。 我将在这个主题上写更多的内容。 那么现在开始吧...DP, SP & Pixels作为Android开发人员,我们始终希望我们的UI设计与设备无关。 

MySQL存储emoji表情

emoji编码为unicode占用4个字节,如果MySQL字符编码为utf8,存储emoji会报错:Incorrect string value: '\xF0\x9F\x98\x84' for column 'content' at row 解决方法MySQL >=5.5.3把存储含有emoji表情的字

Html5使用localStorage存储对象数据

Html5可使用localStorage存储数据,其方法为storage.setItem(keyName, keyValue); 其中:keyName:键,字符串类型keyValue:值,字符串类型关于setItem,可以参考:Storage.setItem()。如果需要存储对象数据,那么需要把对象数据使用JSON.stringify转换为字符串。localStorage.setItem

Redis设置key过期以及删除过期key的策略

Redis有以下几个命令用于设置key的过期时间:expire <key> <seconds>:给key设置以秒为单位的过期时间pexpire <key> <milliseconds>:给key设置以毫秒为单位的过期时间expireat <key> <timestamp_in_seconds>:指定一个以秒为单位的时间戳,当到

Nginx禁用ip访问

在Nginx配置禁用ip访问有两种方法:方法一:新增一个server,设置为默认的虚拟主机如下:server { listen 80 default; server_name _; return 403; }方法二、只允许指定域名进入listen 80; server_name www.example.com; if ($host !=

Nginx禁止直接使用IP访问

默认情况下,使用IP就可以访问到主机的默认页面。为了防止别人恶意将域名解析到自己的IP上,可以修改Nginx配置禁止直接使用ip访问。添加server如下:server {  listen 80 default;  server_name _;  return 403;}如果要禁止使用https访问,添加server如下:server { listen 443 d

Python多线程编程 - 用队列实现生产者消费者模式

生产者和消费者模式的实现有很多中方式。这里的示例基于队列来实现生产者和消费者模式。生产者和消费者在各自的线程中运行,并检查队列的状态。如果队列没有满,生产者线程负责往队列里放数据。消费者线程负责从队列里取数据,前提是队列不是空的。代码示例:import threadingimport timeimport loggingimport randomimport Queuelogging.basicC

STM32之寄存器访问

一般的寄存器访问需要通过读-改-写三步曲 和 位运算的清0置1来实现,但在stm32的编程中,通过利用它的一些优秀的特性如端口位设置/复位寄存BSRR、位绑定等,我们可以大大提升寄存器的访问速度和简化寄存器的操作。GPIO->ODR |= 0x10; //Pin4置1GPIO->ODR &= ~0x10; //Pin4清0 BSRR/BRR寄存器GPIO->BSRR

Window10防火墙设置端口允许访问

第一步:在Windows10的右下角的搜索框,输入“防火墙”进行搜索,选择“防火墙和网络保护”,如图:第二步:在防火墙和网络保护中,选择“高级设置”,如图:第三步:进入高级设置面板,选择左侧菜单的“入站规则”,然后选择右侧菜单的“新建规则”,如图:第四步:进入新建入站规则步骤,在窗口勾选“端口”,点击“下一步”:第五步:在端口设置步骤,选择协议,如TCP,选择“特定本地端口”,然后再输入框输入要开