Modular JavaScript continued…

For the first part of this session, please read the previous post: Modular JavaScript.

Today we watched the last four videos in the series Modular JS by LearnCode.academy.

In these videos Will Stern goes through the PubSup pattern, plus two different ways to handle inheritance and OOP in the classical vs. the prototypal pattern.

PubSub

PubSub is a way for modules to subscribe to events or emit events in other modules.

Link to the PubSub code used in the example:
https://gist.github.com/learncodeacademy/777349747d8382bfb722

Prototypal OOP

The prototypal OOP pattern is the modern way of handling OOP and inheritance. An example of this is:

//prototypal inheritance

var vehicle = {
    wheels: "four",

    create: function(values) {
        var instance = Object.create(this);
        Object.keys(values).forEach(function(key) {
            instance[key] = values[key];
        });

        return instance;
    },

    sayWheels: function() {
        console.log(this.wheels);
    },

    sayName: function() {
        console.log(this.name);
    }

};

var bicycle = vehicle.create({
    wheels: "two",

    driveVehicle: function() {
        console.log("driving " + this.speed);
    }
});

var bike = bicycle.create({
    name: "mountain bike",
    speed: "fast"
});

bike.driveVehicle(); // driving fast
bike.sayName(); //mountain bike

Today’s programming example

We also tried creating a module based on the examples given in the last session.

  1. Create a folder named anything you like.
  2. Open the folder in your preferred editor (we used Visual Code).
  3. Create the files “index.html” and “js.js”.
  4. Open index.html in a browser.

In the example we created a text input, an add button and a div to put our content in:

index.html

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ModularJS</title>
    </head>

    <body>

        <h1>MODULAR JS</h1>
        <input type="text" id="NameInput" name="name">
        <button id="AddButton">Add</button>
        <div id="Names"></div>

        <script src="js.js"></script>

    </body>

</html>

In our JavaScript we created a function with a method to add names to a container via the input defined in the html.

js.js

var Names = (function(){

    var names = [];

    // cache DOM
    var nameInput = document.getElementById("NameInput");
    var addButton = document.getElementById("AddButton");
    var namesContainer = document.getElementById("Names");

    // bind events
    addButton.addEventListener('click', addName, false);

    function render() {
        namesContainer.innerHTML = "";

        for(var i = 0; i < names.length; i++){
            var content = document.createElement('p');
            content.innerHTML = names[i];
            namesContainer.appendChild(content);
        }

    };

    function addName(e, name) {
        var newName = name || nameInput.value;
        names.push(newName);

        render();
    };

    return {
        addName: addName
    };

})();

var names = new Names();
names.addName("", "Liselott");
names.addName("", "Max");
names.addName("", "Göran");

Here we can see that it is possible to add names both through the input, and programatically.

Leave a Reply

Your email address will not be published. Required fields are marked *