79 篇博文 含有标签「前端」

yarn 在 yarn init 的时候 生成的 package.json 文件用来配置项目的信息、名称、版本号、描述信息等，还可以定义项目所需要的各种依赖包。

创建 package.json 文件

核心字段​

name 和 version 是 package.json 中最重要的两个必需字段，如果没有它们那么包将无法被安装，两者一起用来创建一个唯一的 id。

name​

包的名字，在 URL 中作为命令行参数，作为 node_modules 里的目录名使用。由小写字母组成，尽量简洁。

version​

包的当前版本号。

author​

作者信息。

description​

是一个字符串，可以帮助我们了解软件包的用途，也可以在包管理中搜索包时使用它。

keywords​

是一个字符串数组，在包管理器中搜索包时起作用。

license​

许可证，以方便用户知道他们是在什么授权下使用此包，以及此包还有哪些附加限制。

main​

项目的入口文件，默认为 index.js。

scripts​

定义自动化开发相关任务的好方法，比如使用一些简单的构建过程或开发工具。可以通过 yarn run <script> 命令来执行。

dependencies​

包的开发版和发布版都需要的依赖。

devDependencies​

只在包开发期间需要，但是生产环境不会被安装的包。

config​

配置你的脚本的选项或参数。

homepage​

包的项目主页或者文档首页。

bugs问题反馈系统的 URL，或者是 email 地址之类的链接，用户通过该途径向你反馈问题。

repository​

代码托管的位置。

contributors​

贡献者信息，可以是多个人。

files​

项目包含的文件，可以是单独的文件、整个文件夹，或者通配符匹配到的文件。

directories​

当我们的包安装时，可以指定确切的位置来放二进制文件、man pages、文档、例子等。

问题​

1. 在ECharts5以上的版本不提供china.js，虽然我们可以从github上找到china.js这个文件，但你就不可以使用ECharts5的诸多新功能。
2. 那么怎么才能使用ECharts4提供的地图和ECharts5的新功能呢？

提示​

ECharts4的地图没有按照中国测量标准进行测量，如果在比较正式项目上使用可能会存在法律问题。你可以考虑自己修改或者去上网找修改优化后的版本。

解决 4~5 版本问题​

安装两个版本

import * as echarts5 from "echarts5.2.0";
import * as echarts4 from "echarts";

修改原数组的方法​

这些方法之所以会修改原数组，是因为它们的操作本质上会改变数组的内容

1. push() 和 pop()：添加和删除元素会改变数组的长度和内容，因此这两个方法会修改原数组。
2. unshift() 和 shift()：在数组的开头添加和移除元素都会导致数组中其他元素的索引发生变化，因此这两个方法会修改原数组。
3. splice()：splice() 方法既可以添加、删除、替换元素，也可以截取数组的一部分。这些操作都会导致数组内容的变化，因此 splice() 方法会修改原数组。
4. reverse()：颠倒数组中的元素顺序会改变数组的内容，所以 reverse() 方法会修改原数组。
5. sort()：排序数组的元素会改变它们的顺序，因此 sort() 方法会修改原数组。
6. fill()：用指定的值填充数组的元素会改变数组的内容，所以 fill() 方法会修改原数组。
7. copyWithin()：将数组中的一部分元素复制到另一个位置会改变数组内容，因此 copyWithin() 方法会修改原数组。

不修改原数组的方法​

• concat()：合并两个数组或更多数组，并返回一个新数组
• slice()：复制原数组的一部分并返回一个新数组
• join()：将数组元素以指定的分隔符拼接为一个字符串
• map()：遍历数组，并返回一个新数组
• filter()：遍历数组，返回符合条件的元素组成的新数组
• reduce()：遍历数组，将数组元素累加或累乘，并返回一个值。

总结​

各位可以看出，修改原数组的方法，往往是要对数组中的元素进行操作。或者说是这种操作影响到了元素的位置。这种情况下的方法，是要修改原数组的。

不修改原数组的方法，往往是想对整个数组进行操作。并不是想改变数组元素，而是对整个数组进行遍历、合并、转化等。

.js 内容​

## min.js 内容

