JSFiddle - React, Tailwind, and code Playground

HTML

存取檢視器
<div id="users">
    <form>
        <input type="search" value="" placeholder="Enter a query" />
      <button>Search</button>
    </form>
</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));





jQuery(function($){
    exports.SearchView = Controller.create({
        elements:{
            "input[type=search]": "searchInput",
            "form": "searchForm"
        },
        
        init: function(element){
            this.el = $(element);
            this.refreshElements();
            this.searchForm.submit(this.proxy(this.search));
        },
        
        search: function(){
            alert("Searching: " + this.searchInput.val());
            return false;
        },
        
        // Private
        
        $: function(selector){
            return $(selector, this.el);
        },
        
        refreshElements: function(){
            for (var key in this.elements){
                this[this.elements[key]] = this.$(key);
            }
        }
    });
    
    new SearchView("#users");
});