New examples for modularisation (based on Grunt)

jbandi · Jul 6, 2014 · bc37fb6 · bc37fb6
1 parent c12b43e
commit bc37fb6
Show file tree

Hide file tree

Showing 76 changed files with 40,083 additions and 200 deletions.
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/index.html b/04-Toolchain/03-Modularization/00-ManualLoading/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!--Stuff-->
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
+</head>
+<body>
+
+    <!--Stuff-->
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+    <script src="js/myapp.js"></script>
+    <script src="js/module1.js"></script>
+    <script src="js/module2.js"></script>
+    <script src="js/module3.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/js/main.js b/04-Toolchain/03-Modularization/00-ManualLoading/js/main.js
@@ -0,0 +1,4 @@
+var Module1 = MYAPP.subnamespace.Module1;
+var module1 = new Module1();
+
+module1.doSomething();
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/js/module1.js b/04-Toolchain/03-Modularization/00-ManualLoading/js/module1.js
@@ -0,0 +1,22 @@
+(function(global) {
+
+//    var subnamespace = MYAPP.namespace('subnamespace');
+    global.MYAPP = global.MYAPP || {};
+    MYAPP.subnamespace = MYAPP.subnamespace || {};
+    var subnamespace = MYAPP.subnamespace;
+
+    var Module1 = function(){
+    }
+
+    Module1.prototype.doSomething = function(){
+        var module2 = new subnamespace.Module2();
+        var module3 = new subnamespace.subsubnamespace.Module3();
+        module2.doSomething();
+        module3.doSomething();
+        console.log("Module 1 did something.")
+    }
+
+    // Export the module
+    subnamespace.Module1 = Module1;
+
+})(window)
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/js/module2.js b/04-Toolchain/03-Modularization/00-ManualLoading/js/module2.js
@@ -0,0 +1,21 @@
+(function(global) {
+
+//    var subnamespace = MYAPP.namespace('subnamespace');
+    global.MYAPP = global.MYAPP || {};
+    MYAPP.subnamespace = MYAPP.subnamespace || {};
+    var subnamespace = MYAPP.subnamespace;
+
+//    var module3 = new subnamespace.subsubnamespace.Module3();
+//    var myInt = module3.getValue();
+
+    var Module2 = function(){
+    }
+
+    Module2.prototype.doSomething = function(){
+        console.log("Module 2 did something.")
+    }
+
+    // Export the module
+    subnamespace.Module2 = Module2;
+
+})(window)
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/js/module3.js b/04-Toolchain/03-Modularization/00-ManualLoading/js/module3.js
@@ -0,0 +1,19 @@
+(function() {
+    var subsubnamespace = MYAPP.namespace('subnamespace.subsubnamespace');
+
+    var Module3 = function(){
+    }
+
+    Module3.prototype = {
+        doSomething: function(){
+            console.log("Module 3 did something.")
+        },
+        getValue: function(){
+            return 42;
+        }
+    };
+
+    // Export the module
+    subsubnamespace.Module3 = Module3;
+
+})()
diff --git a/04-Toolchain/03-Modularization/00-ManualLoading/js/myapp.js b/04-Toolchain/03-Modularization/00-ManualLoading/js/myapp.js
@@ -0,0 +1,18 @@
+var MYAPP = MYAPP || {};
+MYAPP.namespace = function (ns_string) {
+    var parts = ns_string.split('.'),
+        parent = MYAPP,
+        i;
+    // strip redundant leading global
+    if (parts[0] === "MYAPP") {
+        parts = parts.slice(1);
+    }
+    for (i = 0; i < parts.length; i += 1) {
+        // create a property if it doesn't exist
+        if (typeof parent[parts[i]] === "undefined") {
+            parent[parts[i]] = {};
+        }
+        parent = parent[parts[i]];
+    }
+    return parent;
+};
diff --git a/...rization/src/css/bootstrap-responsive.css → ...adingExample/css/bootstrap-responsive.css b/...rization/src/css/bootstrap-responsive.css → ...adingExample/css/bootstrap-responsive.css
diff --git a/...tion/src/css/bootstrap-responsive.min.css → ...gExample/css/bootstrap-responsive.min.css b/...tion/src/css/bootstrap-responsive.min.css → ...gExample/css/bootstrap-responsive.min.css
diff --git a/...n/03-Modularization/src/css/bootstrap.css → ...01-ManualLoadingExample/css/bootstrap.css b/...n/03-Modularization/src/css/bootstrap.css → ...01-ManualLoadingExample/css/bootstrap.css
diff --git a/...-Modularization/src/css/bootstrap.min.css → ...anualLoadingExample/css/bootstrap.min.css b/...-Modularization/src/css/bootstrap.min.css → ...anualLoadingExample/css/bootstrap.min.css
diff --git a/...zation/src/js-namespace/drawing_module.js → ...01-ManualLoadingExample/drawing_module.js b/...zation/src/js-namespace/drawing_module.js → ...01-ManualLoadingExample/drawing_module.js
diff --git a/...odularization/src/js-namespace/index.html → ...zation/01-ManualLoadingExample/index.html b/...odularization/src/js-namespace/index.html → ...zation/01-ManualLoadingExample/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <head>
 
