Last active
December 1, 2016 15:27
-
-
Save rowlandekemezie/93a9c9203e4b2966f571ff0f22d3caf0 to your computer and use it in GitHub Desktop.
Discussion on Revealing module pattern in JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Note: Totally optional. | |
| Let's do this guys! | |
| Write a calculator program that performs basic arithmetic operations. | |
| Demonstrate how you can make private functions and public functions using revealing module pattern. | |
| Use a markup page to get user input and render value accordingly. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script | |
| src="https://code.jquery.com/jquery-3.1.1.js" | |
| integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| This is a class on design patterns | |
| <div class="test">This is test</div> | |
| <script src="moduleOne.js"> </script> | |
| <script src="moduleTwo.js"> | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Revealing module pattern | |
| // Building Apis that requires exposing some functions and making some private | |
| // Technically, nothing is strictly private in JS but you can leverage module pattern using | |
| // IIFE and namespacing them to achieve it. Remember that the return block is an object literal that exposes | |
| // the functions you want public. | |
| var module = (function () { | |
| var test = { | |
| name: "Ngozi", | |
| level: 'D5' | |
| }; | |
| // Private one | |
| function _canCode(){ | |
| console.log("Can code") | |
| } | |
| // Public One | |
| function canSing(){ | |
| console.log('Can Sign sign', test.name); | |
| _canCode(); | |
| } | |
| // Public Two | |
| function canDance() { | |
| console.log("Can dance and likes food") | |
| } | |
| return { | |
| canSing: canSing, | |
| canDance: canDance | |
| } | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var module1 = (function(q) { | |
| function changeTest() { | |
| return q('.test').text('Another test changed!') | |
| } | |
| return { | |
| changeTest: changeTest | |
| } | |
| })(jQuery) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment