How or what approach should I take in converting a large JavaScript based app? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

My situation is this, I've been tasked with fixing little issues and debugging issues in an app that relies heavily on JavaScript. One of the other tasks will be to make the app easier to understand and more scalable. As new functions and features get added, the current app is more and more difficult to modify and update. Making changes in one function can really change things in another function.

My initial thoughts are to make the JavaScript object oriented, as it stands its just a bunch of functions, if / thens, switches, etc...

If my thoughts are correct and taking it in that direction is the way to go, can anyone suggest a model or format I can use for better breaking down the app. Like what should I turn into an object, what should I turn into methods or properties, etc... I just need some sort of guide.

If my thoughts are not correct开发者_StackOverflow and taking it in that direction is not the way to go, can anyone give me some ideas as to another method.

Thanks,

---

I would consider introducing the jQuery library into the picture.

Convert a few areas to see how much code shrinkage you can expect.

---

I don't really know what you're code looks like, so I can't really give you anything better than some general advice:

• Use a JavaScript library, like jQuery, MooTools, or Prototype. I would recommend jQuery, but I can't say that I've really used the others very much. The point here is that they all are libraries that make common tasks that are rather tiresome to do by yourself much easier.

• If you see lines of code that are the same, or even similar, refactor those lines into a new function.

• Avoid magic numbers. They makes the code less scalable as well as less readable. For example, if you are referencing a desired length that happens to be 100, assign 100 to a variable and reference the variable instead. You can occasionally scan your code and look for numbers. Other than variable declarations, you shouldn't see very many numbers other than an occasional 1, 0, -1, or 2. The same goes for magic strings.

• Keep all this configuration data code in one place so things can easily be changed. You might even have an entirely separate file that just has all the data inside of it.

• Put related variables in an object. For example, instead of having xCoords, yCoords, and zCoords, have a coords object with x, y, and z as its properties. You really shouldn't have very many standalone global variables.

• Try to have a consistent code style and try to give things sensible names. This alone can make your code much more readable.

For a quick real-life example, look through this small code project and see what sort of things were improved in its reviews. You can hone your code improvement skills by being active on the Code Review site.

---

Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Backbone might be a great solution for you. It's not too invasive. If nothing else the bindings, models, and custom events could really help you get that code in order.