孟余的博客 | My Blog

web 国际化语言配置

vue开发中国际化的一些方法

一、国际化其实，我们平常说的「国际化」配置，也就是语言配置而已，不包括地区的宗教信仰、生活习惯等等。而语言配置，一般都是结合文件，使用变量替换的方式实现的，我相信很多人也都做过「国际化」，都有一定的经验。二、切换方案目前，我所了解到的方案有以下三种：本地缓存：点击「切换」按钮后，将当前的语言，如 en 缓存到本地，下次打开页面时，直接读取缓存的...

Posted by My on August 19, 2023

element-ui 上传文件

上传文件前的限制为什么会删除列表中的文件？

问题描述之前使用 element-ui 上传文件时，也仅涉及到上传「单个」文件，也经常在 before-upload 钩子中限制文件类型和大小，没出现什么问题。但是这次需求需要上传「多个」文件，并且限制文件类型和大小，如果按照之前的做法，校验不通过时，返回 false，那已经上传的文件就会被删除。对了，使用的是文件列表展示，结构如下： 1 2 3 4 5 6 7 8 9 10 11 1...

Posted by My on August 10, 2023

关于 Vue 响应式原理的思考

什么是响应式？谁和谁之间的关系？

前言响应式最直观的解释就是：数据变化时，视图会自动更新，也就是「数据驱动视图」。换一句话说，响应式里的关系是「数据」和「视图」之间的关系。视图什么是视图？应该是用户看到的页面，也确实如此。但是，在计算机里，并没有所谓的「页面」。在「web」中，我们看到视图，就是 dom 元素，不仅如此，页面上的数字，文字也是视图的一部分。在 vue 中，是使用虚拟 dom 来映射成 do...

Posted by My on July 21, 2023

Parameter Normalization

How to normalize parameters

参数归一化（Parameter Normalization）是一种在处理数据时常用的技术，旨在将不同范围或不同单位的数据转换为一个统一的标准，使其在分析和建模时更加有效和一致。那在软件开发中如何实现参数归一化呢？比如说有一个函数，功能很简单，把传入的一个日期进行格式化，返回一个字符串。 1 2 3 4 5 6 7 /** * @description 格式化日期 * @param ...

Posted by My on July 10, 2023

幻影依赖

what are phantom dependencies?

慢慢地，放弃了使用 npm 作为包管理工具，转而使用 pnpm 作为包管理工具。其中一个原因就是 npm 存在幻影依赖问题。什么是幻影依赖？幻影依赖是指，在项目中，某个依赖包的版本号被锁定，但实际上该依赖包的依赖版本号并没有被锁定，导致项目中存在多个版本的依赖包。通俗的讲，当你只安装了依赖 A ，但实际上会安装很多依赖（查看 node_modules 目录）。因为里面存在...

Posted by My on June 1, 2023

debounce and throttle

对防抖和节流的简单理解

「防抖」和「节流」或多或少在项目中都会使用，技术并不是很复杂，主要是「设计思路」和对函数的理解与运用。防抖「防抖」是指在一个函数被多次调用时，只有在停止调用一段时间后才会执行，也就是说，函数在被调用时，会将之前的调用记录下来，如果在这段时间内又被调用，则会将之前的调用清除，只执行最后一次调用。举个例子：就像是电梯门，如果电梯门即将关闭，这时候你按下了开门按钮，电梯就会重置关门时间...

Posted by My on August 1, 2022

webpack 优化

使用webpack可以进行哪些简单的优化？

前言对于前端性能优化，大致可以分为「浏览器部分」和「代码部分」。其中代码部分又可以分为「构建优化」和「代码优化」。「代码优化」理解起来就是代码的规范了，比如减少无用的注释，减少代码的复杂度，使用更高效的算法，删除无用的文件和代码等等。「构建优化」则是指 webpack 的配置优化，比如减少 bundle 大小，提升构建速度，使用更好的压缩算法等等。本文将介绍 webpack 优化的一...

Posted by My on July 18, 2022

Cross-domain

What is cross-domain and how to solve it?

前言「跨域」是个基础又严重的问题，但是在现代前端开发中，并没有多少人真正意识到它的存在。比如 Vue 项目，脚手架搭建起来后，配置了几个参数，就可以正常使用了。至于为什么能正常使用，里面有没有跨域问题，就没有深入的去了解过，甚至什么是跨域，都很难说清楚。 1 2 3 4 5 <script> fetch('https://pvp.qq.com/web201605...

Posted by My on July 15, 2022

MVVM && MVC

What are mvvm and mvc, and what are their differences?

MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的设计模式，它们都用于分离应用程序的逻辑、视图和数据， MVVM 「MVVM」（Model-View-ViewModel）是一种软件架构模式，用于分离应用程序的 UI「view」、业务逻辑「model」和界面逻辑「viewmodel」。它在设计模式中被广泛用于构建响应...

Posted by My on July 9, 2022

Array Types

How to determine whether a variable is an array ?

在做一些数组相关的操作时，我们经常会遇到判断一个变量是否为数组的问题。下面简单记录几种常见的判断数组的方法。对象原型上的方法 Object.prototype.toString.call() 方法可以用来判断变量的类型。判断数组 1 Object.prototype.toString.call([]); // [object Array] ...

Posted by My on June 30, 2022

My Blog