JS_modulePattern_ClassExample_private_public/JS_modulePattern_ClassExample_private_public.html at main · Reinerth/JS_modulePattern_ClassExample_private_public · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>

    <head>
        <title>Class Example | Module Pattern </title>
        <meta name="title" content="JS Class-Example and Module-Pattern with private and public functions">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="pragma" content="no-cache" />
    </head>

    It might be easier to take a look in the console of the Developer Tools (F12)<br>
    than try to explain the lemmings, they cant stop the flood with love ♥.

    <body>


        <script>

            /**
            * Class Example | Module Pattern |
            *
            * Definition of a Class: Group of objects, functions and variables, commonly used (intersection).
            * Definition of an Object: Group of properties and their values (like JSON).
            *
            * Thus, a "CSS-class" is usually an object, because it is a group of properties.
            * (CSS-functions are only the values of their properties.)
            */


            /**
             * Author: Arthur Reinerth, 20250306, Duesseldorf
             *
             * For bigger applications, the Module-Pattern should be integrated in the MVC-Pattern.
             * You can find here a template:
             * https://github.com/Reinerth/Application-Template-MVC-best-Practice
             */


            "use strict"; /* Used traditional syntax and ES5, except "let". */


            // Reserve a single namespace "mainC" for the app,
            // acts like a container, wherein we add our classes.
            window.mainC = {};


            // We add some content (values) to the main-container
            // maybe retrieved from database, to be used from here from all classes.
            window.mainC.wegetable = [
                {"name":"Aubergine",    "color":"violet"},
                {"name":"Beans",        "color":"green"},
                {"name":"Broccoli",     "color":"green"},
                {"name":"Champignons",  "color":"white"},
                {"name":"Cucumber",     "color":"green"},
                {"name":"Onion",        "color":"white"},
                {"name":"Potatoes",     "color":"beige"},
                {"name":"Pepper",       "color":"red"},
                {"name":"Peas",         "color":"green"},
                {"name":"Tomato",       "color":"red"}
            ];


            /** mySecondClass ********************************************************
             * Constructing a class "mySecondClass" with private and public functions
             * wherein we could use (call) the public functions
             * from other classes like "myFirstClass",
             * even if they are not instantiated at that time,
             * because our container "mainC" (applications name) is global.
             * Means, we hoisted our container to window,
             * so the functions are going to be executed
             * only after the window is loaded with the complete scripts.
             * Works similar like the compiled files e.g. in C or JAVA.
             * In this way JavaScript is kind of precompiled for the browser.
             * Note: Every class is a module.
            */
            window.mainC.mySecondClass= function (){

                // Only for better readability (in bigger classes),
                // we initialize the scope ("this") of the class to a variable.
                // In case that inside the functions of this class, we also want to use
                // the scope of those functions with "this",
                // it can easier differentiated from the "this"-scope from the class.
                let mainScope = this;


                let randomVeggy = parseInt(Math.random()*10); // random number 0-9


                // Private (can only be accessed from this class)
                let getVeggyName = function(){
                    return window.mainC.wegetable[randomVeggy].name;
                };


                // Private (can only be accessed from this class)
                let getVeggyColor = function(){
                    return window.mainC.wegetable[randomVeggy].color;
                };


                // Public (can be accessed from other classes)
                mainScope.getVeggy = function(){

                    let myVeggy = getVeggyName() + " ["+ getVeggyColor() +"]";

                    return myVeggy;
                };
            };

            // Variable "second", is initialized with an instantiation (new) of the class "mySecondClass"
            let second = new window.mainC.mySecondClass();


            /** myFirstClass ********************************************************
             * Constructing a class "myFirstClass" with private and public functions
             * wherein we could use (call) the public functions
             * from other classes like "mySecondClass",
             * even if they are not instantiated at that time,
             * because our container "mainC" (applications name) is global.
             * Means, we hoisted our container to window,
             * so the functions are going to be executed
             * only after the window is loaded with the complete scripts.
             * Works similar like the compiled files e.g. in C or JAVA.
             * In this way JavaScript is kind of precompiled for the browser.
             * Note: Every class is a module.
            */
            window.mainC.myFirstClass= function (){

                let mainScope = this;

                // Private (can only be accessed from this class)
                let myFirstClassPrivateFunction = function(){

                    let meGetMyValues = second.getVeggy(); // invoke function from other class

                    console.log(meGetMyValues); // output
                };


                // Public (can be accessed from other classes)
                mainScope.init = function(){
                    myFirstClassPrivateFunction();
                };
            };

            // Variable "first", is initialized with an instantiation (new) of the class "myFirstClass"
            let first = new window.mainC.myFirstClass();


            // Have a look at the app inside the window-object
            console.log(mainC);


            // Starting the application
            first.init();


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