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程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了代码规范需要防微杜渐code review中的6个小错误纠正，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
下面小编就为大家分享一篇完美解决手机网页中输入框被输入法遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JS window对象简单操作,结合完整实例形式分析了JavaScript Window对象各种常见提示框、弹出窗口及时间相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了js表单提交和submit提交的区别,结合实例形式较为详细的分析了js表单提交和submit提交具体实现方法与使用技巧,需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了Web Components入门教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了js实现简单贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了JavaScript设置获取和设置属性的方法，学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下2015-03-03
javascript Array.prototype.slice使用说明
slice 可以用来获取数组片段，它返回新数组，不会修改原数组。2010-10-10
这篇文章主要介绍了javascript使用call调用微信API,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了通过JavaScript实现的带音效的烟花特效，文中的示例代码简洁易懂，对我们学习JavaScript有一定的帮助，感兴趣的可以了解一下2021-12-12
最新评论