如何优化含多函数的浏览器库作用域？（最佳实践）

Nice work getting started on your first JavaScript library—you’re already off to a solid start using an IIFE to contain scope and avoid polluting the global namespace! Let’s walk through some refinements to make your code cleaner, more maintainable, and robust across browsers, iframes, and web workers.

1. Simplify & Reliable Environment Detection #

Your current detection logic works, but we can tighten it up for clarity and compatibility:

• Web Workers don’t have a window object, so we can check for that directly
• The iframe detection’s try/catch is smart (handles cross-domain restrictions), let’s keep that but clean up the syntax

2. Centralize Module Structure #

Instead of scattering properties onto window piecemeal, create a single core module object. This keeps your API organized and makes it easier to safely expose only what’s needed to the global scope.

3. Safe Global Exposure #

Always check if window.MyModule already exists before overwriting it—use Object.assign to merge your new module with any existing one, preventing conflicts with other scripts.

4. Refine the Loader’s Ready Callback #

Make sure the ready queue executes automatically once your library loads, and clean up the queue afterward to avoid redundant calls.

Optimized MyModule.js #

(function(global) {
    // Private utility: Detect runtime environment
    function isWebWorker() {
        // Web Workers lack window, use self as the global context
        return typeof window === 'undefined' && typeof self !== 'undefined';
    }

    function isIFrame() {
        try {
            return self !== top;
        } catch (e) {
            // Cross-domain access throws an error—we’re definitely in an iframe
            return true;
        }
    }

    // Private core functionality (all hidden from global scope)
    function createModal() { /* Your implementation here */ }
    function clickModal() { /* Your implementation here */ }
    function calculate() { /* Your implementation here */ }
    function draw() { /* Your implementation here */ }
    function createWorker() { /* Your implementation here */ }

    // Core module container
    const MyModule = {};

    // Environment-specific setup
    if (isWebWorker()) {
        // Web Worker-only API
        MyModule.WorkerUtils = function() {};
        MyModule.WorkerUtils.prototype.size = 512;
        MyModule.WorkerUtils.prototype.calc = calculate;

        // Expose to Worker global context
        global.MyModule = MyModule;
    } else {
        // Browser window (main or iframe) API
        MyModule.createModal = createModal;
        MyModule.clickModal = clickModal;

        // Drawer class (publicly exposed)
        MyModule.Drawer = function() {
            this.drawtime = null;
        };
        MyModule.Drawer.prototype.draw = draw;

        // Safely merge with existing MyModule if it exists
        if (global.MyModule) {
            Object.assign(global.MyModule, MyModule);
        } else {
            global.MyModule = MyModule;
        }
    }
})(typeof self !== 'undefined' ? self : this);

Optimized includeMyModule.js #

(function(global) {
    const MODULE_NAME = 'MyModule';

    // Initialize module container and ready queue if it doesn’t exist
    if (!global[MODULE_NAME]) {
        global[MODULE_NAME] = {
            _readyQueue: []
        };
    }

    // Ready method: Register callbacks or run immediately if module is loaded
    global[MODULE_NAME].ready = function(callback) {
        if (typeof callback !== 'function') return;
        
        // If module is already initialized, run callback right away
        if (global[MODULE_NAME].Drawer) {
            callback();
        } else {
            global[MODULE_NAME]._readyQueue.push(callback);
        }
    };

    // Load the library script
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = '/MyModule.min.js';

    // Execute all ready callbacks once script loads
    script.onload = function() {
        global[MODULE_NAME]._readyQueue.forEach(callback => callback());
        // Clean up queue to prevent duplicate executions
        delete global[MODULE_NAME]._readyQueue;
    };

    // Insert script into the DOM
    const firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);
})(window);

Bonus Best Practices #

• Consistent Naming: Use PascalCase for classes (like Drawer) and camelCase for functions/variables to keep your code readable.
• JSDoc Comments: Add comments to your public API to document usage for future you or other developers.
• ES6+ Compatibility: If your target environments support it, you could use let/const (as we did) and arrow functions, but the IIFE pattern keeps things compatible with older browsers.

内容的提问来源于stack exchange，提问作者Jayd