JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="main-sidebar">
    <a href="">Click me</a>
</div>

JavaScript

//Gem alt på et objekt så vi kun laver 1 enkelt entry i det globale namespace (window)
var WHATEVER = window.WHATEVER || {};

//Lav closure så vi er sikre på at $ altid er jQuery inde i og at NS svarer til det namespace vi passer ind
(function ($, NS) {
    
    
    //Brug ecmascript 5 strict mode så vi lave færre fejl
    "use strict";
    
    //Lav et modul på vores namespace (som er window.APP fordi window.app blev passet ind), som repræsenterer vores sidebar
    NS.Sidebar = {
        
        //Definer ting vi kommer til at have brug for her som undefined eller en initiel værdi så vi let kan overskue
        //hvilke properties vores modul har (feks kan man læse her at en sidebar har et domelement og en dispatcher)
        $elm: undefined, 
        $dispatcher: undefined,
        
        init: function () {
            
            //Gem en reference til vores det dom element som objektet repræsenterer
            //En hovedregel er at man aldrig må skrive kode som gør noget ved domelementer som ligger uden for dette element
            this.$elm = $(".main-sidebar");
            
            //Lav en dispatcher som andre moduler kan subscribe på med .on/.off/.bind/.unbind
            //og som vi kan sende custom events igennem med .triggerHandler/.trigger - loose coupling!
            this.$dispatcher = $("<div />");
            
            //Maintain 1 level af nesting og korrekt binding af "this" ved at bruge $.proxy - svarer til UnderscoreJS's .bind
            //På denne måde er det nemmere at læse da man kan aflæse alle modulets funktioner i samme "level"
            this.$elm.find("a").on("click", $.proxy(this._handleLinkClick, this));
            
            
        },
        
        //Private metoder (dvs metoder som andre moduler ikke behøver at kende til)
        //bliver prefixed med underscore - samme gælder properties
        _handleLinkClick: function (e) {
            
            var payload = {
                enStreng: "whatever...