FengChen的进阶之路

原创 手写Vue3

【代码】手写Vue3。

原创 神奇的TypeScript -- 进阶篇之实用工具类型

TypeScript作为一个强类型语言，TypeScript为我们也提供了很多实用工具类型，让我们可以以一种方便的方式来操作现有类型并从中创建新类型。他们可以帮助我们更轻松地描述常见类型转换，提高代码的可读性和可维护性。TypeScript的实用工具类型是预定义的类型函数，提供对现有类型的便捷转换和操作。可以轻松地创建新类型或修改现有类型，而无需手动编写冗长的类型定义。提高代码可读性: 提供简洁的语法来表达常见的类型转换，使代码更易于阅读和理解。

原创 前端路由History 和 Hash模式的区别以及Vue项目打包后显示白屏，路由router-view不加载问题

什么是前端路由？前端路由有什么作用呢？前端路由又是如何实现的？常见的路由模式History和Hash又有什么区别呢？VueRouter又是如何实现的？我们的日常项目又该怎么使用呢？我们再来一次，这一次我们好好来~前端路由是指在单页面应用（SPA，Single Page Application）中，通过前端实现页面跳转和页面内容更新的一种机制。与服务器端路由不同，前端路由不需要重新加载整个页面，而是通过动态加载页面内容来实现页面的切换，从而提高用户体验和应用的响应速度。前端路由，简单来说，就是。

原创 神奇的TypeScript -- 基础篇

什么是TypeScript，她为什么神奇呢？我们再来一次，这一次我们好好来~

原创 Vue3+TypeScript项目目录结构及文件作用

【代码】Vue3+TypeScript项目目录结构及文件作用。

原创 Node.js 和浏览器环境中都使用 WebSocket

浏览器环境本身就支持WebSocket，直接使用JavaScript内置的WebSocket对象来建立连接。Node中本身并内置WebSocket协议的支持，所以需要使用ws来实现WebSocket功能。

原创 Javascript 位运算符(&，|，^，＜＜，＞＞，＞＞＞)

位运算是一种对二进制数进行操作的技术，常用于优化算法和处理底层数据。在JavaScript中，位运算符包括按位与（&）按位或（|）按位异或（^）左移（<<）右移（>>）无符号右移（>>>）。这些运算符可以对数字的二进制表示进行操作，实现一些特定的位级操作。例如，按位与运算可以用来提取特定位的值，按位或运算可以将特定位设置为1，按位异或运算可以进行位翻转等。通过合理使用位运算，可以提高代码效率和性能。

原创 运维：在Linux上运行程序经常自动断开连接怎么办？Linux: SSH连接时，窗口关闭，会话不终止

运维：在Linux上运行程序经常自动断开连接怎么办？Linux: SSH连接时，窗口关闭，会话不终止

原创 什么是跨域？怎么解决跨域？为什么使用中间服务器就行？

跨域指的是在Web开发中，当一个网页的脚本试图访问不同域（域名、协议或端口）的资源时，就会发生跨域问题。同源策略（Same-Origin Policy）是浏览器的一种安全机制，限制了一个网页从一个源加载的资源如何与来自另一个源的资源进行交互。跨域问题通常会导致浏览器阻止跨源请求，以防止恶意网站利用用户的信息或执行恶意操作。为了克服跨域问题，可以使用CORS（Cross-Origin Resource Sharing）机制来允许跨源请求，确保安全地进行跨域数据传输和交互。

原创 Vue3组合式API + TS项目中手写国际化插件

【代码】Vue3组合式API + TS项目中手写国际化插件。

原创 神奇的Vue3 - 组件探索

Vue3中组件的各种使用方法,涵盖了注册、Prop、事件、双向绑定、插槽等主要内容。

原创 神奇的Vue3 - Pinia

