javascript设计模式 – 原型模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 原型模式原理与应用。分享给大家供大家参考，具体如下：

介绍：在日常的开发过程中，我们经常会利用到前端模板引擎来做页面渲染，因为存在很多页面结构相同，内容不同的场景。这种场景在js层面也会遇到，

很多组件存在相同或者类似，重复的创建会导致系统的消耗，这就要用到原型模式了。将相似内容提取出来作为原型类，创建具体类时需要对原型类进行复制然后扩展。

需要注意的是，复制出来的对象在进行修改时不会影响到原型类，二者相互独立。

定义：使用原型实例指定创建对象的种类，并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。

场景：我们还是基于Dialog类来实现原型模式，我将所有弹窗共有的属性方法抽取出来，每次创建时通过复制其基础属性，在此基础上进行完善，然后返回新的对象。

示例：

var Dialog = function(){
 this.init = function(arg){
 this.element = arg.element;
 this.name = arg.name;
 }
 this.show = function(){
 console.log(this.name + ' is show -> ' + this.element);
 }
};
var createDialog = function(arg){
 var _dialog = function(){};
 _dialog.prototype = new Dialog();

 var resDia = new _dialog();
 resDia.init(arg);
 return resDia;

}
var notice = createDialog({name:'notice',element:'<div>notice</div>'});
var toast = createDialog({name:'toast',element:'<div>toast</div>'});
var warnin = createDialog({name:'warnin',element:'<div>warnin</div>'});

notice.show(); //notice is show -> <div>notice</div>
toast.show(); //toast is show -> <div>toast</div>
warnin.show(); //warnin is show -> <div>warnin</div>

原型模式总结：

优点：
* 当创建新的对象实例较为复杂时，使用原型模式可以简化对象的创建过程，通过复制一个已有实例可以提高新实例的创建效率。
* 扩展性较好

