Clipboard support in jQuery using revealing module pattern

Question

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?

Answer 1

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.