Pinia的 API 更简单、更直观，使得使用存储变得轻而易举。另外Pinia的结构与Vue的类似，因此更容易上手。响应式状态管理Pinia的状态可以直接在操作中进行更新，从而减少了冗余代码。与 Vuex 不同，Pinia 不再需要显式的提交mutation。Pinia是模块化设计的，允许创建多个存储库，这些存储库可以直接在需要它们的组件中导入。这样可以更好地进行代码拆分，并提供更好的TypeScript推断。

原创 Vue中实现鼠标按住元素进行拖动

实现元素拖动效果

原创 神奇的Vue3--基础篇

Vue3基础梳理

原创 JavaScript数组操作方法全录 sort | filter | map | reduce

需要注意的是，对数组进行浅拷贝和深拷贝也是很重要的概念。浅拷贝会创建一个新的数组，但与原始数组共享相同的引用。而深拷贝则会创建一个完全新的数组，对新数组的修改不会影响原始数组。

原创 CSS想用两种不同单位计算怎么办？CSS的calc怎么用

calc()的主要作用是在数值具有不同CSS单位时执行数学计算，尤其在响应式网页设计中非常有用。但需要注意的是，calc()不能操作CSS颜色值和其他类型的CSS值。目前，calc()在大部分的浏览器中得到支持，但在W3C的CSS值和单位模块3中，它被列为有可能在CR期间被删除的功能之一。浏览器在处理不同单位的计算时，会通过自动进行单位转换来确保计算结果的准确性。您可以在表达式中的每个操作数中使用不同的单位。calc()函数接受一个表达式作为参数，表达式的结果将用作CSS属性的值。+：将指定的操作数相加。

原创 为什么元素显示的样式跟我设置的不一样？CSS优先级详解

在CSS中，选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性，CSS规定了不同的优先级，例如ID选择器比类选择器具有更高的优先级。在CSS中，选择器的优先级决定了最终应用到元素的样式。

原创 JavaScript判断当前浏览器类型（包括判断移动端浏览器类型）

JavaScript判断浏览器类型

原创 书接上回：四个月看完《JavaScript权威指南》

原创 JS创建二维数组

创建一个m*n的二维数组Array.from(Array(m), () => Array(n).fill(0));

原创 从0开始学JavaScript（一） 之什么是JavaScript

今天是2022年的第一天，也算是给自己开个好JavaScript是Web编程语言

原创 2021-09-09

一、!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器二、不管父元素样式的权重多大，被子元素继承时，他的权重都为0，即子元素定义的样式会覆盖继承来的样式。...

原创 function的arguments属性

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

原创 JS 中parseInt(string, radix) 的正确用法

parseInt(string, radix)解析一个radix进制的string字符串并返回的十进制整数解析二进制字符串 “10”，并返回它对应的十进制整数parseInt('10', 2) // 2特别说明：1.radix的值是2-36之间的整数，如果radix 的值不处于 2-36 之间时，永远返回NAN2.如果string的内容不符合radix进制的值得时候，同样返回NAN比如：在二进制中是没有2这个字符的在十六进制中是没用G这个字符的研究研究：['1', '2

原创 正确使用“width:100%“

如果想要正确使用"width:100%“这一属性，一定要设置"box-sizing:border-box”,否则会造成子元素溢出

原创 行内元素

1、行内元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行。2、行内元素设置宽、高、margin上下、padding上下无效（竖直无效）。3、行内元素设置line-height，margin左右、padding左右有效（水平有效）。4、行内元素的宽高随标签里的内容而变化。...

原创 CSS 外边距（margin）合并

定义：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。情况1当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。情况二当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。情况三假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：情况四如果这个外边距遇到另一个.

原创 LeetCode 20. 有效的括号，使用哈希 解题方法

20. 有效的括号：给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串 s ，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。思路：使用哈希表存储每一种括号。哈希表的键为右括号，值为相同类型的左括号。 const hashS = new Map([ [')', '('], [']', '['], ['}', '{'] ])Map 对象的方法解析：（1）g

