{"id":298,"date":"2026-03-19T22:33:43","date_gmt":"2026-03-19T14:33:43","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=298"},"modified":"2026-03-19T22:33:43","modified_gmt":"2026-03-19T14:33:43","slug":"day-27-%e6%a8%a1%e5%9d%97%e5%8c%96%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=298","title":{"rendered":"Day-27-\u6a21\u5757\u5316\u5f00\u53d1"},"content":{"rendered":"

Day 27: \u6a21\u5757\u5316\u5f00\u53d1<\/h1>\n
\n

\ud83d\udcc5 \u65e5\u671f: 2026\u5e7403\u670819\u65e5
\n\ud83c\udfaf \u5b66\u4e60\u76ee\u6807: \u638c\u63e1 ES6 \u6a21\u5757\u5316\uff0c\u5b66\u4f1a\u7ec4\u7ec7\u548c\u7ba1\u7406\u5927\u578b\u9879\u76ee\u4ee3\u7801
\n\u23f1\ufe0f \u9884\u8ba1\u7528\u65f6: 2-3 \u5c0f\u65f6
\n\ud83d\udcc2 \u5206\u7c7b: 10-\u73b0\u4ee3JavaScript<\/p>\n<\/blockquote>\n

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n

\u901a\u8fc7\u4eca\u5929\u7684\u5b66\u4e60\uff0c\u4f60\u5c06\uff1a<\/p>\n

    \n
  1. \u7406\u89e3\u6a21\u5757\u5316\u601d\u60f3<\/strong>\uff1a\u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316<\/li>\n
  2. \u638c\u63e1 ES6 \u6a21\u5757\u8bed\u6cd5<\/strong>\uff1aexport\u3001import\u3001default<\/li>\n
  3. \u5b66\u4f1a\u4ee3\u7801\u7ec4\u7ec7<\/strong>\uff1a\u6587\u4ef6\u7ed3\u6784\u3001\u547d\u540d\u89c4\u8303<\/li>\n
  4. \u5b9e\u8df5\u4f9d\u8d56\u7ba1\u7406<\/strong>\uff1anpm\u3001yarn\u3001package.json<\/li>\n
  5. \u5e94\u7528\u5b9e\u6218\u573a\u666f<\/strong>\uff1a\u6784\u5efa\u53ef\u7ef4\u62a4\u7684\u5927\u578b\u9879\u76ee<\/li>\n<\/ol>\n
    \n

    \ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n

    1. \u4ec0\u4e48\u662f\u6a21\u5757\u5316<\/h3>\n

    \u6a21\u5757\u5316<\/strong>\u662f\u5c06\u4ee3\u7801\u62c6\u5206\u6210\u72ec\u7acb\u3001\u53ef\u590d\u7528\u7684\u5355\u5143\uff08\u6a21\u5757\uff09\uff0c\u6bcf\u4e2a\u6a21\u5757\u6709\u81ea\u5df1\u7684\u4f5c\u7528\u57df\uff0c\u53ea\u66b4\u9732\u5fc5\u8981\u7684\u63a5\u53e3\u3002<\/p>\n

    \/\/ \u274c \u6ca1\u6709\u6a21\u5757\u5316\uff1a\u5168\u5c40\u53d8\u91cf\u6c61\u67d3\nvar name = "\u5f20\u4e09";\nvar age = 25;\n\n\/\/ \u591a\u4e2a\u811a\u672c\u6587\u4ef6\u53ef\u80fd\u4e92\u76f8\u8986\u76d6\n\/\/ \u53d8\u91cf\u540d\u51b2\u7a81\u3001\u4f9d\u8d56\u6df7\u4e71\n\n\/\/ \u2705 \u6a21\u5757\u5316\uff1a\u72ec\u7acb\u4f5c\u7528\u57df\n\/\/ user.js\nexport const name = "\u5f20\u4e09";\nexport const age = 25;\n\n\/\/ main.js\nimport { name, age } from '.\/user.js';\n<\/code><\/pre>\n
    2. \u4e3a\u4ec0\u4e48\u9700\u8981\u6a21\u5757\u5316<\/h3>\n
    \u6a21\u5757\u5316\u7684\u597d\u5904<\/strong>\uff1a<\/p>\n
      \n
    1. \u907f\u514d\u547d\u540d\u51b2\u7a81<\/strong>\uff1a\u6bcf\u4e2a\u6a21\u5757\u6709\u72ec\u7acb\u4f5c\u7528\u57df<\/li>\n
    2. \u63d0\u9ad8\u4ee3\u7801\u590d\u7528<\/strong>\uff1a\u6a21\u5757\u53ef\u4ee5\u5728\u591a\u5904\u5f15\u7528<\/li>\n
    3. \u4fbf\u4e8e\u7ef4\u62a4<\/strong>\uff1a\u804c\u8d23\u6e05\u6670\u3001\u6613\u4e8e\u5b9a\u4f4d\u95ee\u9898<\/li>\n
    4. \u6309\u9700\u52a0\u8f7d<\/strong>\uff1a\u6d4f\u89c8\u5668\u53ea\u52a0\u8f7d\u9700\u8981\u7684\u6a21\u5757<\/li>\n
    5. \u66f4\u597d\u7684\u534f\u4f5c<\/strong>\uff1a\u56e2\u961f\u6210\u5458\u5e76\u884c\u5f00\u53d1\u4e0d\u540c\u6a21\u5757<\/li>\n<\/ol>\n
      3. ES6 \u6a21\u5757 vs CommonJS<\/h3>\n\n\n\n\n\n\n\n\n\n
      \u7279\u6027<\/th>\nES6 \u6a21\u5757<\/th>\nCommonJS<\/th>\n<\/tr>\n<\/thead>\n
      \u8bed\u6cd5<\/td>\nexport<\/code> \/ import<\/code><\/td>\nmodule.exports<\/code> \/ require<\/code><\/td>\n<\/tr>\n
      \u52a0\u8f7d\u65b9\u5f0f<\/td>\n\u7f16\u8bd1\u65f6\u52a0\u8f7d<\/td>\n\u8fd0\u884c\u65f6\u52a0\u8f7d<\/td>\n<\/tr>\n
      \u8f93\u51fa<\/td>\n\u503c\u7684\u5f15\u7528<\/td>\n\u503c\u7684\u62f7\u8d1d<\/td>\n<\/tr>\n
      \u4f7f\u7528\u573a\u666f<\/td>\n\u6d4f\u89c8\u5668 + Node.js<\/td>\n\u4e3b\u8981 Node.js<\/td>\n<\/tr>\n
      \u652f\u6301<\/td>\n\u539f\u751f\u652f\u6301<\/td>\n\u9700\u8981\u6784\u5efa\u5de5\u5177<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      \ud83d\udee0\ufe0f \u8bed\u6cd5\u8be6\u89e3<\/h2>\n
      1. export – \u5bfc\u51fa<\/h3>\n
      \u547d\u540d\u5bfc\u51fa\uff08Named Exports\uff09<\/h4>\n
      \/\/ utils.js\n\/\/ \u5bfc\u51fa\u53d8\u91cf\nexport const PI = 3.14159;\n\n\/\/ \u5bfc\u51fa\u51fd\u6570\nexport function add(a, b) {\n    return a + b;\n}\n\n\/\/ \u5bfc\u51fa\u7c7b\nexport class Calculator {\n    constructor() {\n        this.result = 0;\n    }\n    \n    add(num) {\n        this.result += num;\n        return this;\n    }\n}\n\n\/\/ \u4e5f\u53ef\u4ee5\u5148\u5b9a\u4e49\u540e\u5bfc\u51fa\nconst name = "\u5de5\u5177\u6a21\u5757";\nfunction greet() {\n    console.log("Hello!");\n}\nexport { name, greet };\n\n\/\/ \u5bfc\u51fa\u65f6\u91cd\u547d\u540d\nexport { add as sum, greet as hello };\n<\/code><\/pre>\n
      \u9ed8\u8ba4\u5bfc\u51fa\uff08Default Export\uff09<\/h4>\n
      \/\/ calculator.js\n\/\/ \u6bcf\u4e2a\u6a21\u5757\u53ea\u80fd\u6709\u4e00\u4e2a\u9ed8\u8ba4\u5bfc\u51fa\nexport default class Calculator {\n    constructor() {\n        this.result = 0;\n    }\n    \n    add(num) {\n        this.result += num;\n        return this;\n    }\n}\n\n\/\/ \u6216\u8005\nclass Calculator {\n    \/\/ ...\n}\nexport default Calculator;\n\n\/\/ \u5bfc\u51fa\u8868\u8fbe\u5f0f\nexport default function(a, b) {\n    return a + b;\n}\n<\/code><\/pre>\n
      \u6df7\u5408\u5bfc\u51fa<\/h4>\n
      \/\/ \u540c\u65f6\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u548c\u9ed8\u8ba4\u5bfc\u51fa\nexport default class Calculator {\n    \/\/ ...\n}\n\nexport const VERSION = "1.0.0";\nexport function help() {\n    console.log("\u4f7f\u7528\u5e2e\u52a9...");\n}\n<\/code><\/pre>\n
      2. import – \u5bfc\u5165<\/h3>\n
      \u5bfc\u5165\u547d\u540d\u5bfc\u51fa<\/h4>\n
      \/\/ main.js\n\/\/ \u5bfc\u5165\u7279\u5b9a\u7684\u5bfc\u51fa\nimport { PI, add, Calculator } from '.\/utils.js';\n\n\/\/ \u5bfc\u5165\u5e76\u91cd\u547d\u540d\nimport { add as sum, name as moduleName } from '.\/utils.js';\n\n\/\/ \u5bfc\u5165\u6240\u6709\u5bfc\u51fa\uff08\u7ed1\u5b9a\u5230\u5bf9\u8c61\uff09\nimport * as utils from '.\/utils.js';\nconsole.log(utils.PI);\nconsole.log(utils.add(1, 2));\n<\/code><\/pre>\n
      \u5bfc\u5165\u9ed8\u8ba4\u5bfc\u51fa<\/h4>\n
      \/\/ main.js\n\/\/ \u5bfc\u5165\u9ed8\u8ba4\u5bfc\u51fa\uff08\u4e0d\u9700\u8981\u5927\u62ec\u53f7\uff09\nimport Calculator from '.\/calculator.js';\n\nconst calc = new Calculator();\ncalc.add(5).add(3);\nconsole.log(calc.result);\n<\/code><\/pre>\n
      \u6df7\u5408\u5bfc\u5165<\/h4>\n
      \/\/ \u540c\u65f6\u5bfc\u5165\u9ed8\u8ba4\u5bfc\u51fa\u548c\u547d\u540d\u5bfc\u51fa\nimport Calculator, { VERSION, help } from '.\/calculator.js';\n<\/code><\/pre>\n
      \u53ea\u5bfc\u5165\u526f\u4f5c\u7528<\/h4>\n
      \/\/ \u6709\u4e9b\u6a21\u5757\u53ea\u6267\u884c\u526f\u4f5c\u7528\uff0c\u4e0d\u5bfc\u51fa\u4efb\u4f55\u5185\u5bb9\nimport '.\/polyfill.js';\nimport '.\/styles.css';\n<\/code><\/pre>\n
      3. \u52a8\u6001\u5bfc\u5165\uff08Dynamic Import\uff09<\/h3>\n
      \/\/ \u8fd0\u884c\u65f6\u52a8\u6001\u52a0\u8f7d\u6a21\u5757\nasync function loadModule() {\n    const { add } = await import('.\/utils.js');\n    console.log(add(1, 2));\n}\n\n\/\/ \u6309\u9700\u52a0\u8f7d\nbutton.addEventListener('click', async () => {\n    const module = await import('.\/heavy-module.js');\n    module.doSomething();\n});\n<\/code><\/pre>\n
      \n
      \ud83c\udfae \u5b9e\u6218\u793a\u4f8b<\/h2>\n
      \u793a\u4f8b 1\uff1a\u5de5\u5177\u6a21\u5757<\/h3>\n
      \/\/ utils\/string.js\n\/\/ \u5b57\u7b26\u4e32\u5de5\u5177\u51fd\u6570\nexport function capitalize(str) {\n    return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport function truncate(str, length) {\n    return str.length > length \n        ? str.slice(0, length) + '...' \n        : str;\n}\n\nexport function slugify(str) {\n    return str\n        .toLowerCase()\n        .trim()\n        .replace(\/\\s+\/g, '-')\n        .replace(\/[^\\w-]+\/g, '');\n}\n\n\/\/ utils\/date.js\n\/\/ \u65e5\u671f\u5de5\u5177\u51fd\u6570\nexport function formatDate(date, format = 'YYYY-MM-DD') {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    \n    return format\n        .replace('YYYY', year)\n        .replace('MM', month)\n        .replace('DD', day);\n}\n\nexport function addDays(date, days) {\n    const result = new Date(date);\n    result.setDate(result.getDate() + days);\n    return result;\n}\n\n\/\/ utils\/index.js\n\/\/ \u7edf\u4e00\u5bfc\u51fa\u6240\u6709\u5de5\u5177\u6a21\u5757\nexport * from '.\/string.js';\nexport * from '.\/date.js';\n<\/code><\/pre>\n
      \u793a\u4f8b 2\uff1aAPI \u6a21\u5757<\/h3>\n
      \/\/ api\/config.js\n\/\/ API \u914d\u7f6e\nexport const BASE_URL = 'https:\/\/api.example.com';\nexport const TIMEOUT = 5000;\nexport const HEADERS = {\n    'Content-Type': 'application\/json',\n};\n\n\/\/ api\/request.js\n\/\/ HTTP \u8bf7\u6c42\u5c01\u88c5\nimport { BASE_URL, TIMEOUT, HEADERS } from '.\/config.js';\n\nexport async function request(endpoint, options = {}) {\n    const url = `${BASE_URL}${endpoint}`;\n    \n    const config = {\n        ...options,\n        headers: {\n            ...HEADERS,\n            ...options.headers,\n        },\n    };\n    \n    const controller = new AbortController();\n    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT);\n    \n    try {\n        const response = await fetch(url, {\n            ...config,\n            signal: controller.signal,\n        });\n        \n        clearTimeout(timeoutId);\n        \n        if (!response.ok) {\n            throw new Error(`HTTP ${response.status}`);\n        }\n        \n        return await response.json();\n    } catch (error) {\n        clearTimeout(timeoutId);\n        throw error;\n    }\n}\n\n\/\/ api\/user.js\n\/\/ \u7528\u6237\u76f8\u5173 API\nimport { request } from '.\/request.js';\n\nexport async function getUser(id) {\n    return await request(`\/users\/${id}`);\n}\n\nexport async function createUser(data) {\n    return await request('\/users', {\n        method: 'POST',\n        body: JSON.stringify(data),\n    });\n}\n\nexport async function updateUser(id, data) {\n    return await request(`\/users\/${id}`, {\n        method: 'PUT',\n        body: JSON.stringify(data),\n    });\n}\n\nexport async function deleteUser(id) {\n    return await request(`\/users\/${id}`, {\n        method: 'DELETE',\n    });\n}\n<\/code><\/pre>\n
      \u793a\u4f8b 3\uff1a\u7ec4\u4ef6\u6a21\u5757<\/h3>\n
      \/\/ components\/Button.js\n\/\/ \u6309\u94ae\u7ec4\u4ef6\nimport '.\/styles\/button.css';\n\nexport class Button {\n    constructor({ text, onClick, variant = 'primary' }) {\n        this.text = text;\n        this.onClick = onClick;\n        this.variant = variant;\n        this.element = this.render();\n    }\n    \n    render() {\n        const button = document.createElement('button');\n        button.className = `btn btn-${this.variant}`;\n        button.textContent = this.text;\n        \n        button.addEventListener('click', this.onClick);\n        \n        return button;\n    }\n    \n    mount(parent) {\n        parent.appendChild(this.element);\n    }\n    \n    unmount() {\n        this.element.remove();\n    }\n}\n\n\/\/ components\/Modal.js\n\/\/ \u6a21\u6001\u6846\u7ec4\u4ef6\nexport class Modal {\n    constructor({ title, content, onClose }) {\n        this.title = title;\n        this.content = content;\n        this.onClose = onClose;\n        this.element = this.render();\n    }\n    \n    render() {\n        const modal = document.createElement('div');\n        modal.className = 'modal';\n        modal.innerHTML = `\n            <div class="modal-overlay">\n                <div class="modal-content">\n                    <div class="modal-header">\n                        <h3>${this.title}<\/h3>\n                        <button class="modal-close">&times;<\/button>\n                    <\/div>\n                    <div class="modal-body">\n                        ${this.content}\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n        \n        const closeBtn = modal.querySelector('.modal-close');\n        closeBtn.addEventListener('click', () => this.close());\n        \n        return modal;\n    }\n    \n    open() {\n        document.body.appendChild(this.element);\n    }\n    \n    close() {\n        this.element.remove();\n        if (this.onClose) this.onClose();\n    }\n}\n<\/code><\/pre>\n
      \n
      \ud83d\udcc2 \u9879\u76ee\u7ed3\u6784<\/h2>\n
      \u63a8\u8350\u7684\u6587\u4ef6\u7ec4\u7ec7\u65b9\u5f0f<\/h3>\n
      project\/\n\u251c\u2500\u2500 index.html              # \u5165\u53e3 HTML\n\u251c\u2500\u2500 main.js                 # \u5165\u53e3 JS\n\u251c\u2500\u2500 package.json            # \u9879\u76ee\u914d\u7f6e\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 api\/                # API \u6a21\u5757\n\u2502   \u2502   \u251c\u2500\u2500 config.js\n\u2502   \u2502   \u251c\u2500\u2500 request.js\n\u2502   \u2502   \u2514\u2500\u2500 user.js\n\u2502   \u251c\u2500\u2500 components\/         # \u7ec4\u4ef6\u6a21\u5757\n\u2502   \u2502   \u251c\u2500\u2500 Button.js\n\u2502   \u2502   \u251c\u2500\u2500 Modal.js\n\u2502   \u2502   \u2514\u2500\u2500 index.js        # \u7edf\u4e00\u5bfc\u51fa\n\u2502   \u251c\u2500\u2500 utils\/              # \u5de5\u5177\u6a21\u5757\n\u2502   \u2502   \u251c\u2500\u2500 string.js\n\u2502   \u2502   \u251c\u2500\u2500 date.js\n\u2502   \u2502   \u2514\u2500\u2500 index.js\n\u2502   \u251c\u2500\u2500 styles\/             # \u6837\u5f0f\u6587\u4ef6\n\u2502   \u2502   \u2514\u2500\u2500 main.css\n\u2502   \u2514\u2500\u2500 assets\/             # \u9759\u6001\u8d44\u6e90\n\u2502       \u251c\u2500\u2500 images\/\n\u2502       \u2514\u2500\u2500 fonts\/\n\u2514\u2500\u2500 public\/                 # \u516c\u5171\u8d44\u6e90\n    \u2514\u2500\u2500 favicon.ico\n<\/code><\/pre>\n
      package.json \u914d\u7f6e<\/h3>\n
      {\n  "name": "my-project",\n  "version": "1.0.0",\n  "type": "module",\n  "main": "main.js",\n  "scripts": {\n    "start": "vite",\n    "build": "vite build",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "axios": "^1.6.0"\n  },\n  "devDependencies": {\n    "vite": "^5.0.0"\n  }\n}\n<\/code><\/pre>\n
      \u6ce8\u610f<\/strong>\uff1a"type": "module"<\/code> \u544a\u8bc9 Node.js \u4f7f\u7528 ES6 \u6a21\u5757\u3002<\/p>\n
      \n
      \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
      1. \u6a21\u5757\u7684\u52a0\u8f7d\u987a\u5e8f<\/h3>\n
      \/\/ \u2705 \u6b63\u786e\uff1a\u5148\u5bfc\u5165\u540e\u4f7f\u7528\nimport { utils } from '.\/utils.js';\nconsole.log(utils.formatDate(new Date()));\n\n\/\/ \u274c \u9519\u8bef\uff1a\u5728\u5bfc\u5165\u524d\u4f7f\u7528\nconsole.log(utils.formatDate(new Date()));  \/\/ ReferenceError\nimport { utils } from '.\/utils.js';\n<\/code><\/pre>\n
      2. \u5faa\u73af\u4f9d\u8d56<\/h3>\n
      \/\/ a.js\nimport { foo } from '.\/b.js';\nexport const bar = 'bar';\n\n\/\/ b.js\nimport { bar } from '.\/a.js';\nexport const foo = 'foo';\n\n\/\/ \u26a0\ufe0f \u53ef\u80fd\u5bfc\u81f4 undefined\n\/\/ \u89e3\u51b3\u65b9\u6848\uff1a\u91cd\u6784\u4ee3\u7801\uff0c\u907f\u514d\u5faa\u73af\u4f9d\u8d56\n<\/code><\/pre>\n
      3. this \u7684\u6307\u5411<\/h3>\n
      \/\/ ES6 \u6a21\u5757\u4e2d\uff0c\u9876\u7ea7 this \u662f undefined\nconsole.log(this);  \/\/ undefined\n\n\/\/ \u800c\u4e0d\u662f\u5168\u5c40\u5bf9\u8c61\uff08window\uff09\n<\/code><\/pre>\n
      4. import \u7684\u63d0\u5347<\/h3>\n
      \/\/ import \u4f1a\u88ab\u81ea\u52a8\u63d0\u5347\u5230\u6587\u4ef6\u9876\u90e8\nfunc();  \/\/ \u53ef\u4ee5\u6b63\u5e38\u5de5\u4f5c\n\nimport { func } from '.\/utils.js';\n\n\/\/ \u4f46\u4e3a\u4e86\u53ef\u8bfb\u6027\uff0c\u5efa\u8bae\u628a import \u653e\u5728\u6587\u4ef6\u5f00\u5934\n<\/code><\/pre>\n
      \n
      \ud83c\udf93 \u5b9e\u6218\u5e94\u7528\u573a\u666f<\/h2>\n
      \u573a\u666f 1: \u5927\u578b Web \u5e94\u7528<\/h3>\n
      \/\/ \u5e94\u7528\u5165\u53e3\nimport { Router } from '.\/router.js';\nimport { Store } from '.\/store.js';\nimport { App } from '.\/App.js';\n\nconst app = new App({\n    router: new Router(),\n    store: new Store(),\n});\n\napp.mount('#app');\n<\/code><\/pre>\n
      \u573a\u666f 2: \u5de5\u5177\u5e93\u5f00\u53d1<\/h3>\n
      \/\/ my-utils\/index.js\nexport * from '.\/string.js';\nexport * from '.\/array.js';\nexport * from '.\/object.js';\nexport * from '.\/date.js';\n\n\/\/ \u7528\u6237\u4f7f\u7528\nimport { capitalize, formatDate, debounce } from 'my-utils';\n<\/code><\/pre>\n
      \u573a\u666f 3: \u7ec4\u4ef6\u5e93<\/h3>\n
      \/\/ my-ui\/index.js\nexport { Button } from '.\/Button.js';\nexport { Modal } from '.\/Modal.js';\nexport { Input } from '.\/Input.js';\nexport { default as Card } from '.\/Card.js';\n\n\/\/ \u7528\u6237\u4f7f\u7528\nimport { Button, Modal, Input, Card } from 'my-ui';\n<\/code><\/pre>\n
      \n
      \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
      \u57fa\u7840\u7ec3\u4e60\uff08\u5fc5\u505a\uff09<\/h3>\n
        \n
      1. \n
        \u5bfc\u51fa\u5bfc\u5165<\/strong>\uff1a<\/p>\n