视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js设计模式之-单例模式的使用
2020-11-27 20:00:52 责编:小采
文档


这次给大家带来js设计模式之-单例模式的使用,使用js单例模式的使用注意事项有哪些,下面就是实战案例,一起来看一下。

1、概念:
在传统的开发工程师眼里,单利模式就是保证每一个类只有一个实例,我们在实现时首先判断实例是否存在,如果存在,则直接返回,如果不存在就创建了再返回,这就确保了每一个类只有一个实例对象。在javascript里单例作为一个命名空间的提供者,从全局里提供一个唯一的访问点来访问对象。123
2、作用以及注意事项:
作用:1.模块间通信
2.系统中某个类的对象只能存在一个
3.保护自己的属性和方法
注意事项:1.注意this的使用
2.闭包容易造成内存泄漏
3.使用继承时注意new的使用。

3、实现
最简单的一种办法就是使用是对象字面量的方法,其字面量里可以包含大量的属性和方法。

var firstObject = {
 property1: "something",
 property2: "something else",
 method1: function () {
 console.log('hello web!');
 }
};

如果你要扩展该对象,我们可以提供自己的私有成员,然后我们通过闭包在其内部封装这些变量和函数声明。我们可以实现私有或者公有的方法。我们再看下面这一段代码:

var firstObject= function () {
 /* 这里声明私有变量和方法 */
 var privateVariable = 'something private'; function showPrivate() {
 console.log(privateVariable);
 } /* 公有变量和方法(可以访问私有变量和方法) */
 return {
 publicMethod: function () {
 showPrivate();
 },
 publicVar: 'the public can see this!'
 };
};var single = firstObject();
single.publicMethod(); // 
输出 'something private'console.log(single.publicVar); // 输出 'the public can see this!'

如果我们想做到只有在使用的时候才初始化,那该如何做呢?为了节约资源的目的,我们可以另外一个构造函数里来初始化这些代码,如下:

var firstjObiect= (function () {
 var instantiated; function init() {
 /*这里定义单例代码*/
 return {
 publicMethod: function () {
 console.log('hello world');
 },
 publicProperty: 'test'
 };
 } return {
 getInstance: function () {
 if (!instantiated) {
 instantiated = init();
 } return instantiated;
 }
 };
})();/*调用公有的方法来获取实例:*/firstjObiect.getInstance().publicMethod();

我们来看一下他的使用场景,单例一般是用在系统间各种模式的通信协调上

var firstObjectTester = (function () {
 //参数:传递给单例的一个参数集合
 function Singleton(args) {
 //设置args变量为接收的参数或者为空(如果没有提供的话)
 var args = args || {}; //设置name参数
 this.name = 'SingletonTester'; //设置pointX的值
 this.pointX = args.pointX || 6; //从接收的参数里获取,或者设置为默认值
 //设置pointY的值
 this.pointY = args.pointY || 10;
 } //实例容器
 var instance; var _static = {
 name: 'SingletonTester', //获取实例的方法
 //返回Singleton的实例
 getInstance: function (args) {
 if (instance === undefined) {
 instance = new Singleton(args);
 } return instance;
 }
 }; return _static;
})();var singletonTest = firstObjectTester .getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // 
输出 5

下面给大家链接一下单例模式实现的一个例子,这里把那链接给大家:
解决Textarea的数据存储时的Html转Txt和展示时Txt转Html

上面这种方式主要实现的方法,还有其他的一些实现方法(来自汤姆大叔的博客)
方法一、

function Universe() {
 // 判断是否存在实例
 if (typeof Universe.instance === 'object') { return Universe.instance;
 } // 其它内容
 this.start_time = 0; this.bang = "Big"; // 缓存
 Universe.instance = this; // 隐式返回this}// 测试var uni = new Universe();var uni2 = new Universe();
console.log(uni === uni2); // true

方法二、

function Universe() {
 // 缓存的实例
 var instance = this; // 其它内容
 this.start_time = 0; this.bang = "Big"; // 重写构造函数
 Universe = function () {
 return instance;
 };
}// 测试var uni = new Universe();var uni2 = new Universe();
uni.bang = "123";
console.log(uni === uni2); // trueconsole.log(uni2.bang); // 123

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

深入JavaScript之DOM应用

深入JavaScript之定时器

深入JavaScript之基础应用

下载本文
显示全文
专题