-    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css">
     <style>
         body {
             padding-top: 10px;
             padding-bottom: 40px;
         }
         .hero-unit {padding: 20px; }
     </style>
-    <link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
+    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
 </head>
 <body>
 
@@ -38,8 +38,8 @@ <h1>Course Rater</h1>
     </footer>
 </div> <!-- /container -->
 
-<script type="text/javascript" src="../vendor/jquery-1.10.1.min.js"></script>
-<script type="text/javascript" src="../vendor/raphael-2.1.2.min.js"></script>
+<script type="text/javascript" src="vendor/jquery-1.10.1.min.js"></script>
+<script type="text/javascript" src="vendor/raphael-2.1.2.min.js"></script>
 <script type="text/javascript" src="drawing_module.js"></script>
 <script type="text/javascript" src="rating_widget.js"></script>
 <script type="text/javascript" src="main.js"></script>

diff --git a/...3-Modularization/src/js-namespace/main.js → ...arization/01-ManualLoadingExample/main.js b/...3-Modularization/src/js-namespace/main.js → ...arization/01-ManualLoadingExample/main.js
diff --git a/...ization/src/js-namespace/rating_widget.js → .../01-ManualLoadingExample/rating_widget.js b/...ization/src/js-namespace/rating_widget.js → .../01-ManualLoadingExample/rating_widget.js
diff --git a/...03-Modularization/src/vendor/bootstrap.js → ...-ManualLoadingExample/vendor/bootstrap.js b/...03-Modularization/src/vendor/bootstrap.js → ...-ManualLoadingExample/vendor/bootstrap.js
diff --git a/...odularization/src/vendor/bootstrap.min.js → ...ualLoadingExample/vendor/bootstrap.min.js b/...odularization/src/vendor/bootstrap.min.js → ...ualLoadingExample/vendor/bootstrap.min.js
diff --git a/...arization/src/vendor/jquery-1.10.1.min.js → ...oadingExample/vendor/jquery-1.10.1.min.js b/...arization/src/vendor/jquery-1.10.1.min.js → ...oadingExample/vendor/jquery-1.10.1.min.js
diff --git a/...ndor/modernizr-2.6.2-respond-1.1.0.min.js → ...ndor/modernizr-2.6.2-respond-1.1.0.min.js b/...ndor/modernizr-2.6.2-respond-1.1.0.min.js → ...ndor/modernizr-2.6.2-respond-1.1.0.min.js
diff --git a/...arization/src/vendor/raphael-2.1.2.min.js → ...oadingExample/vendor/raphael-2.1.2.min.js b/...arization/src/vendor/raphael-2.1.2.min.js → ...oadingExample/vendor/raphael-2.1.2.min.js
diff --git a/...arization/src/vendor/require-2.1.8.min.js → ...oadingExample/vendor/require-2.1.8.min.js b/...arization/src/vendor/require-2.1.8.min.js → ...oadingExample/vendor/require-2.1.8.min.js
diff --git a/04-Toolchain/03-Modularization/02-RequireJS/index.html b/04-Toolchain/03-Modularization/02-RequireJS/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+
+<button id="btnGreet">Click me for greeting!</button>
+
+<script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
+</body>
+</html>
diff --git a/04-Toolchain/03-Modularization/02-RequireJS/js/app.js b/04-Toolchain/03-Modularization/02-RequireJS/js/app.js
@@ -0,0 +1,8 @@
+define(function(require){
+    var button = document.getElementById("btnGreet");
+    button.addEventListener("click", function(){
+        var greeter = require(["greeter"], function(greeter){
+            greeter.greet("World!");
+        });
+    })
+})
diff --git a/04-Toolchain/03-Modularization/02-RequireJS/js/greeter.js b/04-Toolchain/03-Modularization/02-RequireJS/js/greeter.js
@@ -0,0 +1,7 @@
+define(function(){
+    return {
+        greet: function (message) {
+            console.log("Hello: " + message);
+        }
+    }
+})
diff --git a/04-Toolchain/03-Modularization/02-RequireJS/js/main.js b/04-Toolchain/03-Modularization/02-RequireJS/js/main.js
@@ -0,0 +1,3 @@
+require(["app"], function(app){
+    console.log("Loading app...")
+})
diff --git a/04-Toolchain/03-Modularization/03-RequireJS-jQuery/index.html b/04-Toolchain/03-Modularization/03-RequireJS-jQuery/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+
+<button id="btnGreet">Click me for greeting!</button>
+
+<script data-main="js/main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
+</body>
+</html>
diff --git a/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/app.js b/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/app.js
@@ -0,0 +1,10 @@
+define(function(require){
+
+    require(['jquery'], function($){
+        $("#btnGreet").on("click", function(){
+            var greeter = require(["greeter"], function(greeter){
+                greeter.greet("World!");
+            });
+        });
+    })
+})
diff --git a/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/greeter.js b/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/greeter.js
@@ -0,0 +1,7 @@
+define(function(){
+    return {
+        greet: function (message) {
+            console.log("Hello: " + message);
+        }
+    }
+})
diff --git a/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/main.js b/04-Toolchain/03-Modularization/03-RequireJS-jQuery/js/main.js
@@ -0,0 +1,27 @@
+
+// Configuration for requirejs
+require.config({
+//    "baseUrl": "js/lib",
+    "paths": {
+//        "app": "../app",
+        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
+    },
+    map: {
+        // '*' means all modules will get 'jquery-private'
+        // for their 'jquery' dependency.
+        '*': { 'jquery': 'jquery-private' },
+
+        // 'jquery-private' wants the real jQuery module
+        // though. If this line was not here, there would
+        // be an unresolvable cyclic dependency.
+        'jquery-private': { 'jquery': 'jquery' }
+    }
+});
+
+// Define the module jquery-private as a jQuery with no-conflict
+define('jquery-private',['jquery'], function (jq) {
+    return jq.noConflict( true );
+});
+
+// Load the main app module to start the app
+require(["app"]);
diff --git a/04-Toolchain/03-Modularization/04-RequireJSExample/Gruntfile.js b/04-Toolchain/03-Modularization/04-RequireJSExample/Gruntfile.js
@@ -0,0 +1,54 @@
+'use strict';
+
+module.exports = function (grunt) {
+    grunt.initConfig({
+        clean: {
+            build: 'build'
+        },
+        requirejs: {
+
+            // these defaults will be used as a base for every target we define
+            options: {
+                // the name is used to find js/amd/app.js, basically
+                name: 'app',
+
+                // this should be set to the path from your project root to the
+                // root of your AMD JavaScript files.
+                baseUrl: 'js/amd',
+
+                // where we want the compilation result to go
+                out: 'build/js/app.min.js'
+            },
+
+            debug: {
+
+                // These options also get merged with the defaults defined above
+                options: {
+
+                    // for some reason, generating source maps requires this to be off
+                    // and it's on by default...
+                    preserveLicenseComments: false,
+
+                    // we want source maps because we're bundling everything together
+                    // learn more about source maps here:
+                    // http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
+                    generateSourceMaps: true,
+
+                    // also required by the generateSourceMaps option
+                    optimize: 'none'
+                }
+            },
+
+            // This target will inherit the default options, which is
+            // enough for us. The defaults are tuned to optimize.
+            release: {}
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-requirejs');
+
+    grunt.registerTask('build:debug', ['clean', 'requirejs:debug']);
+    grunt.registerTask('build:release', ['clean', 'requirejs:release']);
+    grunt.registerTask('default', [ 'build:release']);
+};