I'm working on redeveloping a running project, and the main goal is to enhance the JS code as much as possible.I'm using the observer pattern to watch the window events like scroll, and resizeThe following is my implementation:module.exports = {    // Watch window scrolling/resizing, then fire a set of watchers    watchWindow: {        watchers: {            scroll: {},            resize: {}        },        initialized: false,        init: function () {            this.initialized = true;            var watchers = this.watchers;            $window.on('scroll resize', function (e) {                for(var id in watchers[e.type]) {                    if(watchers[e.type].hasOwnProperty(id)) {                        if (typeof watchers[e.type][id] === 'function') {                            watchers[e.type][id](e.type === 'scroll' ? $window.scrollTop() : $window.width());                        }                    }                }            });        },        addWatcher: function (settings) {            var id = Date.now();            this.watchers[settings.event][id] = settings.callback;            !this.initialized && this.init();            return id;        },        removeWatcher: function(settings) {            delete this.watchers[settings.event][settings.id];        }    }}Then that's how I'm using it:// Watch window resizingutilities.watchWindow.addWatcher({    event: 'resize',    callback: function (windowWidth) {        mobileMenuEnabled = windowWidth < sideMenuBreakpoint;    }});
Observer pattern implementation in JavaScript
javascript;observer pattern
Your code is very to the point and efficient. I like your method of using the global event which the elements 'register' for. While the browser likely does something similar for its event handling, your method puts you in complete control and ensures efficiency.I do have a couple suggestions though.First and simplest would be to add some debouncing to your event handling. If you're not familiar with this, the concept is to add a delay on your handling to prevent excessive processing. Something like this.bool noEvent = false;function eHandle(){    if(noEvent){        return;    }    noEvent = true;    setTimeout(function(){noEvent = false;},100);    //normal event handling here}It's a simple concept that will reduce the amount of work the browser has to spend on your handling. Adjust the timeout interval based on what kind of response time you need.The other thing you might want to consider is using css for your width checking instead. I notice in your example that you're setting a boolean based on the width of the element. You can use css media queries to adjust the styling of elements based on certain parameters, including screen width. If you can use this in some of your use-cases, then it will reduce the amount of watchers you need to register.@media (max-width:750px){    p{        color:red;    }}@media (min-width:751px){    p{        color:green;    }}Lastly if you're interested where the term debouncing comes from, it comes from electronics. When you push a button it actually bounces a bit before it settles. The bounce is very fast and short lived but at millions of checks per second it's easy for a microcontroller to detect. To prevent the bounces being interpreted as dozens of quick button pushes, the programmer adds a delay during which button changes are ignored. 10-50ms delays are typical.