Bestpractices on OOP and patterns in js?

Question

JavaScript

Somehow I noticed that I write in js exclusively in some kind of procedural style. Objects are used exclusively as dictionaries, procedures for almost every action are spread over different files. There is no beauty in the code, while in python I can’t imagine how you can live without inheritance and metaclasses (or maybe it’s because of this that I don’t know how to do this with these fucking prototype systems).
What do you recommend to read? Only on these topics. Given that js I conditionally "know" and actively use?

Answer 1

Something like superherojs.com

Answer 2

A question from the series "why in functional languages ​​there are no cycles and variables and how to live with it". So, you can live quite well. Just a little different.
I advise you to study what OOP is and how it happens. In a couple of minutes, you can find the info that in Javascript OOP is prototypical, and in python it is "class-oriented". Those. in the first, everything is an object, and you can create new objects only by cloning the main object, all methods and fields are searched first for the object, and then for all its prototypes. In the second case, there is a division into classes and objects - instances of these classes. There, dispatching is arranged differently: methods and fields are searched for from the class, and then from all its ancestors.
And you can do without inheritance and metaclasses quite easily if you know what inheritance and metaclasses are for. A metaclass allows you to manipulate the created class at the level of its creation. Those. There are 2 concepts in Python: a class and its instance. In the class constructor, you can define the behavior of the created instances (via __new__ and __init__ ). To change the behavior of the class itself (and not its instance), metaclasses are needed: there, in the __init__ and __new__ functions, you can override the behavior when creating a class. Since there is no such separation in Javascript, the very concept of a metaclass disappears: each object is created by cloning from a base object (Object in js, although you can clone any other object: Array, Function, your own). The same garbage for inheritance: there you just indicate what fields can act as prototypes for all "child" objects is when you write MyClass.prototype.someMethod = function(args) { ... }. In this case, someMethod will first be looked up within the object itself. If there is no such thing, then it is searched for in the prototype, i.e. in Myclass. Well, "classes" are declared functions there, because the syntax does not provide for the creation of a class. And even then, the class function is just syntactic sugar: when the new MyClass operator is called, this function is executed and returns a copy of the Object object, on which certain operations have been applied (which you just describe in it). Each function creates its own local context, which is stored in the this variable. You can describe in the class function which fields to add to this, and it will return you just this changed this.
Each approach has both pluses and minuses. I am comfortable writing in both styles. The only problem may arise when you try to assign some function (callback) to the field in the class. This inside this callback will have the local context of this function, and the object in which this field is located. The bind function comes to the rescue.
PS It's important to understand that functions are objects (in both languages). But in js, using functions as variables is much more common. Therefore, strictly speaking, there are no methods and fields in js. An object simply has members, which can be either simple data and objects, or functions. Actually, this is also true for python, because the classes themselves are also objects (instances of the type type). It's just that there are 2 concepts, like a two-level system. Well, there is much less often a member of an object is assigned a function than in JS.

Answer 3

I recommend taking a look at Addy Osmani's book addyosmani.com/resources/essentialjsdesignpatterns/book
He takes a very good look at the ordering of JS code, from simple constructor functions to MVC / MVVM architecture

Answer 4

"Design Patterns" of the Gang of Four. There are also examples of implementations (though not in JS).
If problems with prototypal inheritance: https://github.com/lukehoban/es6features#classes. You can compile some such "class" through babeljs and see what it turns into. (This can also be done with TypeScript or CoffeeScript)