I'm not sure singleton is really useful for modern JS/TS. I tend to just have a module with a declared export or set of exports for this use case.
An example is normalizing values either injected by the server or set via a request from the api or config server. As the first script.
ex: <script src="https://config-server/base.js"></script>
Then in-code, I use a module that normalizes the global variables the base.js sets. `global.__BASE__` which will include language strings, feature flags/toggles and any service urls. I use feature/base.js from my code, that exposes the globals in a normalized patter... such as the current language and extra interfaces.
---
On observers, I tend to favor the simpler model that a node-style event emitter has. For the DOM, you can subscribe and trigger non-standard events, though TS makes this difficult.
---
Factories are rarely needed in JS/TS, I tend to bucket them in with IoC and DI,
---
It's good to know the pattern, but the JS/TS platforms, language and tooling allows for simpler solutions in JS. This is just my own opinion.
This is one of those borderline posts that I'm not always sure how to treat. Stripe, as a commercial service with this specific post being very close to an ad for the service, is off-topic for the site. But since the series has been good, and it's an ongoing part of that, I'm letting it stand.
It's nearly 70k minified... this is somewhat massive for the job at hand... 3/4 of that comes from the Velocity Animate library. It isn't *REALLY* vanilla js, it's a bundle built with webpack, and a rather large one at that. I would suggest using a micro option[1] and/or straight CSS transitions. Animatelo comes in at 2.9k and is pretty feature rich.
Contrast a datepicker[2] that includes modal and date picker functionality, and includes preact in the bundle and comes in at 19k.
I know that 70k won't make or break a project... That said, it's mostly bloat. Those looking for "vanilla js" would be better off going through the microjs site to look for libraries that fit their needs. For that matter, devs should really consider trying to get site payloads back under 250k for JS, 100k for css, and heavily optimize for mobile images as well. Libraries like this are why the typical webapp is now well over 2mb of JS content alone.
1. http://microjs.com/#animate
1. http://tracker1.github.io/md-datepicker/
First, the example as posted uses the same quotes for all three.
Second, since you can't control for external factors like garbage collection, task schedulers etc. It's not really a good test unless run *many* times.
Third, after a pass through the language parser, they're all the same anyway...
Max for a 32-bit signed integer value, IIRC some browsers have/do allow for negative values... don't recall the behavior of any, as nobody really does this in practice.
Tip: ~~VALUE will always give you a 32bit signed integer value from the VALUE... 0 when it's not a clean conversion. Don't use this for Date, since it will overflow and cut off the value.
Should probably start with var statement, then expand on closures, and note that undeclared variables are assigned global by default, and historically the only closure in JS was inside a function. Then expand into const and let as closure based declarations.