Modular Javascript #2 - Converting jQuery to an Object Literal Module

In this video, we'll convert plain jQuery code to an object literal module. It will still use jQuery, but the pattern will be much cleaner and easier to maintain.

Source code for this video:

Web developers often don't see the value of changing the way they write javascript code - this is often due to the fact that they have never had to code a large application. Code that doesn't look messy at first gets VERY messy when you need a lot of code doing a lot of things.

This video will show how to take that messy jQuery code and clean it up into a self-encapsulated module that is easy to work with.

Modular JS #1 - Object Literal Pattern pt 1:

Modular JS #2 - Object Literal Pattern pt 2:

Modular JS #3 - Revealing Module Pattern:

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[OfficialDevTips]

Dude, Will. This was revealing. This is what has been a huge gap in my JS knowledge. Thanks for explaining all this like only you can. I really appreciate it :)

[vxxs]

After 8 year this still beutiful code, even tough nobody uses jQuery anymore, that made me feel dumb and even more hyped to learn, thank you

[namelesss]

Ever since I started coding in JS, there was always an itch in the back of my mind that my code lacks something, it has too much freedom, it looks messed up, gets the job done, but messed up/unorganized. I finally get why that is! Lack of design pattern knowledge. Thank you for this detailed explanation, it made it easier to grasp because of the way you translated the code.

[bennettwaisbren]

by far the most valuable js tutorials I've come across on YouTube. The care you take in explaining the reasoning behind everything is immensely valuable to me.

[Co-Monad]

I've used codeschool, codecademy, and udemy and I find this series to be the best tutorial about JS and building modular/OOP code. It may be that the other sources successfully taught me JS basics, but this really takes you to the next level.

[purenergy]

As a junior developer working on freelancing projects, its extremely difficult to get useful feedback on code. Watching these make me way more confident, feel good about my code, and ensure that other developers that look at my code are impressed rather than worried when making mods. Thanks a lot!

[sshadow]

Best explanation of this topic I've seen. Thank you. And keep going!

[EmergencyHiker]

I can genuinely say this video and its predecessor have given me a huge lightbulb moment. I'm new to programming and have been trudging through JavaScript and have really brought it all together with this video.

[santiagogarza]

This is the absolute best explanation of modular JS I have seen. This has definitely taken me to a new level in my JavaScript journey.

[Emadmohamad]

Dude, you are fucking amazing. Please don't stop making videos. You are a gifted instructor!!

[mahmoudzakria]

Dude, Will.
I agree with travis, because you are the only one who removed the dust in my JS knowledge starting from "What makes Javascript Weird and awesome" to "Modular JS".

Thanks

[beto.aveiga]

Thanks for the tutorial, very informative. Tip: Another way of getting the object with "this" inside an event (which overrides "this") is saving "this" (the object) at the beggining of it's code using a variable or a property. That way when you call this from an event you can get the object easily from the variable and also get this as usual from the event.

[floppyskater]

Best modular Javascript tutorial ever. Things are so much cleaner now for me. Thank you a lot mate, keep up with the good work!

[zemownkee]

21:24 "So now I delete Laura and all of a sudden God shows up?" - Quote of the decade.

[electroacoustico]

this is gold! been coding javascript for 2 years but i felt like I have nothing substantial learned!

[WorstDeveloper]

I feel like I want to take down my Github code now because I'm ashamed of it.

[jeromeavelino]

You have saved my brain from rethinking always on wtf I have wrote last week sir. you the real mvp.

[imrannazir]

concerning 12:32 where you created a separate callback function instead of defining it inline with the event binding. would this method still work if you are binding events in a for-loop?

[Ludo]

i really have trouble understand this since i only do vanilla js and not the whole jquery stuff

[Masteblok]

Dude....really! I used to hate JavaScript...especially when I saw those spaghetti codes. After watching your first two videos, I am starting to like it more and more.

Also, you explain it very well and clear. If a question comes to my mind, most of the time you answer it in the same video within seconds. Thanks for this!

I subscribed right away!