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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
antd table按表格里的日期去排序操作
Nov 17 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js创建数组的简单方法
2016/07/27 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
setTimeout学习小结
2017/02/08 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
讲解Python中的标识运算符
2015/05/14 Python
python清理子进程机制剖析
2017/11/23 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python下简易的单例模式详解
2019/04/08 Python
python装饰器常见使用方法分析
2019/06/26 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
打架检讨书500字
2014/01/29 职场文书
幼师求职自荐信
2014/05/31 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers
基于Python实现西西成语接龙小助手
2022/08/05 Golang