Created
July 26, 2020 01:22
-
-
Save prof3ssorSt3v3/3b0a405d8e7ada2706fd7ce4b1e44adb to your computer and use it in GitHub Desktop.
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
| const PIE = 3.14; | |
| function f() { | |
| console.log('function f inside module a'); | |
| } | |
| function f123() { | |
| //not accessible | |
| } | |
| export { PIE, f }; |
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
| export const CAKE = 'a lie'; | |
| function g() { | |
| console.log('function g in module b'); | |
| } | |
| export default g; |
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> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Beyond Beginner</title> | |
| <style> | |
| html { | |
| font-size: 20px; | |
| line-height: 1.7; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | |
| Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-weight: 300; | |
| color: cornflowerblue; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Going Beyond the Basics of JavaScript</h1> | |
| <h2>How to Structure your Scripts</h2> | |
| </header> | |
| <script src="./js/main-3.js" type="module"></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
| //start using namespaces so your code does not conflict | |
| //with other libraries | |
| const APP = { | |
| today: new Date(), | |
| KEY: 'jhj3245gj23h42j34', | |
| init: function () { | |
| //function to start things off | |
| console.log(APP.today.toLocaleDateString()); | |
| //add some event listeners | |
| APP.addListeners(); | |
| //make a call to an API with a callback | |
| let url = `https://jsonplaceholder.typicode.com/posts?key=${APP.KEY}`; | |
| APP.getData(url, APP.afterFetch); | |
| }, | |
| addListeners: function () { | |
| console.log('adding listeners to the page'); | |
| }, | |
| abc: () => { | |
| console.log('abc'); | |
| }, | |
| getData() { | |
| //do fetch call | |
| fetch(url) | |
| .then((res) => res.json()) | |
| .then((content) => { | |
| //call function to add content | |
| //call the callback | |
| if (cb) { | |
| cb(); | |
| } | |
| }) | |
| .catch((err) => console.error); | |
| }, | |
| afterFetch() { | |
| console.log('data fetch completed'); | |
| }, | |
| }; | |
| document.addEventListener('DOMContentLoaded', APP.init); | |
| const CONTACT = {}; | |
| const CART = {}; | |
| const MAPPING = {}; |
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
| // IIFE - Immediately Invoked Function Expressions | |
| // Uses namespaces but also lets you control access | |
| const APP = (function () { | |
| document.addEventListener('DOMContentLoaded', init); | |
| let today = new Date(); | |
| const KEY = 'jhj3245gj23h42j34'; | |
| function init() { | |
| console.log('loaded'); | |
| //function to start things off | |
| console.log(today.toLocaleDateString()); | |
| //add some event listeners | |
| addListeners(); | |
| //make a call to an API with a callback | |
| let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`; | |
| getData(url, afterFetch); | |
| } | |
| function addListeners() { | |
| console.log('adding listeners to the page'); | |
| } | |
| function getData(url, cb) { | |
| //do fetch call | |
| fetch(url) | |
| .then((res) => res.json()) | |
| .then((content) => { | |
| //call function to add content | |
| //call the callback | |
| if (cb) { | |
| cb(); | |
| } | |
| }) | |
| .catch((err) => console.error); | |
| } | |
| function afterFetch() { | |
| console.log('data fetch completed'); | |
| } | |
| return { | |
| getData, | |
| today, | |
| KEY, | |
| }; | |
| })(); | |
| // APP.getData() | |
| // APP.KEY | |
| //APP.afterFetch(); - ERROR. Private |
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
| import { PIE, f } from './modules/a.mjs'; | |
| import someFunc, { CAKE } from './modules/b.js'; | |
| //g will be someFunc | |
| const APP = (function () { | |
| document.addEventListener('DOMContentLoaded', () => { | |
| console.log(PIE); | |
| f(); | |
| someFunc(); | |
| console.log(CAKE); | |
| }); | |
| //rest of code just like in main-2 | |
| })(); |
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
| // Moving beyond beginner with scripts | |
| //1. Basic code structure | |
| let today = new Date(); | |
| const KEY = 'jhj3245gj23h42j34'; | |
| function init() { | |
| //function to start things off | |
| console.log(today.toLocaleDateString()); | |
| //add some event listeners | |
| addListeners(); | |
| //make a call to an API with a callback | |
| let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`; | |
| getData(url, afterFetch); | |
| } | |
| // let init = function(){} | |
| function addListeners() { | |
| console.log('adding listeners to the page'); | |
| } | |
| function getData(url, cb) { | |
| //do fetch call | |
| fetch(url) | |
| .then((res) => res.json()) | |
| .then((content) => { | |
| //call function to add content | |
| //call the callback | |
| if (cb) { | |
| cb(); | |
| } | |
| }) | |
| .catch((err) => console.error); | |
| } | |
| function afterFetch() { | |
| console.log('data fetch completed'); | |
| } | |
| document.addEventListener('DOMContentLoaded', init); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment