XNHYJSL的博客

利用的地图 GEO JSON数据配合 echarts 和实现在线选择 省市区 地图。

Vue2 旧项目 SSR 重构 业务需要，需要把Vue2 旧项目从以前的静态项目重构成 SSR 项目

window git bash 上下键没办法使用

JavaScript 语言共有 8 种数据类型，其中包括 7 种原始数据类型和 1 种对象数据类型

在 JavaScript 中，null 和 undefined 都表示“没有值”，但它们之间有一些不同的细微差别。掌握它们的区别和联系对于编写高质量的 JavaScript 代码非常重要。

更加直观地呈现 Ajax、XMLHttpRequest、Axios 和 Fetch 的区别，请看表格。工具定义特点区别Ajax一种使用 JavaScript 进行异步数据交互的技术和概念。前端通信的思想和模式，可以使用多种工具来实现。无法直接使用，需要借助其他工具或框架来实现。由浏览器提供的原生 API，用于发送 HTTP 请求并接收响应。支持多种请求方式（GET、POST、PUT、DELETE 等），对请求和响应进行详细的控制和定制。需要手动设置请求头信息，不能自动解析响应数据格式。

CommonJS 和 ES Module 都是当前 JavaScript 中流行的模块化规范，在实际应用中，需要根据项目特点来选择合适的模块化规范。CommonJS 在 Node.js 的使用上非常方便，而且兼容性好；ES Module 则支持更为灵活的语法，可以提高编译效率。总之，在选择模块化规范时，要综合考虑项目场景、开发需求以及代码架构的整体规划。

本文通过对比，Map 和 Object 的特性不同点，来帮助你选择一个个合适的键值对数据机构类型。

Vite + Vue3 + Pinia + UnoCss 无TS纯享模板

原因：该库包的作用是本地能打开运行打包后的 index.html 文件。目前情况是服务器打包卡住（本地打包也是一样卡住），并不是需要 http-server 来打开文件在本地运行。1.修改 assetsPublicPath 对我项目没起作用。服务器端刚把 node10.x 升级到 16.9.x。记录一次webpack打包完成卡住不动bug。webpack打包bug。打包完成后一直停留在。欢迎大家评论区指正。

anyRtc 实时视频通话

git 基于 master 分支新建分支

Document Flow 文档流，是我们前端开发中最基础的一个知识点，打一个良好地基才能决定更好的上层建筑，在这篇文章中我们一起研究元素在文档流中如何排列和布局。

vant tabs组件 设置sticky scrollspy 属性没有效果原因出在父元素不管是第几层的父元素overflow属性，overflow不能为auto和hidden设置完可以正常吸顶和滚动

从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。对于 cookie，我们还需要注意安全性。网络请求cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie 数据始终在同源的 http 请求中携带（即使不需要），即会在浏览器和服.

盒模型无论行盒还是块盒都由下面几个部分组成，从内到外是 ：内容 contentwidth, height 设置的是盒子内容的宽高内容部分通常叫做整个盒子的 内容盒 content-box填充(内边距) padding盒子边框到盒子内容的距离填充区 + 内容区 = 填充盒 padding-box边框 border边框 = 边框样式 + 边框宽度 + 边框颜色边框 + 填充区 + 内容区 = 边框盒 border-box外边距 margin边框到其他盒子的距离行盒模型盒子沿着内

无继承性的属性/有继承性的属性一、无继承性的属性: display, 文本属性，盒子模型属性，背景属性，定位属性，生成内容属性，轮廓样式属性，页面样式属性，声音样式属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin

属性值 / 权重的计算过程这节课属于前端必会内容，但其实不难，也很容易理解。开始前我们扩展一下课外知识点CSS 属性渲染流程渲染每个元素的前提条件 ： 该元素的所有 CSS 属性必须有值注意是所有 CSS 属性，就算我们没有自己定义也会使用默认值，或者使用继承值，我们看下面的例子我们可以看到虽然这里虽然只有我们定义的几个内容，但是当我们点控制台 Show all 时可以看到而这些灰色的无法修改的就是 CSS 所有大大小小 两三百个的属性值，全部都有值，一个元素从所有属性都没有值，到所有属性

相信大家在各类前端学习教程或者视频中都会看到这样一段代码.clearfix::after { content :''; display: block; clear: both;}我们也知道教程会说给要清除高度塌陷的元素加上这个属性就能解决问题，但是教程却没说为什么这样写，本文章将深入带你理解高度塌陷产生的原因和怎么解决，并解释这段代码的由来。前置知识：BFChttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_fo

CSS布局模型块级元素(block-level)无论其元素内容的多少或者把它的宽度设置多小，都会默认独占其父元素一整行的内容区域，块级元素的默认宽度为父元素的整个宽度行内元素(inline-level, 也叫内联元素)行内元素不会独占一行，可以和其他行内元素同处一行，大小默认为其元素内容的大小区别当元素是块级元素时，我们可以自由的改变其宽高，或为它们设置margin值和padding值。不过当元素是行内元素时，我们为它们设定的宽高和竖直方向上的边距值都会失效。行内块元素(inline-b