Heim  >  Artikel  >  Web-Frontend  >  js-Entwurfsmuster – Verwendung eines Singleton-Musters

js-Entwurfsmuster – Verwendung eines Singleton-Musters

php中世界最好的语言
php中世界最好的语言Original
2018-03-14 14:02:332395Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von jsDesignmuster-Einzelfallmodus vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung des js-Singleton-Modus? ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Konzept:
In den Augen traditioneller Entwicklungsingenieure stellt das Single-Interest-Modell sicher, dass jede Klasse nur eine Instanz hat Existiert, geben Sie es direkt zurück. Wenn es nicht existiert, erstellen Sie es und geben Sie es zurück. Dadurch wird sichergestellt, dass es für jede Klasse nur ein Instanzobjekt gibt. In JavaScript fungiert ein Singleton als Anbieter eines Namespace und stellt einen eindeutigen Zugriffspunkt für den globalen Zugriff auf Objekte bereit. 123
2. Funktionen und Vorsichtsmaßnahmen:
Funktionen: 1. Kommunikation zwischen Modulen
2. Nur ein Objekt einer bestimmten Klasse kann im System existieren
3. Schützen Sie Ihre eigenen Attribute und Methode
Hinweise: 1. Achten Sie auf die Verwendung von
2. Schließungen können leicht zu Speicherverlusten führen
3. Achten Sie bei der Verwendung von Vererbung auf die Verwendung von new.

3. Der einfachste Weg,
zu implementieren, ist die Verwendung von Objektliteralen, die eine große Anzahl von Attributen und Methoden enthalten können.

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

Wenn Sie dieses Objekt erweitern möchten, können wir unsere eigenen privaten Mitglieder bereitstellen und dann diese Variablen- und Funktionsdeklarationen durch Abschlüsse darin einkapseln. Wir können private oder öffentliche Methoden implementieren. Schauen wir uns den folgenden Code noch einmal an:

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!'

Wenn wir ihn nur dann initialisieren möchten, wenn er verwendet wird, wie sollten wir das tun? Um Ressourcen zu sparen, können wir diese Codes wie folgt in einem anderen Konstruktor initialisieren:

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();

Schauen wir uns die Verwendungsszenarien an, die im Allgemeinen in Bezug auf die Kommunikation verwendet werden Koordination verschiedener Modi zwischen Systemen

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

Das Folgende ist ein Link zu einem Beispiel für die Implementierung des Singleton-Modus. Hier ist der Link:
Lösung zur HTML-Konvertierung beim Speichern von Textarea-Daten Txt und Anzeige Txt zu HTML

Die obige Methode wird hauptsächlich implementiert, und es gibt andere Implementierungsmethoden (aus Onkel Toms Blog)
Methode 1,

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

Methode 2,

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche JavaScript-DOM-Anwendung

Ausführlicher JavaScript-Timer

Tief in die grundlegende Anwendung von JavaScript

Das obige ist der detaillierte Inhalt vonjs-Entwurfsmuster – Verwendung eines Singleton-Musters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn