Geek Answers Handbook

How to make javascript easy to maintain

That's it, I'm working on a highly interactive web application that will need a lot of jquery or js code. And I found that my code is getting a bit more complicated to maintain and not all of this is readable. Sometimes even the author cannot find the specified code.

So far, what I have done for clear code is below.

  • One js component in one js file (for example. CustomTab.js is a tab component in my application.)
  • Using a temple to generate a JSON-based HTML component.
  • Using jQuery UI.
  • Unobtrusive JavaScript.

Are there any other points that I need to pay attention to? Anyway, any suggestion or recommended technique for creating a js library / framework convenient for miantanance is called, thanks.

+6
source share
4 answers

I could suggest you use the module template with RequireJS to organize your JavaScript code. For production, you can use the RequireJS optimizer to assemble your modules into a single JavaScript file.

Also, if you expect your client-side application to be huge, consider using some JavaScript MVC framework such as Backbone.js and a server-side RESTful service.

+4
source

I use this name pattern for my libraries:

MyLibrary.ListView.js:

 var MyLibrary = MyLibrary || {}; MyLibrary.ListView = { doSomethingOnListView: function() { ... return this; }, doSpecialThing: function() { ... return this; }, init: function() { // Additional methods to run for all pages this.doSomethingOnListView(); return this; } };

Whatever page needs this:

 <script type="text/javascript" src="/js/MyLibrary.ListView.js"></script> <script type="text/javascript"> $(function() { MyLibrary.ListView .init() .doSpecialThing(); }); </script>

You can even chain methods if an additional function is required on a specific page.

+1
source

I am also currently working on JS infrastructure for my company. What I do, I use OOP elements for JS. In other words, I am implementing similar code for C # libraries (not that similar, imitation will be the right word). As an example in C #, you are using Microsoft.Window.Forms, so I can use JSOOP and use the extension and override method to create the same script. But if you are far advanced in your project, then converting your JS code to JSOOP will take a lot of time.

use JSLint, this will confirm your code and result in a readable, script engine friendly code. Although JSLint is very strict, so you can use JSHint.

using a separate file for each component is a good idea, I do it too.

If you like, you can download the jQuery version of the developers, and you may have a general idea of ​​how they created the framework. I learned a lot about jQuery structure!

+1
source

This is exactly the same question that I ask myself every time. I think there are several ways to easily maintain code.

  • Contribute open source projects to javascript and understand how they solved this problem. I think you can collect a unique solution from each project, and the general part of the project structure will answer your question about maintenance.

  • Use prepared solutions such as backbone , knockout , ember or angularjs. If I am not mistaken, angular does not give you structure, but it provides you with a powerful tool for creating pages with less code. Also check out todomvc turnkey solutions.

  • Read books and try creating a structure for your needs. It will be difficult and long, but the result (maybe a few years later :)) will be amazing.

+1
source

More articles:


All Articles