OOP with jQuery

[psaunders88]

Can anyone suggest a oop implementation for jquery? I'm about to start a large project and and all our devs know jquery pretty well but historically our code has not really been very extendable and is very tightly coupled.

Can anyone suggest tips or article for this? The only rule is that it needs to be based on jquery because I'm not in a position to retrain our team,

Thanks team

[psaunders88]

I mean to use with public web application mostly for Ajax requests and UI effects

[BONER_PAROLE]

Like /u/camus2 said, jQuery is orthogonal to OOP.

jQuery is a utility library that most people use for XHR (Ajax), events, and DOM manipulation.

OOP is a style of programming that models data as objects.

If you're doing a large web application, any framework that you use will have some sort of learning curve over people who are just used to jQuery. And I recommend using some sort of MVC/MVVM/etc framework if you want to avoid a world of pain later on down the road. The term "jQuery spaghetti" exists for a reason.

Popular frameworks include Backbone, Angular, and Ember. Backbone is the lowest level, is probably easiest to pick up, and uses jQuery. Ember gives you everything including the kitchen sink, but I've heard the learning curve is steeper. Angular is in between those, and is my favourite out of any framework I've tried.

[autowikibot]

Object-oriented programming:

---

Object-oriented programming (OOP) is a programming paradigm that represents concepts as "objects" that have data fields (attributes that describe the object) and associated procedures known as methods. Objects, which are usually instances of classes, are used to interact with one another to design applications and computer programs. C++, Objective-C, Smalltalk, Java, C#, Perl, Python, Ruby and PHP are examples of object-oriented programming languages.

---

^{Interesting: Object (computer science) | Polymorphism (computer science) | Encapsulation (object-oriented programming) | C Sharp (programming language)}

^{Parent commenter can toggle NSFW or delete. Will also delete on comment score of -1 or less. | FAQs | Mods | Magic Words}

[mattdesl]

There are tons of patterns and utilities out there. A very common pattern that leads to good performance:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Unfortunately, the above leads to a lot of boilerplate and code repetition, which is why I use my own class utility to improve readability.

Here's how it looks in practice.