javascript单例

    xiaoxiao2026-04-02  5

    javascript单例

    单例模式是指,一个类仅有一个实例,并提供一个访问它的全局访问点。

    一般单例写法

    var Singleton = function (name) { this.name = name; this.instance = null; }; Singleton.prototype.getName= function(){ console.log(this.name); }; Singleton.getInstance = function (name) { if(!this.instance){ this.instance = new Singleton(name); } return this.instance; }; var a = Singleton.getInstance('a'); var b = Singleton.getInstance('b'); console.log(a === b);

    上一种写法的问题是,对象能被任意修改,对象存在被破坏的风险。保护对象我们当然想起的就是使用闭包

    var Singleton = function (name) { this.name = name; }; Singleton.prototype.getName= function(){ console.log(this.name); }; Singleton.getInstance = (function () { var instance = null; return function (name) { if(!instance){ instance = new Singleton(name); } return instance; } })(); var a = Singleton.getInstance('a'); var b = Singleton.getInstance('b'); console.log(a === b);

    利用javascript语言特性创建单例

    实际上以上单例模式是行的通的,但是实际上javascript天然支持单例,在构造函数中直接返回对象精可以创建单例。

    var User = (function () { var __name = 'xin',__age = 29; return { getInfo: function () { return __name + '-' + __age; }, setName: function (name) { return __name = name; } }; })(); console.log(User.getInfo()); User.setName('bing'); console.log(User.getInfo());

    惰性单例

    <body> <button id="loginBtn">登录</button> </body> <script> var createLoginLayer = (function () { var div; return function () { if (!div){ div = document.createElement('div'); div.innerHTML = '这是登录悬浮窗'; div.style.display = 'none'; document.body.appendChild(div); } return div; } })(); document.getElementById('loginBtn').onclick = function () { var loginLayer = createLoginLayer(); loginLayer.style.display = 'block'; } </script>

    通用惰性单例

    通用的惰性单例,使职责单一

    <body> <button id="loginBtn">登录</button> </body> <script> /*该单例是通用的并可以复用*/ var getSingle = function (fn) { var result; return function () { return result || (result = fn.apply(this, arguments)); } }; //被传递使用的函数 var createLoginLayer = function () { var div = document.createElement('div'); div.innerHTML = "只是悬浮窗口"; div.style.display = 'none'; document.body.appendChild(div); return div; }; var createSingleLoginLayer = getSingle(createLoginLayer); document.getElementById('loginBtn').onclick = function () { var loginLayer = createSingleLoginLayer(); loginLayer.style.display = 'block'; } </script>
    转载请注明原文地址: https://ju.6miu.com/read-1308417.html
    最新回复(0)