再起航,我的学习笔记之JavaScript设计模式01
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧!
在通常情况下,我们在js中声明一个方法一般是直接
function MethodName(){
//具体逻辑
}
这样声明当然没问题,但是如我们是在团队中进行开发,这样声明的方法有可能会污染全局变量
这个时候您或许会想函数是变量吗?那么请看下面的例子
var MethodObject={
MethodName:function(){
//具体逻辑
}
}
这个时候我们可以将我们需要实现的函数作为MethodObject对象的方法,这样我们就只有一个对象,可以很大程度的避免污染全局变量
而我们想要调用这些方法也很简单,直接MethodObject.MethodName()就可以了,只是在我们以前的调用函数式前多了一个对象名称
既然我们可以通过".",来使用方法,那么我们也可以创建这个对象,不过我们要先声明一个对象,然后才能给它添加方法。
比如,我们先声明一个对象,当然在JavaScript中函数也是对象
var MethodObject=function(){};
接着我们对这个对象添加方法
MethodObject.MethodName=function(){
//具体逻辑
}
同样的我们也可以通过MethodObject.MethodName()去调用这个方法
但是,我们这样去创建对象有一个问题,如果别人想用我们这个对象里的方法就很麻烦,因为新创建的对象是不能继承我们这些方法的。这个时候我们可以将我们的方法放在一个函数对象中。
var MethodObject=function(){
return{
MethodName:function(){
//具体逻辑
}
}
}
当我们这样创建对象,每次调用这个函数的时候,都会把我们之前写的那个对象返回出来。
这样我们就可以通过下面的示例去创建并调用
var Method=MethodObject();
Method.MethodName();
虽然我们通过创建对象的方法,达到了我们最初的目的,避免污染全局,但是我们现在的写法不是一个真正意义上类的创建方式,而且我们return返回的对象和MethodObject对象无关,所以我们在对这个方式改造一下
var MethodObject=function(){
this.MethodName=function(){
//具体逻辑
}
}
像这样的对象我们就可以看成一个类了,我们可以使用关键字new来创建
var Method=new MethodObject();
Method.MethodName();
不过由于我们是通过this对其进行定义的,所以每一次通过new关键字创建对象,实际上新创建的对象都会对类的this上的属性进行复制,然而有时候这么做对内存的消耗是奢侈的,我们再来改进一下
var MethodObject=function(){};
MethodObject.prototype={
MethodName:function(){
//具体逻辑
}
}
这样我们创建出来的对象所拥有的方法就都是一个了,因为他们都要依赖prototype原型依次寻找,而找到的方法又都是同一个,它们都绑定在MethodObject类的原型上。
同样的我们也是通过new来创建通过"."来调用。
var Method=new MethodObject();
Method.MethodName();
但是,如果我们在对象里添加了多个方法,需要一个个的点出来,看上去不是很美观,我们还可以这么修改
var MethodObject=function(){};
MethodObject.prototype={
MethodName:function(){
//具体逻辑
return this;
},
MethodNameTwo:function(){
//具体逻辑
return this;
}
}
这样我们如果需要使用多个方法就可以通过链式直接点出来
var Method=new MethodObject();
Method.MethodName().MethodNameTwo();
这样我们就达到了我们最初的目的避免污染全局。
最后结合今天所分享的知识,再给大家带来统一添加方法的功能,也能实现避免污染全局的目的
首先我们向原声对象Function中添加一个添加方法的功能方法
Function.prototype.addMethod=function(name,fn){
this.prototype[name]=fn;
return this;
}
接着我们创建一个对象,并像其中添加方法
var Methods=function(){};
Methods.addMethod('MethodName',function(){
//具体逻辑
}).addMethod('MethodNameTwo',function(){
//具体逻辑
});
同样的我们需要通过new来创建对象再调用它
var method=new Methods();
method.MethodName();
好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。
再起航,我的学习笔记之JavaScript设计模式01的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式02
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 再起航,我的学习笔记之JavaScript设计模式03
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上一 ...
- 再起航,我的学习笔记之JavaScript设计模式04
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上回 ...
- 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式06(工厂方法模式)
上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建 ...
- 再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式09(原型模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
随机推荐
- Caused by: java.lang.RuntimeException: by java.lang.OutOfMemoryError: PermGen space(tomcat 启动时提示内存溢出)
设置MaxPermSize大小TOMCAT_HOME/bin/catalina.bat 文件头加set JAVA_OPTS='-Xms512m -Xmx1024m -XX:MaxPermSize=51 ...
- Google云平台技术架构
Google Cloud 设计原理: 1.分布式文件系统: Google Distributed File System(GSF) 为了满足Google迅速增长的数据处理需求,我们设计并实现了G ...
- javascript中的构造函数和继承
1.第一节 使用工厂模式创建一个构造函数CreatePerson function CreatePerson(name,sex){//构造函数:用于构造对象 可以说在js里类就是构造函数 //1.原料 ...
- 简单总结下关于blob的图片上传
我是从一本书上看到了Azure Blob,然后在网上浪了一会儿,发现了这篇文章,里面他已经把重点的则重地方讲完了,"飞机票:http://www.cnblogs.com/sparkdev/p ...
- 详解 RAC 中各种IP和监听的意义
一.SCAN 概念 SCAN(Single Client Access Name)是 Oracle从11g R2开始推出的,客户端可以通过 SCAN 特性负载均衡地连接到 RAC数据库 SCAN 最明 ...
- oracle数据库的编码
--oracle数据库的编码select * from nls_database_parameters where parameter ='NLS_CHARACTERSET';--oracle客户端编 ...
- thinkphp3.2自定义常量
在项目文件夹 (如:Home) 中的Common文件夹下新建function.php //thinkphp3.2.2版本加入如下语句: define('XXX', XXX); //第一个参数是常量名, ...
- 给linux虚拟机添加Samba用户
Window系统连上我们的开发机Linux,自然需要在Samba里添加一个新用户. linux-06bq:/usr/local/services/samba/bin # ./smbpasswd -a ...
- [leetcode-604-Design Compressed String Iterator]
Design and implement a data structure for a compressed string iterator. It should support the follow ...
- [leetcode-593-Valid Square]
Given the coordinates of four points in 2D space, return whether the four points could construct a s ...