js設計模式之-單例模式的使用

php中世界最好的语言
發布: 2018-03-14 14:02:33
原創
2312 人瀏覽過

這次帶給大家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
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

深入JavaScript之DOM應用

#深入JavaScript之定時器

深入JavaScript基礎應用程式

#

以上是js設計模式之-單例模式的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!