JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<ul id="msg"></ul>

CSS

ul#msg{
    list-style-type:none;
    font:Verdana;
    color:#696969;
}

JavaScript

// part 1
var MyClass = (function (MyClass) {
  var self = MyClass;

  function MyInternalClass(){
    function MyMethod() {
      alert("DoSomething");
    }
    return {
      SubMethod: MyMethod
    };
  }

  function constructor() {
    self.SubClass = self.SubClass || MyInternalClass();
  }
  $(document).ready(constructor);
  return self;
}(MyClass || {}));


// part 2
var MyClass = (function (MyClass) {
  var self = MyClass;
  var msg = $("#msg");
  self.ShowMessage = function (message) { 
      msg.append($("<li></li>").text(message));
  };

  function constructor() {
    self.SomeProperty = "SomeValue";
  }
  $(document).ready(constructor);
  return self;
}(MyClass || {}));

MyClass.ShowMessage("js load complete");
MyClass.ShowMessage("MyClass.SomeProperty:" + MyClass.SomeProperty);

$(document).ready(function(){
    MyClass.ShowMessage("document ready complete");
    MyClass.ShowMessage("MyClass.SomeProperty:" + MyClass.SomeProperty);
    MyClass.SubClass.SubMethod();
});