前端設計模式（2）--單例模式

時間 2019-11-08

標籤前端設計模式简体版

原文原文鏈接

設計模式清單

沒有連接的是尚未寫的，計劃要寫的，歡迎閱讀交流~
前端設計模式（0）面向對象&&設計原則
 前端設計模式（1）--工廠模式
 前端設計模式（2）--單例模式
前端設計模式（3）--適配器模式
前端設計模式（4）--裝飾器模式
前端設計模式（5）--代理模式
前端設計模式（6）--外觀模式&&觀察者模式
前端設計模式（7）--狀態和策略模式
前端設計模式（8）--原型模式
...css

單例模式是什麼?

單例就是保證一個類只有一個實例，實現方法通常是先判斷實例存在與否，若是存在直接返回，若是不存在就建立了再返回，這就確保了一個類只有一個實例對象。在JavaScript裏，單例做爲一個命名空間提供者，從全局命名空間裏提供一個惟一的訪問點來訪問該對象。html

代碼

單例模式的簡單實現

es5

function Window(name) {
    this.name = name;
}
Window.prototype.getName = function () {
    return this.name;
}

//這是類上的方法，只能夠經過類來訪問,而不能經過實例來訪問
Window.getInstance = (function () {
    let instance;
    return function (name) {
        if (!instance) {
            instance = new Window(name);
        }
        return instance;
    }
})();

let w1 = Window.getInstance();
let w2 = Window.getInstance();

console.log(w1 === w2) // --> true 
複製代碼

es6

class Window {
    constructor(name) {
        this.name = name;
    }
    static getInstance() {
        if (!this.instance) {
            this.instance = new Window();
        }
        return this.instance;
    }
}
let w1 = Window.getInstance();
let w2 = Window.getInstance();
console.log(w1 === w2)
複製代碼

缺點：

客戶端就是使用這個類的使用者必須知道這是一個單例的類，必須主動調用getInstance方法,使用麻煩
並不能真正阻止客戶端直接new Window

let w3 = new Window();
let w4 = new Window();
複製代碼

優化過程

透明單例

//透明單例
let Window = (function () {
    let window;
    let Window = function (name) {
        if (window) {
            return window;
        } else {
            this.name = name;
            return (window = this);
        }
    }
    return Window;
})();
let w1 = new Window();
let w2 = new Window();
console.log(w1 === w2);
複製代碼

建立一個this=空對象
new 關鍵字，若是返回的是一個對象，那麼返回對象

可是有個問題：違反了單一職責原則，不夠清晰，因此須要改進一下前端

//把類的實例的建立邏輯和單例邏輯分開
function Window(name) {
    this.name = name;
}
Window.prototype.getName = function () {
    console.log(this.name);
}


let CreateWindow = (function () {
    let instance;
    return function (name) {
        if (!instance) {
            instance = new Window(name);
        }
        return instance;
    }
})();
let w1 = new CreateWindow('zfpx1');
let w2 = new CreateWindow('zfpx2');
console.log(w1 === w2);
複製代碼

如今是清晰了，可是還有一個小問題，Window給寫死了,做爲一個優秀的程序員，確定要靈活，來來再改進一下。jquery

function Window(name) {
    this.name = name;
}
Window.prototype.getName = function () {
    console.log(this.name);
}


let CreateWindow = (function () {
    let instance;
    return function (name) {
        if (!instance) {
            instance = new Window(name);
        }
        return instance;
    }
})();
let w1 = new CreateWindow('zfpx1');
let w2 = new CreateWindow('zfpx2');
console.log(w1 === w2);
複製代碼

命名空間

1.變量名衝突程序員

2.複雜層次對象的可讀性要求es6

其實咱們以前用的jquery並無把變量都聲明在 window上，而是都掛在$對象 jQuery,來，栗子兩枚:ajax

$.get();
$.post();
$.ajax();
let $ = {
  ajax(){},
  get(){},
  post(){}
}


let $ = {};
$.define = function (namespace, fn) {
    let namespaces = namespace.split('.');
    let fnName = namespaces.pop();
    let current = $;
    for (let i = 0; i < namespaces.length; i++) {
        let namespace = namespaces[i];//dom
        if (!current[namespace]) {
            current[namespace] = {};//{dom:{}}
        }
        current = current[namespace];
    }
    current[fnName] = fn;
}
$.define('dom.class.addClass', function () {
    console.log('dom.class.addClass');
});
$.define('dom.attr', function () {
    console.log('dom.attr');
});
$.define('string.trim', function () {
    console.log('string.trim');
});
console.log($) // define、dom、string都掛載上了了
$.dom.class.addClass('title'); // -> dom.class.addClass
$.dom.attr('src'); // -> dom.attr
$.string.trim(' abc '); // -> string.trim

複製代碼

單例模式的應用場景

jQuery

只會有一個jQuery實例redux

if(window.jQuery!=null){
  return window.jQuery;
}else{
    //init~~~~~~~
}
複製代碼

模態窗口

通常網站都會有用戶系統，例如咱們去淘寶買東西，第一時間須要你先登陸設計模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="show-btn">顯示登陸框</button>
    <button id="hide-btn">隱藏登陸框</button>
    <script>
        class Login {
            constructor() {
                this.element = document.createElement('div');
                this.element.innerHTML = (
                    `
                     用戶名 <input name="username"/>
                     密碼 <input name="password"/>
                     <input type="submit" value="登陸"/>
                    `
                );
                this.element.style.cssText = `width:100px;height:100px;position:absolute;left:50%;top:50%;margin-top:-50px;margin-left:-50px;display:none`;
                document.body.appendChild(this.element);
            }
            show() {
                this.element.style.display = 'block';
            }
            hide() {
                this.element.style.display = 'none';
            }
            static getInstance() {
                if (!this.instance) {
                    this.instance = new Login();
                }
                return this.instance;
            }
        }
        document.getElementById('show-btn').addEventListener('click', function () {
            Login.getInstance().show();
        });
        document.getElementById('hide-btn').addEventListener('click', function () {
            Login.getInstance().hide();
        });
    </script>
</body>

</html>
複製代碼

store

redux 整個應用只有一個倉庫，整個倉庫只有一個狀態statebash

//redux 整 個應用只有一個倉庫，整 個倉庫只有一個狀態state
function createStore(reducer) {
    let state;
    let listeners = [];
    function subscribe(listener) {
        listeners.push(listener);
    }
    function getState() {
        return state;
    }
    function dispatch(action) {
        state = reducer(state, action);
    }
    return {
        getState,
        dispatch,
        subscribe
    }
}

let reducer = function () {

}
let store = createStore(reducer);
複製代碼