原创 Vue 对象监听， JavaScript 和 TypeScript

JavaScript写法data() { str: '', obj: { a: '' }} watch: { obj: { // 对象深度监听 handler(val) { console.log('obj', val) }, deep: true // 对象深度监听 }, str(val) { console.log(a, val) }}TypeScript写法 private cat = { long: '12cm

原创 JavaScript label语法 a: for

在JavaScript中，允许在语句的前面添加标签（label），相当于将语句定位，方便找寻该语句在for循环中跳出指定循环// JS label语法function f() { a: for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { console.log(i, j) if (j === 3) { break a// 直接跳出外层a循环 } }.

原创 微信的JS支付和H5支付

H5支付为微信客户端之外的浏览器页面提供请求微信支付的入口。场景： 即在微信客户端之后的浏览器可使用H5支付方法来唤起微信支付。微信H5支付文档JS支付即在微信内通过调用微信提供的JSAPI唤起微信支付场景：使用微信扫描线下二维码或浏览器内的二维码进行支付在微信公众号内进行支付微信JS支付文档...

原创 JavaScript Array的map方法

定义和用法：map方法返回一个新数组，不会改变原数组数组中的元素为原始数组元素调用函数处理后的值array.map(function(currentValue,index,arr), thisValue)其中function的三个参数分别是：参数描述currentValue必须。当前元素的值index可选值。当前元素的索引值arr可选值。当前元素属于的数组对象实例：let arrMap:Array<string> = ['1', '2

原创 牛客网JavaScript题的输入和输出

/*** 输出使用console.log* 单行输入*/const rl = require('readline').createInterface({ input: process.stdin, output: process.stdout})rl.on('line', (line) => { console.log(line)})/*** 输出使用console.log* 多行输入*/const rl = require('readline')

原创 针对window中atob和btoa方法的理解

atob中各个定义：a指ASCIIto即为由谁转换成谁b指base-64定义和用法：atob() 方法用于解码使用 base-64 编码的字符串btoa() 方法用于将字符串编码成 base-64 字符串window.btoa('0123456789') // MDEyMzQ1Njc4OQ==window.atob('MDEyMzQ1Njc4OQ==') // 0123456789...

原创 DOM 操作优化

opacity替代visibility （opacity: 0 ~ 1 （隐藏 ~ 显示））多个DOM统一操作（虽然V8会有缓存优化）先将DOM离线，即display：none；修改后显示不要把DOM放在已给循环中作为循环变量

原创 JS 堆栈事件调用（同步调用、异步调用）；消息队列和作业队列

同步调用const bar = () => console.log('bar')const baz = () => console.log('baz')const foo = () => { console.log('foo') bar() baz()}foo()代码会打印出foobarbaz调用堆栈：异步调用const bar = () => console.log('bar')const baz = () => console.l

原创 vue package.json文件解析

version 表明了当前的版本。name 设置了应用程序/软件包的名称。description 是应用程序/软件包的简短描述。main 设置了应用程序的入口点。private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。scripts 定义了一组可以运行的 node 脚本。dependencies 设置了作为依赖安装的 npm 软件包的列表。devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。engines 设置了此软件包/应用程序在

原创 v-model 修饰符 v-model.lazy v-model.trim v-model.number

v-model的修饰符v-model.lazy 只有在input输入框发生一个blur时才触发v-model.trim 将用户输入的前后的空格去掉v-model.number 将用户输入的字符串转换成number

原创 JS typeof 类型判断 & 判断是否是数组

typeof(undefined) // "undefined"typeof(null) // "object"typeof([1,2]) // "object"typeof({a:1}) // "object"typeof('123') // "string"typeof(1) // "number"typeof(true) // "boolean"typeof(Array) // "function"typeof(() => {}) // typeof 箭头函数返回也是 "fu

原创 npm 简介，什么是 npm，yarn 和 npm

npm的全称为： Node Package Manager也就是node包管理器