缺点：
* 对已有类进行改造时需要修改源代码，违背了开关原则。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript设计模式 – 抽象工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 抽象工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:基于工厂模式,继续升级.来解决工厂模式存在多个工厂类的问题.主要的思想是将一些相关的产品组成一个产品族,由同一个工厂来统一生产. 定义:抽象工厂模式提供一个创建一系列相关或相互依赖的接口,而无须指定他们具体的类.抽象工厂模式又称kit模式,它是一种对象创建型模式. 场景:还是上面的Dialog类,如果继续向后发展,会有各种各样的弹窗,如果新增一个弹窗包含了notice和toast.这样

  • javascript 设计模式之享元模式原理与应用详解

    本文实例讲述了javascript 设计模式之享元模式.分享给大家供大家参考,具体如下: 享元模式说明 定义:用于解决一个系统大量细粒度对象的共享问题: 关健词:分离跟共享: 说明: 享元模式分单纯(共享)享元模式,以及组合(不共享)享元模式,有共享跟不共享之分:单纯享元模式,只包含共享的状态,可共享状态是不可变,不可修改的,这是享元的内部状态:当然有外部状态就有外部状态,外部状态是可变的,不被共享,这个外部状态由客户端来管理,是可变化的:外部状态与内部状态是独立分开的,外部状态一般作为参数传入

  • javascript设计模式 – 建造者模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 建造者模式原理与应用.分享给大家供大家参考,具体如下: 介绍:建造者模式又称为生成器模式,它是一种较为复杂.使用频率相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品 定义:将一个复杂对象的构建与他的表示分离,使得同样的构建过程可以创建不同的表示.建造者模式是一种对象创建型模式. 示例: var Dialog = function (){ this.type = ''; this.name = '';

  • javascript设计模式 – 工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码.我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本.那如何实现增加新产品而不影响已有代码?工厂模式应运而生. 定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化.工厂模式让一个类的实例化延迟到其子类.工厂模式又称为工厂方法模式,又可

  • javascript 设计模式之组合模式原理与应用详解

    本文实例讲述了javascript 设计模式之组合模式原理与应用.分享给大家供大家参考,具体如下: 组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点: 在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实现: 这个抽象定义一般三个部分组成,组件的基本信息,Add方法,Remove方法: 叶子节点只包含本

  • 浅谈Node.js 中间件模式

    浅谈Node.js 中间件模式

    中间件在 Node.js 中被广泛使用,它泛指一种特定的设计模式.一系列的处理单元.过滤器和处理程序,以函数的形式存在,连接在一起,形成一个异步队列,来完成对任何数据的预处理和后处理. 它的优点在于 灵活性 :使用中间件我们用极少的操作就能得到一个插件,用最简单的方法就能将新的过滤器和处理程序扩展到现有的系统上. 常规中间件模式 中间件模式中,最基础的组成部分就是 中间件管理器 ,我们可以用它来组织和执行中间件的函数,如图所示: 要实现中间件模式,最重要的实现细节是: 可以通过调用use()函数

  • javascript设计模式 – 简单工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 简单工厂模式.分享给大家供大家参考,具体如下: 介绍:简单工厂模式是最常用的一类创建型设计模式.其中简单工厂模式并不属于GoF23个经典设计模式,它通常被作为学习其他工厂模式的基础. 定义:定义一个工厂类,它可以根据参数的不同返回不同的实例,被创建的实例通常都具有相同的父类,因为在简单工厂模式中创建实例的方法是静态方法,因此简单工厂模式又被称为静态工厂方法模式,它属于类创建型模式. 场景:我们需要写一个dialog工具类,在项目初期我们只需要考虑一

  • JS中间件设计模式的深入探讨与实例分析

    本文实例讲述了JS中间件设计模式.分享给大家供大家参考,具体如下: 中间件作为一些辅助处理功能,应用非常广泛,例如express中间件,redux中间件,koa中间件,那么中间件的设计模式到底是怎样的呢.结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式. 仿照redux中间件实现模式,看如下一个例子: function fn2(next){ console.log('执行2,返回改造的next之前') return action => { console.log('执行2') n

  • javascript设计模式 – 单例模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 单例模式.分享给大家供大家参考,具体如下: 介绍:单例模式是结构最简单的设计模式.单例模式用于创建那些在软件系统中独一无二的对象,是一个简单但很实用的设计模式. 定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法.单例模式是一种对象创建型模式. 场景:日常编码中会有很多需要重用的场景,例如弹窗,键盘输入这类公共组件,我们往往希望它只创建一次,在第二次使用时重复使用之前创建好的实例.为了节约

  • javascript设计模式 – 原型模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 原型模式原理与应用.分享给大家供大家参考,具体如下: 介绍:在日常的开发过程中,我们经常会利用到前端模板引擎来做页面渲染,因为存在很多页面结构相同,内容不同的场景.这种场景在js层面也会遇到, 很多组件存在相同或者类似,重复的创建会导致系统的消耗,这就要用到原型模式了.将相似内容提取出来作为原型类,创建具体类时需要对原型类进行复制然后扩展. 需要注意的是,复制出来的对象在进行修改时不会影响到原型类,二者相互独立. 定义:使用原型实例指定创建对象的种

  • javascript设计模式 – 桥接模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 桥接模式原理与应用.分享给大家供大家参考,具体如下: 介绍:如果软件系统中某个类存在两个或多个独立变化的维度,可以通过桥接模式将这些维度分离出来,使两者可以独立扩展,让系统更符合单一职责原则. 定义:将抽象部分与其实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 场景:我们做一个简单的画圆,将圆的半径和颜色这两个维度进行分离,使每一个维度都可以单独扩展,很多同学都说这么简单一个需求我5行代码就实现了.为什么写

  • javascript设计模式 – 组合模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 组合模式原理与应用.分享给大家供大家参考,具体如下: 介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式. 它是一种对象结构型模式. 场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区

  • javascript设计模式 – 代理模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 代理模式原理与用法.分享给大家供大家参考,具体如下: 介绍:代理使我们很常见的一众模式,proxy,nginx都称之为代理,代理是什么意思呢?代理模式在客户端和目标对象之间加入一个新的代理对象,代理对象起到一个中介作用,去掉客户不能看到的内容和服务,或者增添客户需要的额外服务. 定义:给某一个对象提供一个代理,并由代理对象控制对原对象的引用.代理模式是一种对象结构型模式. 场景:我们还是以画图形为例,我将所有的绘图动作包装到Shape类中,使用代理

  • javascript设计模式 – 外观模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 外观模式原理与用法.分享给大家供大家参考,具体如下: 介绍:外观模式是一种使用频率非常高的结构型设计模式,它通过引入一个外观角色来简化客户端与子系统之间的交互,为复杂的子系统调用提供一个统一的入口,隐藏系统复杂度,降低子系统与客户端的耦合度. 定义: 为子系统中的一组接口提供一个统一的入口.外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 场景:我们还是用画圆的方式来介绍下外观模式. 示例: var Rectangle = func

  • javascript设计模式 – 迭代器模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 迭代器模式原理与用法.分享给大家供大家参考,具体如下: 介绍:迭代器模式是一种使用频率非常高的设计模式,通过引入迭代器,可以将数据的遍历功能从聚合对象中分离出来.迭代器模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 定义:提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor).迭代器模式是一种对象行为型模式. 场景:我们做一个百家姓的迭代器 示例: function NameRepository(){

  • javascript设计模式 – 解释器模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 解释器模式原理与用法.分享给大家供大家参考,具体如下: 介绍:之前在做java开发时,数据库的增删改查特别频繁,并且场景不同需要用到的SQL语句页都不同,如何用调用方法的形式来使用sql语句,拼接sql?这就是这一节我们要讲的解释器模式. 定义:定义一个语言的文法,并且建立一个解释器来解释该语言中的句子,这里的语言是指使用规定格式和语法的代码.解释器模式是一种类行为型模式. 场景:我们实现一个解释器,用来判断传递的数字是奇数还是偶数,是正数还是负数

  • javascript设计模式 – 命令模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 命令模式原理与用法.分享给大家供大家参考,具体如下: 介绍:命令模式是一种数据驱动的设计模式,将请求以命令的形式包裹在对象中,并传递给调用对象.命令模式的核心在于引入了命令类,通过命令类来降低发送者和接受者的耦合度. 定义:将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务(Transaction)模式. 场景:我们通过

随机推荐