class files structure in js

Hi folks.

I was really good in JS, but … 20 years ago. 😉
Then I learned PHP, then C++, a lil-bit Java and recently C#.NET.

Due to some upcoming private web projects, I’m trying to find back in JavaScript again. I looked at the prototypes and also how to create classes. The lack of type safety bothers me a bit, reminds me of the PHP mixed var types. Also, the annoying typing of “this.*” for each member/field of a class is exhausting. But well, that’s the way it is.

However, my main concern describes the clear structuring of an entire collection of classes, e.g. for larger model or MVVM structures.

I quickly took a look at the latest Vue.JS documentation, the getters and setters for the MVVM object are also generally nice.

Nevertheless, I would prefer a structure like the one known from C#.NET. So a separate file for each class. The question is how do I link all these files and how can I make sure that classes used within other classes (as member/field or via inheritance (extends, :)) are already available according to the order. So previously listed in a merge code.

Are there already libraries or is it somehow very easy to do it yourself? Or does anyone know of some more elegant ways?

It is important to me that with more than 250 classes, subclasses and nested combinations, I can find the classes I am looking for quickly and clearly and update them as cleanly and encapsulated as possible.

But I hope you understand, what I want to have. I’m looking for a way to combine/merge and minify a long list of class files into one *.js file, like a build compiler in C# creates an *.exe file. But in a valid order.

Or am I thinking too much in C#.NET here?
Please don’t see this post as a code question.
I enjoy in a discussion of techniques, libraries and would appreciate some help using these patterns or ideas.


Just for info: My first web project should be a small blog/community for “movies & games” with techniques like:

  • MVVM, binder/observers, shaddow DOM
  • speed ups (lazy load, shaddow DOM, preloads)
  • locally data storages (indexedDB)
  • offline page/js/css with serviceWorker
  • SPA and url manipulation (history.pushState or “/#/…”)