JavaScript设计模式5——原型模式

JavaScript设计模式5——原型模式 2022-08-21 629

前言

提起原型，可能大家第一印象就是原型链吧。提起原型链，第一反应就是继承吧。今天我们讨论的原型模式，本质上说，也是一种继承。

先来认识一下什么是原型模式吧。

原型模式是一种创建型设计模式，允许一个对象再创建另外一个可定制的对象，根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象，这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。——百度百科

下图很好的阐述了原型模式。

来个例子看看它的使用场景吧。

实例

记得当初疫情刚开始的时候，我们公司接到了政府的项目，需要做一个大屏项目。当时由于领导层决策问题，导致我们干了半个月的项目要求推到重来，但是第二天甲方想看看开发进度，所以我们得做一个空壳项目忽悠一下甲方。

哎，这就有趣了，当初的项目，有四五个模块，页面长得都差不多，当时吧，我老大感觉这块挺简单，分分钟的事，交给我做。可惜人比较菜，也不懂什么设计模式，也不懂如何利用框架来做组件化开发简化工作，只是门头开始写布局，写事件。老大一看，好家伙，这么耿直的？然后亲自给我演示了什么叫做最快的男人，几分钟就搞定了。现在回过头来，发现当初老大编码处处透露着原型模式。现在就来模拟一下当初的场景，学习一下原型模式吧。

创建一个页面切换类

const LoopPages = function(pageArr, container) {
    this.pagesArray = pageArr;
    this.container = container;
}
LoopPages.prototype = {
    createPage: function(){
        // 创建页面逻辑
    },
    changePage: function(){
        // 切换页面逻辑
    }
}

大家使用过框架应该都清楚，spa页面之间的切换大多是通过路由来跳转，而路由又有多种传参方式。我们来定义两种不同传参方式的路由来进行切换页面。

const ParamsLoop = function(pageArr, container) {
    LoopPages.call(this, pageArr, container);
}
ParamsLoop.prototype = new LoopPages()
ParamsLoop.prototype.changePage = function(){
    // params 传参
}

const QueryLoop = function(pageArr, container) {
    LoopPages.call(this, pageArr, container);
}
QueryLoop.prototype = new LoopPages()
QueryLoop.prototype.changePage = function(){
    // query 传参
}

这样一来，我们就基本完成了需求，穿进去一个页面独有的数据数组，调用createPage创建页面数组，通过changePage来进行切换。只需要写一套方法和一个容器就完美的解决的当初的需求。