Javascript設計模式（摘譯）

說明： 未完成。。。更新中。。。。

1、javascipt設計模式分類

設計模式分類有不少標準，最流行的三種以下

1）  creational  --  主要關注對象建立

Creational design patterns deal directly with object initialization procedures focusing on the creation of situation-specific objects. Without thinking about how objects are created, a level of complexity can be added to the design of an application. Creational design patterns work to solve this problem by adding a layer to the object creation process.

建立型設計模式直接處理對象的初始化程序，重點關注建立基於特定場景的對象。它不關注如何建立對象，其複雜性的層次直接加入到應用程序的設計中。建立型設計模式經過在對象建立過程上加上一層來解決問題。

2)   structural  --  主要關注對象的組合方法

Structural design patterns are ones that focus on easing the relationship between different components of an application. They help to provide stability by ensuring that if one part of the app changes, the entire thing doesn't need to as well.

3)   behavioral --   主要關注對象間的通訊方式

Behavioral design patterns emphasize flexibility through the identification of common communication patterns between various objects.

2、平常使用的javascript設計模式

1）The Module Pattern 

2）The Revealing Module Pattern 

 

    var account = function(){
        var balance = 0;

        var deposit = function(money){
            balance + = money;
            console.log("balance after deposti: ",balance);
            sendMsg();
        };

        var withdraw = function(money){
            balance -= money;
            console.log("balance after withdraw",balance);
            sendMsg();
        };

        //私有方法
        var sendMsg = function(){
            console.log("sending message!")
        };

        //公共方法 -- send outside module
        return {
            deposit:deposit,
            withdraw: withdraw
        }
    };

    var a1 = account();
    a1.deposit(100);
    a1.withdraw(20);
    a1.sendMsg();  //could have a alert

 

3）The Singleton Pattern 

            var PersonSingleton =(function(){
                var instantiated;
                function init(){
                    function myOtherMethod() {
                        alert( 'my other method' );
                    }
                    return{
                        name: 'Anonymous',
                        work: function(){
                            console.log(this.name + "is working");
                        },
                        someOtherMethod: myOtherMethod
                    }
                }
                return{
                    //handles the prevention of additional instantiations
                    getInstance: function(){
                        if(!instantiated){
                            instantiated = init();
                        }
                        return instantiated;
                    }
                }
            })();

            var p1 = PersonSingleton.getInstance(); 
            p1.work();  //return Anonymouse
            var p2 = PersonSingleton.getInstance();
            p2.work();  //return Anonymouse

4）The Observer Pattern 

5）The Mediator Pattern 

6）The Prototype Pattern 

7）The Facade Pattern 

8）The Factory Pattern

 

參看：

• https://carldanley.com/javascript-design-patterns/#creational-design-patterns