2
\$\begingroup\$

I have recently been getting into the habit of leveraging the revealing module pattern for all my code. I used this guide for inspiration, but my code doesn't feel as elegant.

var styleGuide = (function styleGuideHandler() {
        'use strict';

        var publicAPI,
            intervalId = null,
            clipboard = new Clipboard('.copyButton'),
            btns = document.querySelectorAll('.style-guide');

        function setTooltip(btn, message) {
            $(btn).attr('data-original-title', message);
            setTimeout(function() {
                $(btn).tooltip('show');
            }, 150);
        }

        function hideTooltip(btn) {
            if (intervalId !== null) {
                clearTimeout(intervalId);
            }
            intervalId = setTimeout(function() {
                $(btn).tooltip('hide');
                intervalId = null;
            }, 500);
        }

        publicAPI = {
            init: function() {
                clipboard.on('success', function(e) {
                    setTooltip(e.trigger, 'Copied!');
                    hideTooltip(e.trigger);
                    e.clearSelection();
                    console.log(e);
                });

                clipboard.on('error', function(e) {
                    setTooltip(e.trigger, 'Failed!');
                    hideTooltip(e.trigger);
                    console.log(e);
                });

                $('.copyButton').tooltip({
                    trigger: 'click',
                    placement: 'bottom'
                });

                $('pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });

                /* preventDefault on buttons */
                for (var i = 0, l = btns.length; i < l; i++) {
                    btns[i].addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                    });
                }
            }

        };

        return publicAPI;
    })();

    $(document).ready(styleGuide.init);

Also, would executing the ready function like this $(document).ready(function(){styleGuide.init}); encapsulate the module further? Meaning, there would be no chance the styleGuide module could overwritten?

\$\endgroup\$
2
\$\begingroup\$

Interesting question, your code is very readable.

However, if you only reveal an init function, then really there is not much sense in using a revealing pattern.

I would probably not self execute styleGuideHandler but pass it to the jQuery call:

$(document).ready(styleGuideHandler);

Other than that, just for giggles, I might also pass the few globals it uses:

$(document).ready(styleGuideHandler( document, Clipboard, hljs ));

Then when styleGuideHandler is executed, you run the code in init.

\$\endgroup\$
  • \$\begingroup\$ Thank you so much Konijn! I tried to refactor the original code based on what you prescribed. On last thing—let's say someone in the future added a script tag with a function object with the same name before this $(document).ready((function(){styleGuide.init}());, Would wrapping the function object in a IIFE like I did here when passing it to the document.ready act as a protective wrapper of sorts? \$\endgroup\$ – Antonio Pavicevac-Ortiz Dec 8 '16 at 18:32
  • \$\begingroup\$ @AntonioOrtiz Not really, I see no added value \$\endgroup\$ – konijn Dec 9 '16 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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