JavaScript 文件：常规 vs 最小化

在 Web 开发中，JavaScript 是一个不可或缺的元素。开发者在构建和部署应用程序时，经常会遇到两种类型的 JavaScript 文件：.js 和 .min.js。了解它们的区别和各自的优缺点是至关重要的。

.js 文件​

优点：

• 代码是原始的，未经过任何压缩处理，这使得开发者可以轻松地阅读、理解和修改代码内容。

缺点：

• 由于包含了所有格式化内容（如空格、缩进和注释），文件的体积相对较大，这导致其在网络上的加载和传输时间增加。

.min.js 文件​

优点：

• 体积较小，因此传输和加载速度更快，为用户提供了更快的响应时间。
• 由于代码混淆，一般人很难理解其内容，这为源代码提供了一定程度的保护，减少了被窃取的风险。

缺点：

• 代码的可读性差，这使得它在调试和修改时可能会遇到困难。

JavaScript 文件压缩的原理​

JavaScript 文件的压缩并不是一个简单的过程，它涉及多个步骤，以确保文件尽可能小，同时代码仍然能够正常运行。

1. 删除无用内容：所有不必要的注释、空格、换行符和其他格式化内容都被移除，从而减小文件大小。
2. 代码混淆：为了进一步减小文件大小并提供源代码的一定保护，变量和函数名被更改为短而没有实际意义的名称。此外，没有使用的代码、内联函数和等价语句也可能被删除或替换。

总之，选择使用 .js 还是 .min.js 文件取决于你的实际需求。在开发和调试过程中，使用常规 .js 文件更为合适。但在生产环境中，为了提供更快的加载速度和保护源代码，使用 .min.js 文件通常是更好的选择。

在处理中文排版时，特别是在 Web 开发中，经常会遇到需要对齐中文文本的情况。虽然有许多预定义的 HTML 字符实体可以帮助我们添加空格，但不是所有的空格都适合处理中文文本。

以下是一些常见的 HTML 字符实体及其描述：

•  ：这是最常用的非换行空格。它的宽度是英文半角空格，经常用于英文文本中。
•  ：这个空格的宽度是半个中文字符。它常用于需要较细微调整的地方。
•  ：这个空格的宽度是一个完整的中文字符，但在某些情况下可能并不完美。

然而，有一个不太为人知的字符实体　，它是中文的全角空格。它的宽度完美地等于一个中文字符，因此在对齐中文文本时，它就像一个“隐形”的汉字。这使得文本在视觉上更加均匀和整齐。

为什么使用全角空格？

在设计良好的中文网页或文档中，文本的对齐和间距是非常关键的。如果使用不恰当的空格，可能会导致文本看起来不整齐或难以阅读。全角空格提供了一个简单而有效的方法，使中文文本保持整齐的对齐，无论是在标题、段落还是列表中。

结论

虽然 HTML 提供了多种空格选项，但对于中文文本，全角空格　往往是最佳选择。它简单、有效，并能确保中文文本始终保持整齐的对齐。

scrollHeight​

## scrollTop

属性可以获取或设置一个元素的内容垂直滚动的像素数

一个元素的scrollTop值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0。

在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。

clientHeight​

## 公式

parseInt(scrollHeight) - parseInt(scrollTop) == parseInt(clientHeight);

使用parseInt可以保证在移动端上忽略小数部分的影响。

描述​

## 方法 1

使用Vue自带的指令

注意，该指令不兼容IE，而且会导致IE白屏，建议使用方法2解决问题

    [v-cloak] {
      display: none;
    }

方法 2​

使用v-text或者v-html来代替

<div class="report3" v-text="fPprice">{{fPprice}}</div>

1. 在非高分辨率的屏幕上，0.5px 可能会被四舍五入到 1px 或完全忽略。
2. 在高分辨率（例如 Retina 屏幕）的设备上，0.5px 可能会渲染得很细，但在标准分辨率的屏幕上可能看不到。

使用媒体查询

根据设备的像素比 (devicePixelRatio) 使用媒体查询来应用不同的样式。例如，对于高分辨率的屏幕，你可以设置边框为 0.5px，而对于标准分辨率的屏幕，你可以设置为 1px。

/* 默认样式（针对非高分辨率屏幕） */
.border {
  border: 1px solid #000;
}

/* 针对高分辨率屏幕的样式 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .border {
    border: 0.5px solid #000;
  }
}

使用伪元素

使用伪元素（例如 ::before 或 ::after）创建边框效果。你可以设置伪元素的高度或宽度为 1px，然后使用缩放 (scale) 转换来调整大小。

.border::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
  transform: scaleY(0.5);
}

这三个特性是密切相关的。响应式系统是基础，它使得 Vue.js 能够知道何时需要更新视图。数据双向绑定建立在响应式系统的基础上，它使得视图和数据模型能够保持同步。而 v-model 指令则是数据双向绑定的一个实现机制，它使得开发者可以方便地在表单元素上实现双向绑定。

再有面试官问 v-model 是什么，放心的答：语法糖

使用 v-model：

<input v-model="message" />

使用 v-bind 和 v-on：

<input v-bind:value="message" v-on:input="message = $event.target.value" />

v-model 提供了一种更简洁、更易于理解的方式来实现数据双向绑定，所以说 v-model 是 v-bind 和 v-on 的语法糖。

总体区别​

1. 设计理念：

• React 是一个灵活的库，主张 "everything is JavaScript"，这意味着你可以使用 JavaScript 来创建组件、管理状态、处理 DOM 更新等等。这种设计理念使得 React 能够在大型应用中更好地进行抽象，并有更高的灵活性和可组合性。然而，这也意味着你可能需要更多的配置和工具，例如 Redux 或 MobX 进行状态管理，React Router 进行路由管理，等等。
• Vue 是一个框架，它提供了一种结合声明式模板和组件化的方法，用于构建用户界面。Vue 的设计理念是 "easy to use, hard to misuse"，即让开发者尽可能容易地做对事情。这使得 Vue 在小型到中型的应用中更易于上手，但在大型应用中可能会遇到一些限制。不过，Vue 也提供了一些进阶功能，如 Vuex 进行状态管理，Vue Router 进行路由管理，等等。

2. 模板和渲染：

• React 使用 JSX，这是一个 JavaScript 语法扩展，允许你在 JavaScript 中编写类似 HTML 的代码。因为 JSX 最终会被转译为 JavaScript，你可以在 JSX 中直接使用 JavaScript 表达式。这为组件的渲染提供了极大的灵活性，但也可能增加了一些复杂性。
• Vue 使用基于 HTML 的模板语法，这使得它对于初学者更易于理解和使用。你可以使用特殊的指令（如 v-if, v-for, v-bind 等）来控制模板的渲染。另外，Vue 也支持使用渲染函数和 JSX，尽管这不是主流的做法。

3. 组件和状态管理：

• React 使用 props 和 state 来管理组件的数据。props 是父组件传递给子组件的数据，而 state 是组件自己管理的数据。你可以使用 setState 方法来更新组件的状态，并触发组件的重新渲染。React 也支持使用 context API 来实现跨组件的状态共享。
• Vue 使用 props 和 data 来管理组件的数据。props 是父组件传递给子组件的数据，而 data 是组件自己管理的数据。你可以使用 this.$set 方法来更新组件的数据，并触发组件的重新渲染。Vue 也支持使用 provide/inject API 来实现跨组件的状态共享。

4. 生命周期方法：

• React 的生命周期方法包括 componentDidMount, componentDidUpdate, componentWillUnmount, 等等。在 React 16.8 之后的版本中，通过引入 Hooks（如 useEffect），React 可以在函数组件中实现相同的功能。
• Vue 的生命周期方法包括 created, mounted, updated, destroyed 等等。这些方法的名称更直观，更容易理解它们的用途。

5. 社区和生态系统：

• React 的社区和生态系统非常庞大和成熟，有大量的第三方库和工具可以使用。React 的学习资源也非常丰富，包括官方文档、教程、课程、博客文章、Stack Overflow 问题等等。
• Vue 的社区和生态系统也在快速发展，虽然相对于 React 来说规模较小，但也有很多高质量的第三方库和工具。Vue 的学习资源也很丰富，尤其是官方文档，被广大开发者誉为非常友好和易于理解。

技术区别​

1. 状态管理：

• React 通常与 Redux 或 MobX 等库一起使用来进行全局状态管理。React 本身也提供了 Context API 以实现跨组件的状态共享。在 React 16.8 之后的版本中，引入的 Hooks（如 useState, useReducer）提供了更灵活的状态管理方式。
• Vue 有一个官方的状态管理库 Vuex。Vuex 的设计受到了 Flux 架构和 Elm 架构的影响，它使用单向数据流和时间旅行调试功能来处理应用的全局状态。此外，Vue 的 v-model 指令提供了一种简单的方式来实现双向数据绑定。

2. 开发体验：

• React 的开发体验可能会因为需要配置的工具和库的数量而变得复杂。然而，Create React App、Next.js 和 Gatsby 等脚手架和框架可以帮助你快速开始一个新项目。此外，React DevTools 是一个非常强大的浏览器扩展，它可以帮助你调试你的 React 应用。
• Vue 的开发体验被设计为尽可能地简单和愉快。Vue CLI 提供了一个全功能的脚手架，用于快速启动一个新项目，它包括热重载、代码分割、生产环境优化等功能。此外，Vue DevTools 是一个类似于 React DevTools 的浏览器扩展，它也可以帮助你调试你的 Vue 应用。

3. 性能：

• React 使用虚拟 DOM 和高效的差异算法来优化渲染性能。在 React 16（也被称为 "React Fiber"）中，引入了一种新的调和算法，它可以实现异步渲染，从而提高了大型应用的性能。
• Vue 也使用虚拟 DOM，但它还使用了一些额外的优化技术，例如静态模板分析和异步渲染。这使得 Vue 在某些场景下的性能可能会优于 React。

4. TypeScript 支持：

• React 自 16.8 版本开始已经有了对 TypeScript 的支持。你可以在创建项目时选择 TypeScript 作为项目的语言。虽然 React 的核心并不是用 TypeScript 写的，但是它的类型定义是由社区维护并且质量很高。
• Vue 在 2.x 版本中对 TypeScript 的支持并不是很好，主要是因为它的 API 并不是很适合静态类型检查。然而，在 Vue 3（也被称为 "Vue Composition API"）中，改善了对 TypeScript 的支持，因为它的 API 设计更加符合 TypeScript 的静态类型系统。

其他区别​

1. Reactivity（响应性）系统：

• React 使用的是 pull-based reactivity（拉取式响应性）。当组件的 state 或 props 发生变化时，React 会重新渲染组件，并对比新旧 virtual DOM 来决定是否需要更新真实 DOM。这意味着 React 在每次 state 或 props 变化时都需要重新渲染。
• Vue 使用的是 push-based reactivity（推送式响应性）。当依赖的数据变化时，Vue 会自动追踪这些变化并重新渲染组件。这使得 Vue 可以更精确地知道何时需要重新渲染，而不是每次数据变化时都重新渲染。

2. Reactivity API（响应性 API）：

• React 使用的是函数式编程和不可变数据的理念。你需要使用 setState 或 useReducer 来改变状态，并返回一个新的状态对象，而不是直接修改状态。
• Vue 允许你直接修改状态，并通过 v-model 指令实现双向数据绑定。这使得 Vue 的编程模型可能更接近于传统的命令式编程。

3. 代码组织和可维护性：

• React 使用的是单一方向数据流，这使得状态的流动更容易预测和理解。此外，React 支持使用高阶组件和 render props 等模式来复用逻辑。
• Vue 使用的是组件级别的状态管理，这使得组件的状态更容易管理和隔离。此外，Vue 支持使用 mixin 和 scoped slots 等模式来复用逻辑。

4. 自定义指令和过滤器：

• React 没有内建的自定义指令和过滤器的概念。React 鼓励使用组件和函数来实现相同的功能。
• Vue 提供了自定义指令和过滤器的功能。自定义指令可以让你创建可复用的 DOM 操作，而过滤器可以让你创建可复用的数据转换。