How do I create a reusable JavaScript component

Question

I'm trying to create a JavaScript component that is reusable in any web application (pure js only allowed). And more than one instance can exist at a time on a web page.

Client HTML

<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <script src="MyComponent.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            MyComponent.init();
        };
    </script>
</head>

MyComponent.js

var MyComponent = {};

(function () {
    var ns = MyComponent;
    ns.init = function () { alert('test'); }
}());

How would I instantiate the component above?

Do you have a specific question? Is something in your code not working? What do you expect to be newing? — Matt Ball
– Matt Ball, Commented Oct 16, 2013 at 15:40

Andrei Nemes · Accepted Answer · 2013-10-16 16:01:40Z

2

Here's the gist of it:

function MyComponent() {
  //constructor
}

MyComponent.prototype.doStuff = function() {
  //method
}

MyComponent.doSomething = function() {
  //static method
}

And heres how you'd use it

var component = new MyComponent();
component.doStuff();

MyComponent.doSomething();

edited Oct 16, 2013 at 16:01

answered Oct 16, 2013 at 15:46

Andrei Nemes

3,1221 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christophe Over a year ago

I think function MyComponent() {...} would be more standard.

Andrei Nemes Over a year ago

Completely! Don't know why I wrote it that way.

Christophe · Accepted Answer · 2013-10-16 16:01:01Z

1

I think what you are looking for is the constructor pattern. See explanations and the Car example on this page.

Excerpt from the article:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// Usage:
// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

edited Oct 16, 2013 at 16:01

answered Oct 16, 2013 at 15:52

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Collectives™ on Stack Overflow

How do I create a reusable JavaScript component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related