js 设计模式

  首先我们需要知道JavaScript与传统的面向对象编程(oop)不同,它没有传统意义上的类,该语言的一切都是基于对象,依靠的是一套原型(prototype)系统。JavaScript通过原型委托的方式实现对象与对象之间的继承,而不是传统面向对象语言中的类式继承。

  动态类型语言的变量类型要到程序运行时,待变量赋值后,才能确定某种类型,而JavaScript就是一门典型的动态类型语言。

一、原型模式

  原型模式是用于创建对象的一种模式,可通过克隆来创建一个对象,最新的ECMAScript5提供了Object.create 方法来克隆对象:

<script>
var fruit={price:15,name:"apple"}
var demo=Object.create(fruit);
alert(demo.name);//apple
//或者: function sch(){this.name="hube";this.age=100;
}
var tt=new sch(); var t=Object.create(tt);alert(t.age);//100

//在不支持的该方法的浏览器中,则可以使用如下polyfill代码: Object.create=function(obj){var F=function(){};//定义了一个隐式的构造函数F.prototype=obj;return new F(); //还是通过new来实现的 } </script>

  Object.create()方法会使用指定的原型对象及其属性去创建一个新的对象。事实上JavaScript有一个根对象的存在,它就是Object.prototype对象,Object.prototype是一个空对象,我们创建的每一个对象都是从Object.prototype克隆而来:

var t={};// 以字面量方式创建的空对象就相当于:var t= Object.create(Object.prototype);
var s=new Object();
alert(Object.getPrototypeOf(t)===Object.prototype);//true
alert(Object.getPrototypeOf(s)===Object.prototype);//true

  上面创建二个”空“对象,利用了ECMAScript5的Object.getPrototypeOf方法查看到了二个对象的原型。这里的”空“加引号不是真正的空对象,它还继承了Object的一些属性及方法。创建一个空对象使用Object.create()即可:

var o = Object.create(null);//创建一个原型为null的空对象

  该模式不限于此,它更多的是提供了一种便捷的方式去创建某个类型的对象。

原型继承:

  实际上通过对对象构造器的原型动态赋值给其他对象来实现”类“与”类“之间的原型继承:

var A=function(){};
A.prototype.sayName=function(){alert("hi");}
var B=function(){}; B.prototype=new A();//这是核心代码:它重写了B的原型,它和把B.prototype直接赋值给字面量对象相比没有本质区别,//都是将对象构造器的原型指向另一个对象,而继承总是发生在对象与对象之间。 var b=new B(); b.sayName();//hi

 二、单例模式

  单例模式定义:保证一个类只有一个实例,并提供一个访问它的全局访问点。

  不过在js中并无“类”这一说,单例模式的核心是确保只有一个实例,并提供全局访问。我们经常会把全局变量当成单例来使用,例如这样的形式:

 var d={};

  不过这样使用全局变量会很容易造成命名空间的污染。我们有必要尽量减少全局变量的使用,将污染降低到最低为止。

以下二种方法可以相对降低全局变量带来的命名污染:

1、使用命名空间

  最简单的方式是使用对象字面量的形式:

var nameSpace={a:"jack",b:function(){}
};

  这里我们将a和b作为nameSpace的属性,这样可以减少变量和全局作用域碰面的机会。此外我们还可以动态的创建命名空间。

2、使用闭包来封装私有变量

  我们可以使用立即执行函数,来模拟块级作用域,把变量封装在闭包的内部,只暴露一些接口跟外界通信:

<button id="btn">click</button> 

var demo=(function(){var name="jack",age=18;return {getInfo:function(){ return name+"-"+age; } }})();alert(demo.getInfo());//jack-18

  惰性单例:是指只在需要的时候才创建对象的实例。比较实用。

下面是一个惰性单例的例子:

<button id="btn">click</button>
<script>var creatediv=(function(){var div;return function(){if(!div){div=document.createElement("div");div.style.width="200px";div.style.height="200px";div.style.border="1px solid red";div.style.display="none";document.body.appendChild(div);}return div;}})();document.getElementById("btn").οnclick=function(){var show=creatediv();show.style.display="block";};
</script>

 

