JS OOP – an easier way

The last post examples are good to start at JS study. But I don’t use any of the 3. After several experiments and a great help from the folks at Code Review we reach as consensus on the method below, that fulfills my needs at the moment. The code seems clear and without so many lines that are there only to make oop work.

Code Review’s questions that allowed the creation of this method can be found on the following links:

http://bit.ly/1St8qf3
http://bit.ly/1YXIlor
http://bit.ly/1mrq7j9
http://bit.ly/1NY74po

I’m specially grateful to @tkellehe for the special interest in my question. I’m also grateful to the users @Flambino and @SirPython for the contributions and also to @Joseph the Dreamer and @Quill – HAT MANIAC who answered.

Pros:

Clean code. Not much boilerplate code.
No need to use .call or .bind for hiearchy, which in my view makes code harder to understand.
Clearly defined inheritance
Most OOP concepts available
Clear separation on view and business layers once I don’t need to define anything in html. All actions are bind in JavaScript

AFAIU in the moment these methods seem ok to me. Any criticism or comment about problems these OOP methodology may have are more than welcome.

Example download: SimplifiedOOJS-enUS.tar.gz

Techique 4 – Simplified Module Pattern

JSFiddle: https://jsfiddle.net/pkc0ng37/

index.html

base.js

viewBase.js

viewCalc.js

operands.js

randomizer.js

operations.js

Techique 5 – Simplified AMD

JSFiddle: http://jsfiddle.net/8ha212yf/
(the code below was slightly adapted for the site)

The folder structure is similar to the former example:

in the same way as before, jquery.min.js, lodash.js and require.js are the libraries of the same name and app.js (the file that configures require.js library) is this:

index.html is also the same:

base.js

viewBase.js

viewCalc.js

operands.js

randomizer.js

operations.js

main.js

Leave a Comment