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面向对象编程代码
Dec 19 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python简单的函数定义和用法实例
2015/05/07 Python
python制作一个桌面便签软件
2015/08/09 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
策划创业计划书
2014/02/06 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
小学体育组工作总结
2015/08/13 职场文书