add ch10 requirejs + umd + cjs

addyosmani · Apr 28, 2023 · 2d5e742 · 2d5e742
1 parent 3d17925
commit 2d5e742
Show file tree

Hide file tree

Showing 15 changed files with 198 additions and 0 deletions.
diff --git a/ch10/app.js b/ch10/app.js
@@ -0,0 +1,21 @@
+// Code in app.js. baseURL set to the lib folder
+// containing jquery.color.
+define(["https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"],
+  function(colorPlugin, _) {
+    // Here we've loaded the jQuery color plugin and Lodash from a CDN
+    // None of these will be accessible in the global scope, but we
+    // can easily reference them below.
+
+    // Pseudorandomize an array of colors, selecting the first
+    // item in the shuffled array
+    var shuffleColor = _.first(_.shuffle(["#AAA", "#FFF", "#111", "#F16"]));
+    console.log(shuffleColor);
+
+    // Animate the background color of any elements with the class
+    // "item" on the page using the shuffled color
+    $(".item").animate({ "backgroundColor": shuffleColor });
+
+    // What we return can be used by other modules
+    return function() {};
+});
diff --git a/ch10/bar.js b/ch10/bar.js
@@ -0,0 +1,7 @@
+define(function () {
+  return {
+    doSomething: function () {
+      console.log('Bar: Doing something else...');
+    }
+  };
+});
diff --git a/ch10/foo.js b/ch10/foo.js
@@ -0,0 +1,7 @@
+define(function () {
+  return {
+    doSomething: function () {
+      console.log('Foo: Doing something...');
+    }
+  };
+});
diff --git a/ch10/main.js b/ch10/main.js
@@ -0,0 +1,7 @@
+define(["./templates", "text!./template.md", "css!./template.css"],
+  function (templates, template) {
+    console.log(templates);
+    console.log(template);
+    // Use the templates and template content here
+  }
+);
diff --git a/ch10/node/main.js b/ch10/node/main.js
@@ -0,0 +1,13 @@
+const mathUtils = require('./math');
+
+const result1 = mathUtils.add(5, 3);
+console.log('Addition:', result1);
+
+const result2 = mathUtils.subtract(10, 7);
+console.log('Subtraction:', result2);
+
+/*
+››› node main.js
+Addition: 8
+Subtraction: 3
+*/
diff --git a/ch10/node/math.js b/ch10/node/math.js
@@ -0,0 +1,12 @@
+function add(a, b) {
+  return a + b;
+}
+
+function subtract(a, b) {
+  return a - b;
+}
+
+module.exports = {
+  add,
+  subtract
+};
diff --git a/ch10/node/umd_main.js b/ch10/node/umd_main.js
@@ -0,0 +1,10 @@
+define(["node/umd_math"], function (mathUtils) {
+    const outputElement = document.getElementById('output');
+
+    const result1 = mathUtils.add(5, 3);
+    outputElement.innerHTML += 'Addition: ' + result1 + '<br>';
+
+    const result2 = mathUtils.subtract(10, 7);
+    outputElement.innerHTML += 'Subtraction: ' + result2 + '<br>';
+  });
+
diff --git a/ch10/node/umd_math.js b/ch10/node/umd_math.js
@@ -0,0 +1,25 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+      // AMD module
+      define([], factory);
+    } else if (typeof module === 'object' && module.exports) {
+      // Node.js/CommonJS module
+      module.exports = factory();
+    } else {
+      // Global variable (browser)
+      root.mathUtils = factory();
+    }
+  }(typeof self !== 'undefined' ? self : this, function () {
+    var mathUtils = {};
+
+    mathUtils.add = function (a, b) {
+      return a + b;
+    };
+
+    mathUtils.subtract = function (a, b) {
+      return a - b;
+    };
+
+    return mathUtils;
+  }));
+
diff --git a/ch10/requirejs.html b/ch10/requirejs.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AMD/RequireJS Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+</head>
+<body>
+  <h1>AMD/RequireJS Example</h1>
+  <button id="button">Do Stuff</button>
+
+  <script>
+    require.config({
+      paths: {
+        foo: './foo',
+        bar: './bar'
+      }
+    });
+
+    require(['foo', 'bar'], function (foo, bar) {
+      document.getElementById('button').addEventListener('click', function () {
+        foo.doSomething();
+        bar.doSomething();
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/ch10/requirejs_jquery.html b/ch10/requirejs_jquery.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>RequireJS and jQuery Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+  <script>
+    // Configure RequireJS to load the main module
+    require(["app"], function(app) {
+      // The main module will be executed here
+    });
+  </script>
+</head>
+<body>
+  <div class="item">Animated Item</div>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</body>
+</html>
diff --git a/ch10/requirejs_plugins.html b/ch10/requirejs_plugins.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AMD/RequireJS Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+</head>
+<body>
+  <script>
+    require.config({
+      paths: {
+        text: "https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
+        css: "https://cdnjs.cloudflare.com/ajax/libs/require-css/0.1.10/css.min",
+        main: "./main"
+      }
+    });
+
+    require(["main"]);
+  </script>
+</body>
+</html>
diff --git a/ch10/template.css b/ch10/template.css
@@ -0,0 +1,3 @@
+body {
+    background: yellow;
+}
diff --git a/ch10/template.md b/ch10/template.md
@@ -0,0 +1 @@
+This is a template
diff --git a/ch10/templates.js b/ch10/templates.js
@@ -0,0 +1,7 @@
+define(function () {
+  return {
+    template1: "<div>Template 1</div>",
+    template2: "<div>Template 2</div>",
+    template3: "<div>Template 3</div>"
+  };
+});
diff --git a/ch10/umd.html b/ch10/umd.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>UMD Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+  <script>
+    // Configure RequireJS to load the main module
+    require(["node/umd_main"], function () {
+      // The main module will be executed here
+    });
+  </script>
+</head>
+<body>
+  <div id="output"></div>
+</body>
+</html>