[{"data":1,"prerenderedAt":203},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fjs-module-systems":3,"docs-all":99},{"id":4,"title":5,"body":6,"category":82,"date":83,"description":84,"draft":85,"extension":86,"meta":87,"navigation":88,"path":89,"seo":90,"source":91,"stem":92,"tags":93,"__hash__":98},"docs\u002Fdocs\u002Fjs-module-systems.md","JavaScript 模块化方案",{"type":7,"value":8,"toc":74},"minimark",[9,13,17,20,23,26,29,33,36,39,42,45,49,52,55,58,62,65,68,71],[10,11,12],"h1",{"id":12},"模块化",[14,15,16],"p",{},"模块化进化史：",[14,18,19],{},"最早写代码，全局Global变量容易被污染，很容易命名冲突。",[14,21,22],{},"简单封装Namespace模式：减少Global上的变量数目；本质是对象，不安全。",[14,24,25],{},"匿名闭包，IIFE模式：函数是JavaScript唯一的Local Scope。",[14,27,28],{},"再增强一点，引入依赖：模块模式，现代模块实现的基石。",[30,31,32],"h2",{"id":32},"为什么要模块化",[14,34,35],{},"避免命名冲突(减少命名空间污染)",[14,37,38],{},"更好的分离，按需加载。",[14,40,41],{},"提高复用性。",[14,43,44],{},"高可维护性。",[30,46,48],{"id":47},"es6模块规范","ES6模块规范",[14,50,51],{},"依赖模块需要编译打包处理。",[14,53,54],{},"导出模块：export        引入模块：import",[14,56,57],{},"实现(浏览器端)：",[30,59,61],{"id":60},"es6_babel_browserify使用","ES6_Babel_Browserify使用",[14,63,64],{},"1、定义package.json文件",[14,66,67],{},"2、安装babel-cli，babel-preset-es2015和browserify",[14,69,70],{},"3、定义.babelrc文件",[14,72,73],{},"4、编码",{"title":75,"searchDepth":76,"depth":76,"links":77},"",3,[78,80,81],{"id":32,"depth":79,"text":32},2,{"id":47,"depth":79,"text":48},{"id":60,"depth":79,"text":61},"fundamentals","2024-11-03","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。",false,"md",{},true,"\u002Fdocs\u002Fjs-module-systems",{"title":5,"description":84},null,"docs\u002Fjs-module-systems",[94,95,96,97],"javascript","module-system","es6","notes","CC_0BDZI0kOYpbUv417g-5Q18CvuBOPyUlof3ibtXsk",[100,111,120,126,136,142,151,156,164,169,171,177,184,191,197],{"path":101,"title":102,"description":103,"date":104,"category":105,"tags":106},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[107,108,94,96,109,110],"html","css","best-practice","guide",{"path":112,"title":113,"description":114,"date":115,"category":116,"tags":117},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[118,119],"windows","cheatsheet",{"path":121,"title":122,"description":123,"date":124,"category":116,"tags":125},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[94,119],{"path":127,"title":128,"description":129,"date":130,"category":131,"tags":132},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09","visualization",[133,134,135,109],"canvas","svg","performance",{"path":137,"title":138,"description":139,"date":83,"category":116,"tags":140},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。",[141,108,97],"font",{"path":143,"title":144,"description":145,"date":83,"category":146,"tags":147},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[148,149,150,135,97],"browser","http","network",{"path":152,"title":153,"description":154,"date":83,"category":146,"tags":155},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[108,107,109,97],{"path":157,"title":158,"description":159,"date":83,"category":146,"tags":160},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[161,94,162,163,97],"vue","webpack","vite",{"path":165,"title":166,"description":167,"date":83,"category":146,"tags":168},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[94,96,97],{"path":89,"title":5,"description":84,"date":83,"category":82,"tags":170},[94,95,96,97],{"path":172,"title":173,"description":174,"date":83,"category":82,"tags":175},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[176,150,94,97],"websocket",{"path":178,"title":179,"description":180,"date":181,"category":131,"tags":182},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[183,94,97],"gojs",{"path":185,"title":186,"description":187,"date":188,"category":131,"tags":189},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[190,94,119],"echarts",{"path":192,"title":193,"description":194,"date":195,"category":82,"tags":196},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[149,150,119],{"path":198,"title":199,"description":200,"date":201,"category":82,"tags":202},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[107,97,119],1788337378698]