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

Object orientation in javascript

One of the hardest things for any begginer javascript developer is how to do object orientation correctly. Specially to those coming from other programming languages. It was hard to me also. I know, many say it’s a prototyped language, you have to have a different approach, etc. But even with this approach, some basic concept are crucial to any developer with some expertise. You have to be able to organize the code in classes, you have to be able to inherit classes, you have to be able to call the super class code and expand it, you have to be able to have public and private variables, initialize class variables, and you need decent polymorphism. That’s not asking too much, This is the minimum of any modern language.
It was by searching on how to do this “minimum” in js that I realize that one needs to search a lot, read a lot, in different places to do just this “minimum”.
In this post I summarize 3 techiques to apply oo concepts in javascript. The objective is that any begginer can at least start developing and learn with time the js way of programming.
To those who want to go deeper, I recomend the excelent book: The Principles of Object-Oriented JavaScript by Nicholas C. Zakas

Example download: OOJS-enUS.tar.gz

All techiques use the same example, based in a simple application that calculates the 4 basic operations, with this base HTML:

So it looks like this:

OOjs

Techique 1 – using prototype and new

JSFiddle: http://jsfiddle.net/59c7mso5/

Technique 2 – Module Pattern

Module Pattern is a pattern for organizing code in modules which can contain multiple classes, put together in the same context. To this example we will use one class per module.

JSFiddle: http://jsfiddle.net/u14j9ydc/

Technique 3 – AMD – Asynchronous Module Definition

This techique, is an extension of Module Pattern, loading modules asynchronously. This isn’t a native js feature. It’s implemented by some libraries.
On this example we’ll use one of the most used (Require.js), putting each class in a different file.

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

We’ll use this folder structure:

jquery.min.js and require.js are the libraries. app.js is the configuration file for require.js:

In index.html file we’ll to a slight modification. The only library we’ll need to declare is require.js
After that the library with handle the task of loading others:

main.js

operators.js

randomizer.js

operations.js

Welcome

Ideas about code: a blog about software development, methodologies and solutions.

I have created this blog as an expression of some ideas in this field and to share many solutions I find in a daily basis that can be useful to other developers.

Welcome! 🙂

This site uses WordPress with the excelent Polylang plugin (I really recommend this one)