var globalVar = '我是全局變量';
function globalFunction() {
    console.log('我是全局函數(shù)');
}

// 在瀏覽器中
console.log(window.globalVar); // "我是全局變量"
console.log(window.globalFunction === globalFunction); // true

function createModule() {
    var privateVar = '內(nèi)部變量'; // 外部無法訪問
    
    return {
        publicMethod: function() {
            return privateVar;
        }
    };
}

var module = createModule();
console.log(module.privateVar); // undefined
console.log(module.publicMethod()); // "內(nèi)部變量"

{
    let blockScopedVar = '塊級作用域變量';
    const BLOCK_CONST = '塊級常量';
}

console.log(blockScopedVar); // ReferenceError
console.log(BLOCK_CONST); // ReferenceError

// 創(chuàng)建或復(fù)用命名空間
var MyApp = MyApp || {};

// 在命名空間下定義模塊
MyApp.Utils = {
    formatDate: function(date) {
        return date.toLocaleDateString();
    },
    generateId: function() {
        return 'id-' + Math.random().toString(36).substr(2, 9);
    }
};

MyApp.Components = {
    Modal: function() {
        // 模態(tài)框?qū)崿F(xiàn)
    },
    Toast: function() {
        //  toast 實現(xiàn)
    }
};

// 使用
MyApp.Utils.formatDate(new Date());

// 基本IIFE
(function() {
    var privateVar = '私有變量';
    
    function privateFunction() {
        console.log(privateVar);
    }
    
    // 暴露到全局
    window.MyModule = {
        publicMethod: function() {
            privateFunction();
        }
    };
})();

// 增強的IIFE：注入依賴
(function(global, $) {
    var privateData = [];
    
    function privateHelper() {
        // 使用jQuery
        $('#element').hide();
    }
    
    global.MyAdvancedModule = {
        addData: function(item) {
            privateData.push(item);
            privateHelper();
        },
        getData: function() {
            return privateData.slice();
        }
    };
})(window, jQuery);

// 使用
MyModule.publicMethod();
MyAdvancedModule.addData('test');

// math.js
function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

// 導(dǎo)出方式1：逐個導(dǎo)出
exports.add = add;
exports.multiply = multiply;

// 導(dǎo)出方式2：整體導(dǎo)出
module.exports = {
    add,
    multiply,
    PI: 3.14159
};

// 導(dǎo)入
const math = require('./math.js');
console.log(math.add(2, 3)); // 5

// 解構(gòu)導(dǎo)入
const { add, multiply } = require('./math.js');
console.log(multiply(2, 3)); // 6

// utils.js - 導(dǎo)出方式
// 命名導(dǎo)出
export function formatDate(date) {
    return date.toISOString().split('T')[0];
}

export const API_BASE = 'https://api.example.com';

// 默認導(dǎo)出
export default function() {
    console.log('默認導(dǎo)出函數(shù)');
}

// main.js - 導(dǎo)入方式
// 導(dǎo)入命名導(dǎo)出
import { formatDate, API_BASE } from './utils.js';

// 導(dǎo)入默認導(dǎo)出
import defaultFunction from './utils.js';

// 全部導(dǎo)入作為命名空間
import * as Utils from './utils.js';

// 動態(tài)導(dǎo)入
async function loadModule() {
    const module = await import('./utils.js');
    module.formatDate(new Date());
}

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module", // 指定使用ES模塊
  "main": "dist/index.js", // CommonJS入口
  "module": "dist/index.esm.js", // ESM入口
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    },
    "./utils": "./dist/utils.js"
  }
}

import _ from 'lodash'; // 不會污染全局作用域
import axios from 'axios';

// 即使多個庫都有"utils"，也不會沖突
import { utils as lodashUtils } from 'lodash';
import { utils as axiosUtils } from 'axios';

// 團隊前綴約定
const TEAM_PREFIX = 'ACME_';

// 模塊前綴
function acme_ui_dialog() { /* UI團隊的對話框 */ }
function acme_data_fetch() { /* 數(shù)據(jù)團隊的數(shù)據(jù)獲取 */ }

// 或者使用更現(xiàn)代的方式
const UI = {
    dialog: function() { /* ... */ }
};

const Data = {
    fetch: function() { /* ... */ }
};

// .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'eslint:recommended'
    ],
    rules: {
        'no-redeclare': 'error',
        'no-unused-vars': 'warn',
        'no-global-assign': 'error'
    }
};

// utils.ts
namespace MyUtils {
    export function formatDate(date: Date): string {
        return date.toISOString();
    }
}

// 其他文件嘗試定義同名命名空間會報錯
namespace MyUtils { // 錯誤：重復(fù)的命名空間標(biāo)識符
    export function anotherFunction() {}
}

// 模塊方式更推薦
export function formatDate(date: Date): string {
    return date.toISOString();
}

// 安全的全局?jǐn)U展
if (!Array.prototype.find) {
    Array.prototype.find = function(predicate) {
        // polyfill 實現(xiàn)
    };
}

// 使用 Symbol 避免沖突
const MY_LIB_KEY = Symbol('my_lib_storage');

if (!window[MY_LIB_KEY]) {
    window[MY_LIB_KEY] = {
        // 庫的私有狀態(tài)
    };
}

// 方法1：使用noConflict模式（如jQuery）
var $myJQuery = jQuery.noConflict();

// 方法2：重新封裝
function createWrapper(lib) {
    return {
        // 自定義接口
    };
}

const myLibWrapper = createWidget(conflictingLib);

// 使用 Shadow DOM 進行樣式隔離
class MicroFrontend extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>/* 作用域內(nèi)的樣式 */</style>
            <div>微前端內(nèi)容</div>
        `;
    }
}

customElements.define('micro-frontend', MicroFrontend);