JSFiddle - React, Tailwind, and code Playground

HTML

<div id="view">
    Mouse over me
  </div>

CSS

#view {
      margin: 20px;
      padding: 20px;
      width: 100px;
      border: 5px dashed blue;
    }
    
    #view.over {
      border-color: red;
    }

JavaScript

var exports = this;
//Controller lib
(function($){
    var mod = {};
    
    mod.create = function(includes){
        var result = function(){
            this.init.apply(this, arguments);
        };
        
        result.fn = result.prototype;
        result.fn.init = function(){};
        
        result.proxy = function(func){ return $.proxy(func, this); };
        result.fn.proxy = result.proxy;
        
        result.include = function(ob){ $.extend(this.fn, ob); };
        result.extend = function(ob){ $.extend(this, ob); };
        if (includes) result.include(includes);
        
        return result;
    };
    
    exports.Controller = mod;
}(jQuery));
// 不直接將 View 元件寫死在控制器裡面
// 改成 View 元件在 new 出控制器實體的時候注入
jQuery(function($){
    var ToggleView = Controller.create({
        init: function(view){
            this.view = $(view);
            this.view.mouseover(true, this.proxy(this.toggleClass));
            this.view.mouseout(false, this.proxy(this.toggleClass));
        },
        toggleClass: function(e){
            this.view.toggleClass("over", e.data);
        }
    });
    
    //建立控制器物件實體, 呼叫控制器的 init()
    new ToggleView("#view");
});