A jquery code could get very long in lines and become an spaghetti code. It could bring problems like chaining functions or many lines for getting data from HTML elements. Also it may create a clutter in your codebase and refactoring it could be a huge pain as well.

In that scenario, I don't know how to keep basic principles of clean code in jquery - like having many few-lines functions as possible and titled with proper names; separate functions in layers such as business layers, data layers, entity layers, etc.

I was advised to look at angular.js as a framework that could help in organizing jquery code. What do you think?

  • 1
    Unclear what help you need. Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it’s hard to tell what problem you are trying to solve or what aspect of your approach needs to be corrected or explained. See the How to Ask page for help clarifying this question. – gnat Apr 14 '15 at 17:41
  • I would be very surprised if a wildly popular development tool was fundamentally incompatible with the principles of clean code. Can you give an example of which constructs seem unclean to you and why? – Kilian Foth Apr 14 '15 at 17:57
  • Not sure why you can't keep functions small in jquery. – JeffO Apr 14 '15 at 18:18
  • Angular will work as an organizing principle, if you are doing things that Angular is designed to do, like data binding in an MVVM context. – Robert Harvey Apr 14 '15 at 18:19
  • I edited my question. Hope it make sense now. – Delmonte Apr 15 '15 at 20:40

I know what you are talking about and have faced the same problem where chaining functions, getting data from HTML elements etc creates a clutter in your codebase and refactoring it could be a huge pain as well.

Even if you use MVC frameworks out there but you don't organize your code correctly you will still end up with a messy codebase.

What I have been using for myself that worked in practice already is to write your jQuery code in plugin format. This way making it reusable for other projects if needed, cutting down on code duplication, forcing you to encapsulate change and most of all it becomes open for extension but closed for modification - so all of those great practices that make up a clean code base.

    var PluginName = function(element)
        var elem = $(element);
        var obj = this;

        var settings = $.extend({
            someSetting: "someValue"

        this.func1 = function(someArgument)
            some code

        this.func2 = function()
            some more code

    $.fn.pluginName= function()
        return this.each(function()
            var element = $(this);
            if (element.data('pluginName')) return;
            var pluginName = new PluginName(this);
            element.data('pluginName', pluginName);

Then once you have all of your code in one place that represents one responsibility (SRP) you can go ahead and use it like so:

       var pluginName = jQuery(this).data('pluginName');

| improve this answer | |

There is no reason you can't apply clean code principals to Javascript. You just need to do it. There are code metrics you can use like https://codeclimate.com/github/jquery/jquery but there a double edged sword.

Structure your code base, DRY your code, apply SRP. Javascript is no different then any other language.

Standard rules of thumb apply like "If you have to copy and paste your doing something wrong."

The biggest thing with Javascript is anonymous functions. Just make sure your DRY your JS code base and the rest will mostly take care of it's self.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.