从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要讲解了如何使用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:'notice'}); var toast = createDialog({name:'toast',element:'toast'}); var warnin = createDialog({name:'warnin',element:'warnin'}); notice.show(); //notice is show ->noticetoast.show(); //toast is show ->toastwarnin.show(); //warnin is show ->warnin
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图