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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python程序 创建多线程过程详解
2019/09/23 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
招聘与培训专员岗位职责
2014/01/30 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA