[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"article-js模块化":22,"comments-js模块化":43,"footer-socials":44},{"site_title":4,"site_subtitle":5,"home_intro":6,"avatar":7,"seo_keywords":8,"seo_description":9,"site_subtitle_highlight":10,"home_description":11,"about_name":12,"about_intro":13,"code_comment_2":14,"code_log":15,"code_skills":16,"code_goal":17,"code_comment_1":18,"meteor_density":19,"meteor_max_count":19,"meteor_enabled":20,"meteor_speed":21},"ShineGoldYao","架构代码，","全栈开发者 \u002F 开源爱好者 \u002F 技术探索者","https:\u002F\u002Fforuda.gitee.com\u002Favatar\u002F1762402862010015318\u002F16382196_yaoxingjin_1762402861.png!avatar200","ShiGoldYao,技术博客,全栈开发","专注于前沿技术分享与开源项目展示的个人技术博客","书写未来。","大家好，我是 ShiGoldYao。一名全栈学习与技术爱好者。在这里，我分享关于现代 Web 开发、技术框架学习记录以及极客生活的深度思考。","ShiGoldYao","我是一名全栈技术学习者，对构建高性能、可扩展的现代 Web 应用充满热情。过去一年里，我从初识互联网前后端开发，到逐步沉淀技术体系，始终保持着对前端、后端与工程化的持续探索。\n\n我坚信 “代码如诗”。除了日常学习与项目实践，我也会花大量时间关注开源社区，尝试摸索 WebAssembly、Rust 等前沿技术在浏览器端的更多可能，不断挑战性能与体验的边界。\n\n生活里的我并不只有代码：闲暇时会打打永劫无间，享受博弈与操作的快感；也喜欢打乒乓球，在运动中放松自己；当然，最幸福的时光，还是和女朋友一起慢慢生活、认真恋爱。","\u002F\u002F 🚀 开启学习之旅","","Vue , TypeScript , Nest , Mysql","成为优秀的前端全栈工程师","\u002F\u002F 欢迎来到我的技术世界","3","true","5",{"id":23,"title":24,"slug":25,"coverUrl":15,"summary":15,"content":26,"htmlContent":27,"categoryId":28,"viewCount":29,"likeCount":30,"isTop":30,"isPublish":31,"seoKeywords":15,"seoDescription":15,"publishTime":32,"createTime":33,"updateTime":34,"deleteTime":35,"category":36,"tags":42},"7","1 - 模块化概述","js模块化","# 1 - 模块化概述\n\n## 1.1 什么是模块化\n\n* 将程序文件依据一定规则**拆分**成多个文件，这种编码方式就是**模块化**的编码方式\n* 拆分出来**每个文件就是一个模块**，模块中的数据都是**私有的**，模块之间互相**隔离**\n* 同时也能通过一些手段，可以把模块内的指定数据**交出去**，供其他模块使用\n\n\n\n## 1.2 为什么需要模块化\n\n随着应用的复杂度越来越高，其代码量和文件数量都会急剧增加，会引发以下问题：\n\n​\t**1.全局污染问题**\n\n​\t**2.依赖混乱问题**\n\n​\t**3.数据安全问题**\n\n# 2 - 有哪里模块化规范\n\n​\t1.CommonJS----服务端应用广泛\n\n​\t2.ES6 模块化-----浏览器端应用广泛\n\n\n\n# 3 - CommonJS 规范\n\n### 3.1 导出数据\n\n在这个标准中，导出数据有两种\n\n* module.exports = value\n* exports.name = value\n\n```javascript\nexports.name = name\nexports.slogan = slogan\n\nmodule.exports = name\nmodule.exports = slogan\n\n```\n\n注意：\n\n1. 每个模块内部的：this，exports，module.exports,在初始时，都指向同一个空对象，该空对象就是当前模块导出的数据\n2. 无论如何修改导出的对象，最终导出的都是 module.exports 的值\n\n\n\n## 3.2 导入数据\n\n在cjs 模块化规范标准中，使用内置的 require 函数进行导入数据\n\n```javascript\nconst school = require('.\u002Fschool')\nconst student = require('.\u002Fstudent')\n\n\u002F\u002F 引入同时结构要用的数据\nconst { name ,slogan ,getTal} = require('.\u002Fschool')\n\u002F\u002F 同时重名名\nconst { name:stuname ,motto ,getww} = require('.\u002Fstudent')\n\n```\n\n\n\n## 3.3 扩展理解\n\n一个 JS 模块在执行时，是被包裹在一个内置函数中执行的，所以每个模块都有自己的作用域,通过以下方式验证\n\n```javascript\nconsole.log(arguments);\nconsole.log(arguments.callee.toString());\n```\n\n\n\n## 3.4 浏览器端运行\n\nNode.js 默认是支持 Cjs 规范的，但浏览器端不支持，所以经过编译，步骤如下:\n\n1. 全局安装 browserify : **npm i browserify -g**\n\n2. 编译  **browserify index.js -o build.js**（index.js 是源文件，build.js 是输出的目标文件）\n\n3. 在页面中引用\n\n   ```javascript\n       \u003Cscript src=\".\u002Fbuild.js\">\u003C\u002Fscript>\n   ```\n\n\n\n\n# 4 - ES6 模块化规范\n\n## 4.1 初步体验(需要解决同源策略问题CROS)\n\n```html\n\u003C!-- module这是识别es6规范的标志 -->\n\n\u003Cscript type=\"module\" src=\".\u002Findex.js\">\u003C\u002Fscript>\n```\n\n\n\n```javascript\n\u002F\u002F index.js文件\nimport * as school from '.\u002Fschool.js'\nconsole.log(school);\n\u002F\u002F console.log(222);\n\n\u002F\u002F student.js文件\nexport const name = '姚兴金'\n export const motto = '前端真牛逼'\n\n export function getTel (){\n    return '232131'\n}\n```\n\n\n\n## 4.2 Node 中运行 ES6 模块\n\n新建package.json文件，配置\n\n```json\n{\n    \"type\": \"module\"\n}\n```\n\n\n\n## 4.3 导出数据\n\n分别导出，统一导出，默认导出\n\n```javascript\n\u002F\u002F 分别导出 export\nexport const name = '山东管理学院'\nexport const slogan = '博学笃行'\n\nfunction getTel (){\n    return '45-4-34-2'\n}\n export function getCities (){\n    return '丁香路3500号'\n} \n\n\u002F\u002F 统一导出  注意；不是对象\nexport {name}\nexport {name,slogan}\n\n\u002F\u002F 默认导出是一个对象，key为 default\nexport default {name,slogan,getTel}\n```\n\n\n\n## 4.4 导入数据\t(后缀名不要忘记)\n\n1. 导入全部   (通用)\n\n   ```javascript\n   import * as school from '.\u002Fschool.js'  \u002F\u002F 后缀名必须有\n   console.log(school);\n   \u002F\u002F console.log(222);\n   \n   ```\n\n2. 命名导入（分别导出，统一导出）\n\n   ```javascript\n   import { name,motto,getTel} from \".\u002Fstudent.js\";\n   console.log(name);\n   console.log(motto);\n   console.log(getTel());\n   \n   \u002F\u002F as 改名\n   import { name as name1,motto,getTel} from \".\u002Fstudent.js\";\n   \n   ```\n\n3. 默认导入（默认导出）\n\n   ```javascript\n   import obj from '.\u002Fstudent.js'\n   console.log(obj);\n   console.log(obj.name);\n   console.log(obj.motto);\n   console.log(obj.getTel());\n   \n   ```\n\n4. 命名导入，默认导入混合\n\n   ```javascript\n   \u002F\u002F 导入\n   import xyz,{name,motto} from '.\u002Fstudent.js'\n   console.log(xyz());\n   console.log(name);\n   console.log(motto);\n   \n   \u002F\u002F 导出\n    export const name = '姚兴金'\n     const motto = '前端真牛逼'\n   \n     function getTel (){\n       return '232131'\n   }\n   function getHobby(){\n       return '学习'\n   }\n   export {motto}\n   export default getTel   \u002F\u002F 注意这里不要加{}  \n   \n   ```\n\n5. 动态导入（通用）\n\n   ```javascript\n   const btn = document.querySelector('button')\n   btn.onclick = async() =>{\n       const result = await import('.\u002Fschool.js')\n       console.log(result);\n       \n   }\n   ```\n\n6. import 可以不接受任何数据\n\n   ```javascript\n   import '.\u002Fstudent.js' \n   ```\n\n\n\n## 4.5 数据引用问题\n\n1. 如下代码输出结果是什么？\n\n   ```javascript\n   function count(){\n       let sum = 1\n       function increment(){\n           sum += 1\n       }\n       return {sum,increment}\n   }\n   const {sum,increment} = count()  \u002F\u002F 不用解构  const coount = count()\n   \n   console.log(sum);  \u002F\u002F 1    \u002F\u002Fconsole.log(counter.sum)\n   increment()    \u002F\u002F counter.increment();\n   increment()    \u002F\u002F counter.increment();\n   console.log(sum);  \u002F\u002F 1    console.log(counter.sum)\n   \n   \n   ```\n\n2. 用·CommonJS 规范\n\n   ```javascript\n   const {sum,increment } = require('.\u002Fdemo.js')\n   console.log(sum);  \u002F\u002F 1 类似sum的复制品\n   increment()  \u002F\u002F sum的变化\n   increment()\n   console.log(sum);  \u002F\u002F1 \n   \n   \u002F\u002F demo.js\n   let sum = 1\n    function increment (){\n       sum + 1\n       console.log('data',sum);\n    }\n   module.exports = {sum,increment}\n   ```\n\n3. ES6 模块化规范(共用一块内存空间)\n\n   ```javascript\n   \u002F\u002F import 当常量引入 不能修改，只能用\n   import { sum, increment } from \".\u002Fes.js\";\n   console.log(sum);  \u002F\u002F1 \n   increment()   \u002F\u002F data,2\n   increment()   \u002F\u002Fdata,3\n   console.log(sum);   \u002F\u002F3 \n   \n   \u002F\u002F es.js\n   \n   let sum = 1\n   function increment(){\n       sum += 1\n       console.log('data',sum);\n       \n   }\n   export {sum,increment}\n   \n   \u002F\u002F let 改 count 就可以\n   const sum = 1\n   function increment(){\n       sum += 1\n       console.log('data',sum);\n       \n   }\n   export {sum,increment}\n   \n   ```\n\n   ",null,"1",8,0,1,"2026-04-07T16:12:35.480Z","2026-04-07T16:12:35.482Z","2026-06-11T04:39:22.572Z","0",{"id":28,"categoryName":37,"slug":38,"description":39,"sort":30,"isEnable":31,"createTime":40,"updateTime":41,"deleteTime":30},"前端开发","frontend-engineering","2222","2026-04-03T02:36:11.945Z","2026-04-07T16:38:46.496Z",[],[],[]]