Javascript設計模式

時間 2019-11-19

原文原文鏈接

面向對象

動態語言： Javascript 是動態語言，即編譯時不會對變量類型進行檢查只有到了運行時才動態生成變量。
接口：實例 - 鴨子類型。兩個類型之間有相同的接口即認爲是相同的
多態：

原則「不變的隔離，變化的封裝」鴨子實例中 sound()接口是相同的，可是不一樣的動物有不一樣的sound實現，所以發聲是變化的需隔離、不一樣動物的實現是變化的需封裝在不一樣的對象中。不一樣的對象就是多態。多態對外的表現就是把不變的暴露給其它對象。
Javascript類型檢查：
1. 靜態語言嚴格的類型檢查，所以只能經過對象之間的繼承來實現類型的一致性。實例 - 鴨子、雞都能發生它們共同繼承動物類。調用發聲時傳遞的是動物這個超類所以保證了類型的一致。　　
2. 動態語言自然多態，不對類型進行檢查，因此只要類型之間有相同的接口就可

封裝。靜態語言依靠private, protected等方式實現封裝；javascript沒有這些機制。靠變量做用域來實現封裝。實例: 使用閉包實現變量的私有化、訪問的公有化javascript

define(function (require, exports, module) {
    var classObj = (
        function () {
            var _env;
            var setEnv = function (name) {
                _env = name;
            };
            var getEnv = function () {
                return _env;
            };

            return {
                setEnv: setEnv,
                getEnv: getEnv
            }
        }
    )();

    module.exports = classObj;
});

單例模式:

簡單單例 - html

   var div = function (name) {
        this.instance =null;
        this.name = name;
    };

    div.prototype.getName= function () {
        alert(this.name);
    }

    div.getSingle = function () {
        if(!this.instance) {
            this.instance = new div();
        }
        return this.instance;
    };
　　　// Main方法
    $scope.testMethod = function () {
        var c = div.getSingle();
        var d = div.getSingle();
        alert(c==d);
    };

以上單例用戶使用時須要知道getSingle方法是爲了單例而設計的方法。如今實現一種透明單例java

透明代理算法

var div = (function () {
        var instance = null;
        var createDiv = function (html) {
            if(instance) return instance;
            this.html = html;
            this.init();
            instance = this;
            return instance;
        };

        createDiv.prototype.init = function () {
            var div = document.createElement('div');
            div.innerHTML=this.html;
            document.body.appendChild(div);
        };
        return createDiv;
    })();
    $scope.testMethod = function () {
　　　　　// 使用 New的方式 使用 單例 
        var c = new div('ab c');

        var d = new div('12 3');
        alert(c == d);
    };

改進版的透明代理，構造函數即負責init有負責實例。職責非單一並且複用性差，使用代理的方式改進閉包

var div = (function () {
        var createDiv = function (html) {
            this.html = html;
            this.init();
        };

        createDiv.prototype.init = function () {
            var div = document.createElement('div');
            div.innerHTML = this.html;
            document.body.appendChild(div);
        };
        return createDiv;
    })();

    var divProxy = (function () {
        var instance=null;
        return function (html) {
            if(instance) return instance;
            instance = new div(html);
            return instance;
        }
    })();
    $scope.testMethod = function () {
        var c = new divProxy('ab c');

        var d = new divProxy('12 3');
        alert(c == d);
    };

策略模式

策略模式指的是定義一系列的算法，把他們封裝起來。算法使用是在一個統一的Context中。app

 var stratogyA= function () {
    };
    stratogyA.prototype.getSalary = function (salary) {
        return salary*2;
    };

    var stratogyB= function () {
    };
    stratogyA.prototype.getSalary = function (salary) {
        return salary*3;
    };


    var context = function (stratogy) {

        this.strategy=stratogy;
    };
    context.prototype.calculateSalary= function (orgin) {
        return this.strategy.getSalary(orgin);
    };

    $scope.testMethod = function () {
        var str = new stratogyA();

        var c = new context(str);
        var l = c.calculateSalary(1000);
        alert(l);

    };