Design Patterns in JavaScript: Module, Revealing Module 

<html>
    <head>
        
    </head>
    <body>
        <h1>Design Patterns in JavaScript: Module, Revealing Module</h1>
        <div id="root">
        </div>
        <script type="text/javascript">
        "use strick";
        /*
            Immediately Invoked functions
            (function(){
                //your code here 
                //all function and variables
                //scoped to this function
            }());
            
            var module=(function(){
                //your code here 
                //all function and variables
                //scoped to this function
            }());
        */
        var conterModule=(function(){
            var counter=0;
            return{
                getCounter:function(){
                    return counter;
                },
                incrementCounter:function(){
                    counter++;
                    console.log("Counter after increment:",counter);
                },
                decrementCounter:function(){
                    counter--;
                    console.log("Counter after decrement:",counter);
                },
                resetCounter:function(){
                    console.log("last Counter value:",counter);
                    counter=0;
                    console.log("Counter after reset:",counter);
                }
            }
        })();
        console.log("Counter module:",conterModule);
        conterModule.incrementCounter();
        conterModule.incrementCounter();
        conterModule.decrementCounter();
        conterModule.incrementCounter();
        conterModule.resetCounter();
        
        var randomCounterModule=(function(){
            var randomCounter=0;
            function getRandomNumber(){
                return Math.floor(Math.random()*10);
            }
            function logCounterValue(message){
                console.log(message,randomCounter);
            }
            return{
                getCounter:function(){
                    return randomCounter;
                },
                incrementCounter:function(){
                    randomCounter=randomCounter+getRandomNumber();
                    logCounterValue("Counter after increment:");
                },
                decrementCounter:function(){
                    randomCounter=randomCounter-getRandomNumber();
                    logCounterValue("Counter after decrement:");
                },
                randomlyIncrementCounter:function(){
                    var number=getRandomNumber();
                    if(number%2==0){
                        this.incrementCounter();
                    }else{
                        this.decrementCounter();
                    }
                },
                resetCounter:function(){
                    logCounterValue("last Counter value:");
                    randomCounter=0;
                    logCounterValue("Counter after reset:");
                }
            }
        })();
        console.log("Random counter module",randomCounterModule);
        randomCounterModule.incrementCounter();
        randomCounterModule.incrementCounter();
        randomCounterModule.decrementCounter();
        randomCounterModule.incrementCounter();
        randomCounterModule.decrementCounter();
        randomCounterModule.resetCounter();
        
        randomCounterModule.randomlyIncrementCounter();
        //Revealing Module,
        var counterModule2=(function(){
            var counter=0;
            function incrementCounter(){
                counter++;
                console.log("Counter after increment:",counter);
            }
            function decrementCounter(){
                counter--;
                console.log("Counter after decrement:",counter);
            }
            function resetCounter(){
                console.log("last Counter value:",counter);
                counter=0;
                console.log("Counter after reset:",counter);
            }
            return{
                increment:incrementCounter,
                reset:resetCounter,
                decrement:decrementCounter
            }
        })();
        console.log("counter Module2",counterModule2);
        counterModule2.increment();
        counterModule2.increment();
        counterModule2.increment();
        counterModule2.reset();
        counterModule2.decrement();
        counterModule2.increment()
        counterModule2.decrement();
        //best practies
        var randomCounterModule2 = (function () {
 
            var randomCounter = 0;
            var randomNumber = privateGetRandomNumber();

            function privateGetRandomNumber() {
                return Math.floor(Math.random() * 10);
            }

            function privatelogCounterValue(message) {
                console.log(message, randomCounter);
            }

            function publicIncrementCounter() {
                randomCounter = randomCounter + randomNumber;

                privatelogCounterValue("Counter after increment: ");
            }

            function publicDecrementCounter() {
                randomCounter = randomCounter - randomNumber;

                privatelogCounterValue("Counter after decrement: ");
            }
         
            function publicRandomlyIncrementOrDecrement() {
                var number = privateGetRandomNumber();

                if (number % 2 == 0) {
                    publicIncrementCounter();
                } else {
                    publicDecrementCounter();
                }
            }


            return {
                randomNumberProperty: randomNumber,
                increment: publicIncrementCounter,
                decrement: publicDecrementCounter,
                randomIncrementOrDecrement: publicRandomlyIncrementOrDecrement
            };
     
        })();
        
        console.log("Random counter module: ", randomCounterModule2);


        randomCounterModule2.increment();

        randomCounterModule2.increment();

        randomCounterModule2.decrement();

        randomCounterModule2.randomIncrementOrDecrement();

        console.log("Current increment/decrement value: ", 
            randomCounterModule2.randomNumberProperty);


        randomCounterModule2.randomNumberProperty = 10

        console.log("Updated increment/decrement value: ", 
            randomCounterModule2.randomNumberProperty);

        console.log("Random counter module: ", randomCounterModule2);

        randomCounterModule2.increment();

        </script>
    </body>
</html>

 

posted @ 2022-10-17 15:47  CrazyJC  阅读(21)  评论(0)    收藏  举报