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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue 子组件向父组件传值方法
Feb 26 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
浅谈React之状态(State)
Sep 19 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 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
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
24式加速你的Python(小结)
2019/06/13 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
简单的命令查看安装的python版本号
2020/08/28 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
教师求职自荐书
2014/06/14 职场文书
争先创优活动总结
2014/08/27 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
党员检讨书
2014/10/13 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
MySQL分区表管理命令汇总
2022/03/21 MySQL