三、策略模式

四、代理模式

待续

转载于:https://www.cnblogs.com/rain-null/p/7803005.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电子科大计算机调试,电子科大计算机学院 汇编语言程序设计 实验报告 99分精品版.doc...

电子科技大学 计算机科学与工程 学院标 准 实 验 报 告(实验)课程名称 汇编语言与微机接口技术综合实验电子科技大学教务处制表电 子 科 技 大 学实 验 报 告 (一)学生姓名&#xff1a;郫县英格拉姆 学 号&#xff1a;2014123456789 指导教师&#xff1a;皮皮怪实验地点&#x…

python环境变量配置步骤_关于人工智能Python系统环境变量设置步骤

最近无论是JAVA的环境变量配置,还是Python环境变量配置都有学生问我,我在这里写一下回答,当然我以配置Python的环境变脸来举例.首先需要确定本机电脑上安装上了Python首先解释一下为什么需要配置环境变量,我们平时打开一个应用程序&#xff0c;一般都是在桌面双击该软件的快捷方…

图文详解linux/windows mysql忘记root密码解决方案

经常有用户过来咨询说自己的mysql服务器忘记密码了怎么办&#xff0c;为了更好的解决大家的困扰&#xff0c;本文特归档整理了windows和linux系统下&#xff0c;mysql忘记密码的解决方案。本文内容是我亲测实用&#xff0c;当然过程中踩过的坑我也会在本文中一并分享交流。废话…

jquery 判断控件css样式,jQuery获取并设置CSS类

jQuery获取并设置CSS类通过 jQuery&#xff0c;可以很容易地对 CSS 元素进行操作。jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些&#xff1a;• addClass() - 向被选元素添加一个或多个类• removeClass() - 从被选元素删除一个或多个类• toggleCl…

零宽断言 python_正则表达式-零宽断言

[toc]一、零宽断言-介绍零宽断言&#xff0c;它匹配的内容不会提取&#xff0c;其作用是在一个限定位置的字符串向前或向后进行匹配查找。1.1、应用场景排除查找&#xff0c;查找不含有某段字符串的行包含查找&#xff0c;查找含有某段字符串的行二、断言的分类2.1、正先行断言…

JS闭包—你不知道的JavaScript上卷读书笔记(二)

关于闭包&#xff0c;初学者会被绕的晕头转向&#xff0c;在学习的路上也付出了很多精力来理解。 让我们一起来揭开闭包神秘的面纱。 闭包晦涩的定义 看过很多关于闭包的定义&#xff0c;很多讲的云里雾里&#xff0c;晦涩难懂。让不少人以为闭包是多么玄乎的东西。在我看过的所…

img 错误样式css,css设置图片大小_css 控制img图片的大小样式

摘要 腾兴网为您分享:css 控制img图片的大小样式&#xff0c;掌上财富&#xff0c;优品多多&#xff0c;问作业&#xff0c;淘客联盟等软件知识&#xff0c;以及手机游戏开挂神器&#xff0c;au补丁&#xff0c;局域网监测&#xff0c;苹果录屏专家&#xff0c;重复文件删除&am…

python读取视频流做人脸识别_基于 Python + OpenCV 进行人脸识别,视频追踪代码全注释...

1 #-*- coding: utf-8 -*-2 from __future__ importunicode_literals3 #操作文件4 importos5 #科学计算6 importnumpy as np7 #图像识别8 importcv2 as cv9 #数据预处理, 该项目中只使用了标签编码10 importsklearn.preprocessing as sp111213 defload_imgs(directory):14 加载…

vue css load,vue css3loadding插件的开发以及npm包的发布管理

插件开发的话建议使用vue-gitment脚手架开发vue init webpack-simple vue-gitment如果提示执行cnpm install vue-cli -g 全局安装cnpm install vue-cli -g在次执行上面的命令完成之后可以看到这样的目录在src下面添加component loadding.js loadding.vueloadding.vueexport def…

