diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-09 23:11:58 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-09 23:11:58 -0700 |
| commit | 13f4d9e862ce7822211c9295281f0ccd832c3646 (patch) | |
| tree | b15fbcbcf46bd7e4d65887f8e68f024ffde7ff5b | |
| parent | 6135716545667d09ceca8bebf0e8cdff129f3acc (diff) | |
Add code splitting examples
| -rw-r--r-- | demos/12-manual-code-splitting-a.example.js | 31 | ||||
| -rw-r--r-- | demos/12-manual-code-splitting-b.example.js | 14 | ||||
| -rw-r--r-- | demos/12-manual-code-splitting.example.html | 17 | ||||
| -rw-r--r-- | demos/13-es-modules-a.example.js | 21 | ||||
| -rw-r--r-- | demos/13-es-modules-b.example.js | 12 | ||||
| -rw-r--r-- | demos/13-es-modules.example.js | 9 |
6 files changed, 104 insertions, 0 deletions
diff --git a/demos/12-manual-code-splitting-a.example.js b/demos/12-manual-code-splitting-a.example.js new file mode 100644 index 0000000..8bb040a --- /dev/null +++ b/demos/12-manual-code-splitting-a.example.js @@ -0,0 +1,31 @@ +const COST_OF_ITEM = 15 +// We use this immediately invoked anonymous function +// to create a private, non global scope (usually called a module). +// Anything that we want exposed publicly must be included in the +// returned object. This pattern is sometimes called +// "revealing modules" +let CartModule = (function() { + let moduleScopeVariable = 'super secret' + + // Globally private function, never returned from module + function sideEffects() { + console.log('doing side effects') + } + + // we make this public by adding it to + // the return object below + function removeFromCart(item) { + sideEffects() + console.log(`${item} removed from cart`) + return -COST_OF_ITEM + } + return { + // we define this function in the public return object, + // so it's public by definition + addToCart: function(item) { + console.log(`${item} added to cart`) + return COST_OF_ITEM + }, + removeFromCart + } +})() diff --git a/demos/12-manual-code-splitting-b.example.js b/demos/12-manual-code-splitting-b.example.js new file mode 100644 index 0000000..c5a08ca --- /dev/null +++ b/demos/12-manual-code-splitting-b.example.js @@ -0,0 +1,14 @@ +let AccountModule = (function() { + let customerBalance = {} + return { + adjustCustomerBalance: function(customerId, delta) { + let customer = customerBalance[customerId] + if (customer) { + customerBalance[customerId] += delta + } else customerBalance[customerId] = delta + }, + getCustomerBalance: function(customerId) { + return customerBalance[customerId] + } + } +})() diff --git a/demos/12-manual-code-splitting.example.html b/demos/12-manual-code-splitting.example.html new file mode 100644 index 0000000..e97f34f --- /dev/null +++ b/demos/12-manual-code-splitting.example.html @@ -0,0 +1,17 @@ +<html> + <head> + <style> + </style> + <!-- It's important that these get imported in the order they are required --> + <script type="text/javascript" src="12-manual-code-splitting-a.example.js"></script> + <script type="text/javascript" src="12-manual-code-splitting-b.example.js"></script> + <script> + let delta = CartModule.addToCart('Juuuul') + let customerId = 'juuuul-02' + AccountModule.adjustCustomerBalance(customerId, delta) + console.log(`Customer has a balance of ${AccountModule.getCustomerBalance(customerId)}`) + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/demos/13-es-modules-a.example.js b/demos/13-es-modules-a.example.js new file mode 100644 index 0000000..7be08e7 --- /dev/null +++ b/demos/13-es-modules-a.example.js @@ -0,0 +1,21 @@ +// Only things with "export" in front of them +// are available outside this module + +const COST_OF_ITEM = 15 + +let moduleScopeVariable = 'super secret' + +export function sideEffects() { + console.log('doing side effects') +} + +export function removeFromCart(item) { + sideEffects() + console.log(`${item} removed from cart`) + return -COST_OF_ITEM +} + +export function addToCart(item) { + console.log(`${item} added to cart`) + return COST_OF_ITEM +} diff --git a/demos/13-es-modules-b.example.js b/demos/13-es-modules-b.example.js new file mode 100644 index 0000000..e2c66fd --- /dev/null +++ b/demos/13-es-modules-b.example.js @@ -0,0 +1,12 @@ +let customerBalance = {} + +export function adjustCustomerBalance(customerId, delta) { + let customer = customerBalance[customerId] + if (customer) { + customerBalance[customerId] += delta + } else customerBalance[customerId] = delta +} + +export function getCustomerBalance(customerId) { + return customerBalance[customerId] +} diff --git a/demos/13-es-modules.example.js b/demos/13-es-modules.example.js new file mode 100644 index 0000000..5efbc6f --- /dev/null +++ b/demos/13-es-modules.example.js @@ -0,0 +1,9 @@ +import * as CartModule from './13-es-modules-a.example' +import * as AccountModule from './13-es-modules-b.example' + +let delta = CartModule.addToCart('Juuuul') +let customerId = 'juuuul-02' +AccountModule.adjustCustomerBalance(customerId, delta) +console.log( + `Customer has a balance of ${AccountModule.getCustomerBalance(customerId)}` +) |