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


Posted in Javascript onApril 10, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
微信小程序仿通讯录功能
Apr 09 #Javascript
vue cli4下环境变量和模式示例详解
Apr 09 #Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
jquery cookie插件代码类
2009/05/26 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue组件name的作用小结
2018/05/23 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
详解python的四种内置数据结构
2019/03/19 Python
python、Matlab求定积分的实现
2019/11/20 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015政治思想表现评语
2015/03/25 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle