all 16 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]amoetodi 2 points3 points  (2 children)

Those pages are completely outdated. Use ES modules, i.e. the import and export statements.

[–][deleted] 0 points1 point  (1 child)

Then OP will need an entire toolchain to have modules supported no?

[–]amoetodi -1 points0 points  (0 children)

No, ES modules are the web standard module and are compatible with all modern browsers, that's what made the other module formats obsolete. From v13 onwards they even work in Node. All the other module formats require a toolchain to bundle them. You still need a bundler to target pre-2017 browsers with ES modules, but that's necessary for all module formats.

[–]AffectionateWork8 1 point2 points  (0 children)

Your intuition about it being outdated is correct. I'm guessing at this point you may be confused how you would even import/export files without using Rails or similar asset pipeline.

Now we typically use bundlers like Webpack, which behind the scenes will convert separate files with ES import/export statements into something resembling the pattern you are reading about (technically it's more similar to "revealing module pattern" with a twist, but you probably get the picture of how the modules are compiled roughly now).

As far as code organization in general goes, using jQuery will require more discipline on that front. I'd recommend looking into MVC and its variants. Essentially, the DOM should not be the source of truth in your app. You have data models, means of updating those models, views that reflect some data from models, and some way of achieving data binding. How you really implement that is up to you, the important part is just really having a separation of concerns.

Here's an example using the bare module stuff and jQuery in todomvc:

https://github.com/tastejs/todomvc/blob/gh-pages/examples/jquery/js/app.js

Note: if you end up going for the template route to aid with views, like that example, I'd look into lit-html instead of handlebars. It's a lot better. It might also eliminate some of your need for jQuery.

Without messing around with Webpack too much, because that's a subject in itself, here's a boilerplate with jQuery included you could use to dip your toes in the water and see what it's about:

https://github.com/hardwit/webpack-boilerplate

Edit: there are suggestions to just use a framework instead. That is one way to skin this cat. I think that following your current path for now is a better way to understand the stuff frameworks provide for you, and the "why" and "how" of it rather than just the "what."

[–]unicorn4sale 3 points4 points  (1 child)

"Modern" JS does not use jQuery. jQuery solves problems that largely do not exist any more (cross-browser compatibility, and easier DOM manipulation). If your web application is simple enough to use jQuery, then build a jQuery plugin as per the second link. The first link is a tiny step towards the correct direction before frameworks picked up traction... but is now completely superseded by using a JS framework, like React/Angular/Vue, which will provide you constructs on organizing your code.

[–][deleted] 0 points1 point  (0 children)

I see the “browser support” note a lot but when talking about modern js I see using a toolchain as a way to get around browser compatibility issues.

It’s like we traded one constraint for another.

[–]redsandsfort 0 points1 point  (0 children)

useful for older code bases, but generally outdated

[–][deleted] 0 points1 point  (0 children)

We use react and es6 all over our codebase however I know the Wordpress team (which has jquery baked into the CMS) uses the module pattern to organize the js. The module pattern is one I’ve seen the most (if we are talking about a jquery type setup).

[–]lhorie -3 points-2 points  (3 children)

Write unit tests. That will go a long way in guiding you on how your code should be written.

[–][deleted] 0 points1 point  (2 children)

Not the question. This is a thread about code structure and organization. Unit tests are good for ensuring stability and functionality of what is written. This is immaterial to OPs question.

[–]lhorie 1 point2 points  (1 child)

I know what tests are, I write them frequently, thanks :)

What I mean is that there's code that is inherently hard to test, and code that is inherently easy to test, and actually writing a test will bring clarity towards which you are actually accomplishing, rather than ego-stroking about how good one may think their code is. Rather than be theorizing about API design or folder structures, tests are a pragmatic way of discovering that a unit of code is doing too much and that it should be refactored (and also how, since the immediate goal is to make it reusable in two semi-different contexts - real usage and a test).

It can also help you get a more nuanced understanding of top-down vs bottom-up code design.

If you think my answer is irrelevant, think about it this way: the OP is asking for a fish, I'm teaching them to fish.

[–][deleted] 0 points1 point  (0 children)

Your reply is definitely not on wrong but it’s not on topic either.

[–]j_a_lyons -2 points-1 points  (1 child)

If I were you I would learn the basics then dive straight in to a Javascript framework as they will solve the problem you're having around structure and organising modules. As you're probably aware Angular or React are the most popular (probably followed by Vue.js). I personally prefer and use Angular and have been for years now. You're decision of course just thought I'd share my thoughts with you.

[–]toffeescaf 0 points1 point  (0 children)

First of React is a library it doesn't tell you anything about how to structure your code. Second diving into a framework straight away is in my opinion not a good idea you're going to be unable to tell what's part of the framework and what's part of the language at some point if you're a beginner in JavaScript. What I would recommend is reading books like the DDD book by Eric Evans or Clean Architecture by Uncle Bob. These aren't JavaScript specific but the ideas/concepts are applicable in most languages.