python label显示图片_python 实现在tkinter中动态显示label图片的方法

在编程中我们往往会希望能够实现这样的操作&#xff1a;点击Button&#xff0c;选择了图片&#xff0c;然后在窗口中的Label处显示选到的图片。那么这时候就需要如下代码&#xff1a;from tkinter import *from tkinter.filedialog import askopenfilenamedef choosepic():path…

如何更改服务器上的数据库文件夹,如何设置数据库文件位置

如何设置数据库文件位置08/07/2014本文内容适用于&#xff1a; Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007上一次修改主题&#xff1a; 2007-01-02本主题说明如何使用 Exchange 管理控制台或 Exchange 命令行管理程…

js删除数组中指定元素_js中数组操作详解

今天给大家带来一篇有关数组操作方法的文章。新建数组方法一&#xff1a;通过new运算符创建一个数组构造函数。var arr new Array();方法二&#xff1a;通过方括号直接创建直接量数组。var arr [1,2,3];添加数组中的元素方法一&#xff1a;通过下标添加元素。var arr new Ar…

控制台文字对战游戏 初始版

namespace 对战游戏{ class Program { #region public struct JueSe //创建一个角色对象 { public string XingMing;//这个对象中有这些属性 public int GongJi; public int ShengMing; public int…

查询链接服务器信息,如何通过 SQL Server 链接服务器和分布式查询使用 Excel

作为链接服务器查询 Excel您可以使用企业管理器、系统存储过程或 SQL-DMO(分布式管理对象)将 Excel 数据源配置为 SQL Server 链接服务器。在所有的这些情况中&#xff0c;您总需要设置以下四个属性&#xff1a;链接服务器要使用的名称。连接要使用的 OLE DB 提供程序。Excel 工…

python画精美图案_Python语言的魅力------完美图案

1.画椭圆(代码如下)#!user/bin/python# -*- conding:UTF-8 -*-if __name__ __main__:from Tkinter import *canvas Canvas(width800,height600,bgpurple)canvas.pack(expandYES,fillBOTH)k 1j 1for i in range(0,26):canvas.create_oval(310 - k,250 - k,310 k,250 k,wid…

批量下载,多文件压缩打包zip下载

0、写在前面的话图片批量下载&#xff0c;要求下载时集成为一个压缩包进行下载。从昨天下午折腾到现在&#xff0c;踩坑踩得莫名其妙&#xff0c;还是来唠唠&#xff0c;给自己留个印象的同时&#xff0c;也希望给需要用到这个方法的人带来一些帮助。1、先叨叨IO叨叨IO是因为网…

选了combobox里的选项后没激发change事件_35岁前多用利弊分析,35岁后要有“安全边际”...

想冒险&#xff0c;要趁早1/6、距离糟糕的事情发生&#xff0c;还有多远&#xff1f;我现在同时在职场和投资两类战线写文章&#xff0c;读者也开始串戏。前几天在我另外一个投资号上&#xff0c;有人问我&#xff1a;如果你把投资理念原则扩大到生活中&#xff0c;你觉得最有启…

不连续曲线 highcharts_什么是正则曲线和正则曲面

微分几何和微分流形的书上经常提到“正则曲线”和“正则曲面”。其实英文书中写作”Regular Curve“和”Regular Surface“&#xff0c;让人一眼能够了解其大意&#xff08;这也是我更偏向看英文原版书的原因&#xff09;。我就想&#xff0c;数学家为啥不翻译成”规则曲线“和…

centos安装 node.js

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum clean all yum makecache yum -y install nodejs转载于:https://www.cnblogs.com/linkenpark/p/7810238.html

11.06

{% extendsdaohang.html %} {% block title %}发布问答{% endblock %} {% block head %}<link rel"stylesheet" href"{{ url_for(static,filenamecss/14.css) }}" type"text/css"> {% endblock %}{% block main %}<div class"box&…