JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<div id="foo"></div>

JavaScript

var widget = function( options, element ){
    this.name = "foobert";
    this.options = options;
    this.element = element; // in this example, div#foo
};

widget.prototype = {
    public: function(){
        return "public method";
    },
    _private: function(){
        return "private method";
    }
};

// connect widget to jQuery's API
$.widget.bridge("foo", widget);

// now you can do...
var widget = $("#foo").foo();

// your widget instance exists in the elem's data
widget.data("foo").name; // => foobert

// bridge allows you to call methods...
widget.foo("public"); // => public method

// bridge prevents calls to internal methods
widget.foo("_private"); // => #foo element

// bridge also:
//  - protects against method calls prior to initialization
//  - prevents calls to non-existent methods