loading...

Top 10 JavaScript Patterns Every Developer Likes

Jay Chow on July 23, 2019

1. The constructor Pattern In classical object-oriented programming languages, a constructor is a special method used to initialize a ne... [Read Full]
markdown guide
 

I think that patterns are fundamentals to developers. I'm writing a posts series about the 23 traditional patterns explained as I had wish to learn.

Thanks!

 
 

Thx to share this.
We use to work every day with design/architectural patterns without notice it.

Also, sorry to talk about that but there are several typos in your article (even on code examples).
If you are using VSCode like many others, please consider to use a tool such as Spell Right (marketplace.visualstudio.com/items...) ;)

 

That's great tools. Thank you Quentin

 

Yo, great tip, will recommend it to my Team as well!

 

Just to confirm that you are aware of the ES6 Class support caniuse.com/#feat=es6-class

I do like this post, but "JavaScript does not support the concept of classes" is not a fact since time ago.

Please keep learning and don't stop posting!

 

They're not really classes.

To quote the caniuse you posted:

ES6 classes are syntactical sugar to provide a much simpler and clearer syntax to create objects and deal with inheritance.

 

We know JavaScript class is based on prototype, but can someone explain how
different it is than the legacy class in other languages such as Java, Python, C#, PHP, etc. Don’t those languages search properties and methods from a base class (/super class /parent class /prototype, whatever you call it)?

It's there a strict definition for classes? It's limited in respect to support for explicit syntax that abstracts the notion of classes and internal awareness of a class specification but in terms of capabilities you can have classes.

 

We know that, but the concept of Class exists, and can be used as classes are expected to be used.

Let's not confuse the syntax sugar with the inability to take advantage of them.

 

I've come to the discuss section to see this kind of comment. Good pointing!

 

A bunch of outdated code snippets probably taken out from some design pattern book published 10 years ago.

There's really no use for this kind of article. The content isn't original (I've seen those same examples with outdated syntax many times) and there are now much more idiomatic ways to achieve the same things using modern JavaScript.

 

You would be correct but now with added typos! (i.e The mixin example)

addyosmani.com/resources/essential...

 

The patterns are good. The code examples, uh, they're not.

The decorator pattern as it's shown is a really bad implementation, since you're not wrapping functionality but augmenting the results. You are calling the method cost() where you should be doing something like

Decorator(baseClass){
  orig = baseClass.cost;
  baseClass.cost = () => { return orig() + number; }
}

not call the method at the decoration moment.

I'm not going to point out the errors some othe people already pointed out

 
 

var myCar = {
name: 'bmw',
drive: function() {
console.log('I am driving!');
},
panic: function() {
console.log('wait, how do you stop this thing?');
}
};

//Usages:

var youcar = Object.create(Car);

console.log(yourcar.name); //'bmw'
I guess it should be var Car or create(MyCar)

 

I like the examples and the patterns and how you explained them. I suggest you read about Singleton as an anti-pattern.

P.D.: check the mistakes in the examples, they won't run.

 

Great article, design patterns are very important for every developer. I have a similar article on JavaScript Design Patterns, feel free to check it
codespot.org/javascript-101-design...

 

I think it's great that you took some time to come up with a post, effort is what matters the most, there will always be haters. I almost forgot that we have been using most of them in our everyday life, now a bit differently with ES6. I would like to recommend two nits:
1- The title should have been: "Top 10 JavaScript Patterns Every Developer Likes"
2- You have a typo declaring the variable publish, this is what you wrote: "var publicsh ...".
3- Other than that I would probably have chosen ES6 to write the article, but good job :)

 

Thank you, I wrote the article very fast, but yeah I updated those typo as well!

 

Thanks for sharing this article.
Recently, I had a challenge with javascript and your article could help me.

 
 

The fun thing about FlexiScript and its many ways to skin a cat is that this is barely even the beginning.

 

Observer Pattern,
Would not events and event listeners will do the same?

 

Yeah, you can say that the events listeners extends the events. People use that as pattern for their purpose.

 

Thanks for a good article, the macbook constructor in Decorator Pattern is mistyping it should be 'return' instead of 'reutnr'.

 

Nice catch, we had fixed that already :)

code of conduct - report abuse