Dontla的博客

if (err) {else {console.log('写入成功')})if (err) {else {})/g表示全局匹配默认导出和导入命名导出和导入唯一出口文件index.js不是必须的，如果不存在，就会到package.json中去找定义的入口文件（main属性指定的入口文件）npm i具体参考文章：webpack介绍（现代JS应用静态模块打包工具，在内部构建依赖图，映射项目所需模块，生成打包后的文件）webpack.config.js。

01.AJAX概念和axios使用

Source Map 技术是现代前端开发中不可或缺的调试工具，它在保持代码优化的同时提供了良好的调试体验。合理使用 Source Map 可以显著提高开发效率和代码质量，但也需要注意在生产环境中的安全配置。随着前端技术的不断发展，Source Map 也将继续演进，为开发者提供更好的调试体验。

BootCDN是Bootstrap中文网联合支持并维护的前端开源项目免费CDN加速服务，致力于为Bootstrap、jQuery、React、Vue.js等优秀的前端开源项目提供稳定、快速的免费CDN加速服务。BootCDN所收录的开源项目主要同步于cdnjs开源项目仓库，目前已收录超过4387个前端开源项目。BootCDN作为国内领先的前端开源项目CDN加速服务，为开发者提供了强大、稳定、免费的资源加载解决方案。随着前端技术的不断发展，BootCDN也在不断扩充资源库，支持越来越多的优秀开源项目。

/ 序列化内部过程伪代码实现// 检查循环引用// 应用 replacer 函数（如果提供）// 根据数据类型处理${// 序列化内部过程伪代码实现 function pseudoStringify(value , replacer , space) {// 检查循环引用 const seen = new WeakSet();// 应用 replacer 函数（如果提供） if(typeof replacer === 'function') {

cross-env是一个简单而强大的npm工具包，它解决了在不同操作系统平台上设置环境变量的一致性问题。无论你使用的是Windows、macOS还是Linux，cross-env都能确保你的npm脚本能够以相同的方式运行。简化开发流程，提高团队协作效率消除平台差异，实现"编写一次，随处运行"与现有工具链轻松集成代码简洁，性能良好通过合理使用cross-env，可以显著提升多平台项目的开发效率和代码可移植性，减少因环境差异导致的问题。

package.json 作为Node.js项目的核心配置文件，其丰富的字段设置影响着项目的开发、构建、测试和发布全生命周期。掌握这些配置能力，可以构建更加健壮、可维护的Node.js应用。随着Node.js生态的发展，package.json的配置能力也在不断扩展，跟进最新的最佳实践对提升项目质量至关重要。

它扩展了 CSS 的功能，使其具备变量、混合（mixin）、嵌套、运算、函数等特性，从而让 CSS 更易维护、扩展和组织。Less 本质上是 CSS 的“超集”，最终需要编译成标准的 CSS 文件，浏览器才能解析执行。定义变量，存储常用值（如颜色、字体大小），方便全局复用和统一修改。将一组样式定义为“混合”，并在其他选择器中调用，实现代码复用。Less 代码需要通过编译器转换为标准 CSS。提供内置函数（如颜色调整、数学计算等），动态生成样式值。支持将子选择器嵌套在父选择器中，避免重复书写层级结构。

通过正确配置，你可以充分利用 Webpack 的优化能力，提升应用性能。，最终输出的 JS 文件体积会比预期大，影响性能。注意：从 Webpack 5.70.0 开始，来压缩 JavaScript 代码。是 Webpack 内置的优化器，在 Webpack 5 中，如果你。，导致 JavaScript 代码。Webpack 5 默认使用。Webpack 会保留默认的。，则需要显式保留它。

JavaScript正则表达式是一种强大的文本处理工具，掌握其基本语法和高级技巧可以大幅提高文本处理效率。正则表达式由元字符、量词、分组等组成，通过合理组合这些元素，能够实现复杂的模式匹配需求。正确理解和使用标志（flags）可以让正则表达式匹配更精确、更高效，适应不同的文本处理需求。在实际应用中，需要注意正则表达式的可读性和性能问题，避免过于复杂的模式导致难以维护或性能下降。

MiniCssExtractPlugin是webpack生态系统中的一个重要插件，专门用于将CSS提取到单独的文件中，而不是将其打包在JavaScript文件中。该插件基于webpack v5构建，能够为每个包含CSS的JS文件创建对应的CSS文件，并支持CSS的按需加载和SourceMap。支持异步加载CSS无重复编译，性能更优更易于使用和配置专为CSS设计的功能// 插入到指定元素后})// 自定义插入函数// 将链接标签插入到指定元素之前})})

CSS Modules 是一种用于模块化和局部化 CSS 的系统。它通过自动创建唯一的类名，确保样式在组件级别上被封装，从而解决了全局样式冲突的问题。CSS Modules 将 CSS 文件视为模块，使得样式可以像 JavaScript 一样被导入和使用。CSS Modules 提供了一种平衡性能与开发体验的 CSS 模块化解决方案。它保留了传统 CSS 的熟悉语法，同时解决了全局命名冲突问题。对于中大型项目和组件库开发，CSS Modules 是一个值得考虑的技术选择。

这种模块化的CSS导入方式可能一开始不习惯，但它使CSS的管理更加清晰，也是现代前端开发的主流方式。可是即使我不导入它也没有提示，也没有报错信息，但是我确实是需要导入的，因为我需要打包，但是它不提示我要把哪些css文件导入到哪些css，这不是很奇怪吗？在前端工程中使用webpack打包CSS时，确实需要在JavaScript文件中导入CSS文件，这可能会让人感到困惑。你提出了一个很好的问题！直接导入 CSS 文件。在 JavaScript 中，是否需要导入 CSS 文件取决于具体的使用场景和项目需求。

<object> 标签是 HTML 中用于嵌入外部资源的通用机制，支持通过 data 和 type 属性加载资源，并通过 <param> 标签传递配置信息。其核心属性包括 data（资源 URL）、type（MIME 类型）、width 和 height（尺寸）以及 name（对象命名）。<object> 标签可用于嵌入图像、音频、视频、PDF 等多种资源，并通过回退内容处理浏览器不支持或加载失败的情况。尽管 <object> 标签功能强大，但由于兼容性问题，

Quill 默认不允许插入 iframe，需通过自定义模块扩展支持，但可直接忽略 iframe 插入逻辑。如果用户直接操作 DOM（如通过开发者工具），可通过 JavaScript 监听并移除 iframe。如果用户使用富文本编辑器（如 TinyMCE、Quill、CKEditor），可配置编辑器禁止插入。指令限制 iframe 的来源，间接阻止用户插入 iframe。通过以上方法，可以有效防止用户在你的网页中插入。仅允许加载同源的 iframe。要禁止用户在你的网页中插入。标签的 HTML 内容。

iframe作为Web平台的基础构建块之一，在特定场景下仍然具有不可替代的价值。通过深入理解iframe的工作原理、掌握安全最佳实践、灵活运用通信机制，可以在现代Web开发中安全高效地使用iframe技术，构建复杂而强大的Web应用。

掌握CSS优先级规则是前端开发的基础技能。遵循适当的命名约定、保持特异性较低、避免过度嵌套和不必要的!important，能够构建出更易维护和扩展的样式系统。现代CSS架构如BEM、CSS Modules和原子化CSS框架都能有效减轻优先级冲突问题。

前后端建议统一使用ESM。

HTML表格不仅是展示数据的有效方式，掌握其合并单元格、结构布局和样式技巧，能构建出既美观又功能强大的数据展示界面。在移动设备上，标准表格可能会溢出屏幕。HTML 表格是展示结构化数据的强大工具，通过。使用CSS美化表格更为灵活且符合现代标准。结合所有技术创建一个功能完备的表格。定义表头单元格，通常会加粗显示。/* 在每个单元格前显示标签 *//* 奇偶行不同背景色 *//* 在小屏幕隐藏表头 */定义普通的数据单元格。/* 鼠标悬停效果 *//* 移动设备适配 */组织表格的头部区域。

拦截器是Axios提供的强大功能，分为请求拦截器和响应拦截器，它们允许在HTTP请求发送前和接收响应后进行统一处理。拦截器采用中间件模式实现，能够实现请求与响应数据的全流程管控。以上内容详尽讲解了Axios请求拦截器和响应拦截器的核心概念、实现方式及高级应用，可实际应用于开发中提升API调用的质量和可维护性。重复请求是指在前一个相同请求尚未完成时，又发起了完全相同的请求。Axios拦截器通过责任链模式工作，将请求/响应处理分为多个环节，每个环节负责特定任务。

浏览器缓存机制可显著提升Web应用性能，但不当使用也会引发数据不一致问题。

工作机制:适用场景:工作机制:适用场景:性能影响: 可能减少带宽使用，但不减少请求次数: 始终消耗最大带宽，无缓存优化可能正确选择这两种指令对网站性能和数据安全性有重要影响。ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ   

简单说：虽然5MB看似不大，但若无策略地使用，很容易在关键时刻面临存储不足问题，尤其在复杂应用中。主动管理存储是良好的开发实践。Web Storage API提供了简单高效的客户端存储解决方案，localStorage适合持久化数据存储，sessionStorage适合会话级临时数据存储。合理利用这两种机制，可以构建更具响应性和弹性的Web应用，提升用户体验。在实际应用中，应当注意安全限制、性能优化以及数据管理策略，以充分发挥Web Storage的优势。

JWT黑名单是解决无状态令牌注销问题的技术方案。由于JWT设计为自包含且无状态，一旦签发就有效，直到过期，这导致传统注销机制失效。黑名单机制本质上为无状态JWT添加了有状态的检查层，在安全与性能间取得平衡，适用于对注销及令牌撤销有严格要求的系统。

Web Token是一种紧凑、自包含的数据传输方式，可安全地在各方之间传递信息。这些信息经过数字签名，可验证其完整性和真实性。

Token是一种访问凭证，通常以字符串形式表示，用于验证用户身份并授权访问特定资源。现代Web应用中，Token常采用JSON Web Token(JWT)格式，包含头部(Header)、载荷(Payload)和签名(Signature)三部分。Cookie是存储在客户端的小型文本文件，由服务器发送并由浏览器存储。每次向同一服务器发送请求时，浏览器会自动附加相关Cookie信息，用于维持状态和记住用户信息。Token和Cookie各有优缺点，选择时应根据应用特性、安全需求和技术架构综合考量。

主线程是浏览器中用于执行JavaScript代码、处理DOM操作和渲染UI的单一线程。所有常规的JavaScript代码默认都在主线程上执行。

Lodash是一个现代JavaScript实用工具库，提供模块化、性能优化和额外功能，使JavaScript编程更加简单高效。该库包含200多个函数，涵盖数组、对象、函数、字符串等多种数据类型的处理。Lodash通过提供丰富的工具函数，极大地简化了JavaScript开发工作。合理使用Lodash可以使代码更加简洁、可读性更强，同时避免重复造轮子，提高开发效率。

函数柯里化是一种强大的编程技巧，能够提高代码的灵活性和可重用性。通过将多参数函数转化为一系列单参数函数，开发者可以更方便地处理函数的调用和组合。

方法，该方法返回自1970年1月1日午夜（UTC）以来的毫秒数。这是一个常用的技巧，用于快速获取当前时间的时间戳。创建了一个表示当前日期和时间的Date对象，而在JavaScript中，使用一元加号（的作用是将当前的日期和时间转换为时间戳（以毫秒为单位的数字）。在Chrome调试控制台中输入。）运算符可以将对象转换为数字。返回一个Date对象，而。会调用Date对象的。

标签用于包含文档的元数据，比如标题、字符集、样式表链接、脚本等。在HTML文件中，模板头通常是指。

Flexible.js是一个用于解决移动端屏幕适配问题的轻量级JavaScript库，由手机淘宝前端团队开发。它通过动态设置HTML根元素的font-size以及viewport的scale，实现了在不同尺寸、不同分辨率的移动设备上的页面等比例缩放，为开发者提供了便捷的适配方案。Flexible.js通过动态设置根元素的font-size和viewport的scale，巧妙地解决了移动端多屏适配问题。

Window 对象代表整个浏览器窗口。它是所有JavaScript对象的顶层对象，也是全局环境。Document 对象专指加载到浏览器窗口中的网页内容部分。Element 对象代表文档中的具体HTML元素，如段落、图片、表单等。History 对象包含用户在当前浏览器标签页中访问过的页面历史记录。Location 对象代表当前页面的URL信息，对应浏览器的地址栏。Navigator 对象包含有关访问者浏览器的信息。Screen 对象包含有关用户屏幕的信息。存储对象用于在浏览器中保存数据。

通常用于需要程序控制焦点的元素，比如在某些情况下需要动态聚焦的弹框或隐藏元素。来确保弹框在打开时可以通过 JavaScript 聚焦，而不影响页面的其他元素的焦点顺序。这个元素不会在用户按下 Tab 键时被聚焦，但可以通过 JavaScript 控制其焦点。属性的值可以影响元素是否可以通过键盘的 Tab 键获得焦点，以及它在焦点顺序中的位置。元素可以通过 Tab 键获得焦点，并且它在焦点顺序中遵循文档的自然顺序。元素可以通过 Tab 键获得焦点，并且它在焦点顺序中的位置由。值越小，元素越早获得焦点。

创建可重用的函数进行值计算。

/ 自定义主题色// 修改组件圆角// 导入Bootstrap。

当用户点击"省份名称："文本时，会自动获取输入框的焦点，使用户体验更好。：对于使用屏幕阅读器的用户，这种关联可以帮助他们更好地理解表单结构。：当用户点击标签文本时，浏览器会自动将焦点转移到关联的表单元素上。：它将标签与特定的表单元素（如输入框、复选框等）关联起来。属性的值必须与要关联的表单元素的。属性是一个重要的无障碍功能属性。

axiosTest.html效果ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。它提供了一套简单且一致的API，使得发送HTTP请求变得异常便捷。自发布以来，Axios已成为前端开发中处理网络请求的首选工具之一。Axios作为一个功能丰富、使用简便的HTTP客户端库，凭借其优秀的API设计和强大的功能扩展性，成为现代前端开发中处理网络请求的首选工具。通过合理利用配置选项、拦截器、错误处理等机制，可以构建出高效、健壮的前端应用。

XMLHttpRequest (XHR) 是一个浏览器API对象，允许客户端脚本发送HTTP请求与服务器进行数据交换，而无需刷新整个页面。作为AJAX技术的核心组件，XHR于1999年首次在Internet Explorer 5中引入，后来被所有主流浏览器采纳并标准化。XMLHttpRequest作为AJAX技术的基石，虽然在现代Web开发中有了更新的Fetch API，但因其广泛的浏览器兼容性、丰富的事件处理和强大的功能特性，仍然在许多场景中发挥着不可替代的作用。