富贵资源网 Design By www.hznty.com

本文实例讲述了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程序设计有所帮助。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com