JUST Vvvvv

喜欢健身的前端吃灰收藏家

  • setup语法糖持续踩坑-JSX语法

    突然想试验一下jsx语法和setup语法结合一下使用,然后就发现了很多未知的玩意。虽然现在vite对jsx和tsx开箱即用,但是还是要在vite.config.js配置一下export default{ esbuild: { jsxFactory: 'h', jsxFragment:

    vue3 ref源码浅析

    ref源码解析随便找一个vue3项目,ctrl按住直接转到ref定义,这个方式和直接拉取vue3源码有点不同,因为这里的文件都是.js,是项目打包之后的,ts不是特别熟练还是这样看比较好,否则太吃力了。然后找到reactive.cjs.prod.js,目录在这里node_modules/@vue/r

    解决ios浏览器100vh滚动条问题

    ios浏览器存在的问题开局两张图,内容全靠编。第一张图是F12模拟手机浏览器的,第二张图是在ios的浏览器上面的。站点开发的时候在电脑上模拟手机浏览器没有出现任何毛病,但是到了真机问题就出现了,最右边的滚动轴,是我不想要的(我最一开始根本不知道它是怎么出现的),经过群友的耐心指点和百度,终于找到了凶

    vite压缩代码+nginx gzip配置

    vite压缩打包之后代码vite压缩代码需要用到vite-plugin-compression这个插件npm地址vite-plugin-compression安装之后在vite.config.js配置即可import viteCompression from 'vite-plugin-compres

    前端缓存Cache-Control实践

    参考链接彻底弄懂缓存与协商缓存站点没做缓存之前请求都是这个样子的,为了给自己更好的体验,搞一波缓存配置缓存连接自己的服务器,配置下缓存add_header Cache-Control "max-age=31536000, public, immutable";保存配置文件之后记得

    前端不想发测试环境但是想预览打包后的项目怎么办?

    前端不想发测试环境但是想预览打包后的项目怎么办?今天遇到的第二个问题,项目在开发环境下表现正常,但是打包之后发布到测试环境出现问题。作为一个懒人,每次修改一点点东西都要走一次发布测试流程太浪费时间了。所以我在想有没有办法可以不发测试环境还可以预览打包后的项目,刚好这几天一直在搞部署相关的工作,经过实

    npm run build打包图片报error错误,关联pngquant.exe

    npm run build打包图片报error错误,关联pngquant.exe今天遇到的第一个问题,同一个项目在同事的电脑上可以正常打包,在自己的工作电脑上打包就会报错,就像下面这样第一时间就删除了整个node_modules,然后重新执行npm install,重新运行打包命令后,错误依然存在。

    setup语法糖持续踩坑

    setup语法糖踩坑记一、vite-plugin-eslint这个插件安装之后需要在vite.config.js中手动配置,如下import eslintPlugin from 'vite-plugin-eslint'export default defineConfig({ plugins: [

    重置Git历史提交记录

    重置Git历史提交记录到了一个新环境,离开了自己熟悉的电脑,以为所有的环境都配置完毕了,结果最后git的配置还是没考虑到。电脑保存了上一个人的所有git信息,导致几次提交的邮箱用户名都是别人的。现在面临的问题就是,commit信息是正确的,但是用户与邮箱都是错误的,需要更改历史提交记录,几经波折找到

    Jenkins持续部署vue保姆级教程

    CI/CDCI (Continuous Integration) 持续集成​开发人员可以通过持续集成将开发的代码持续的提交到公共的代码仓库中。开发人员可以在任何时候多次的提交自己开发的代码,而并不是独立的开发某一个独立模块并在开发周期结束的时候一起提交。持续集成的目的就是将集成简单化,简化了重复的日

    Docker从入门到入土

    Docker基本命令更新yumyum makecache fast 安装Docker# 卸载旧版本yum remove docker \ docker-client \ docker-client-latest \

    使用rollup编译flow代码

    使用rollup打包工具编译flow代码1、 废话不多说,先初始化项目npm init -y2、安装flow组件npm install --save-dev flow-bin3、新建flow配置文件// .flowconfig// ignore排除flow不需要检测的文件夹// libs为标注文件,

    flow密封对象、元组与泛型

    // @flow/** 密封对象* 当创建一个非空对象时,flow就会创建一个密封类型的对象,* 这个密封对象会自动检测他们的类型。* 并且当对象被密封之后,flow不在允许给这个对象添加新属性,否则会抛出异常* */const A = { foo: 0, bar: true, b

    flow flow flow

    // @flow/** 自动推导类型* */let name = "hanhan"// console.log(name -1) // 这里既是没有给类型加上标注,依然会报错/** 基本类型的类型标注语法* */const a: string = 'hanhan'const b:

    IIFE中的作用域

    遇到一个很有意思也很冷门的问题,话不多说,上才艺。// 才艺代码var a(function a () { a = 2 console.log(a)})()console.log(a)上述的代码输出什么?[Function: a]undefined当我知道是这个答案的时候![image-

    网络为什么要分层?

    OSI概念模型最上层的应用层(Application)应用层包括了DNS、HTTP协议、SMTP、FTP协议等等,解决的是业务问题。表示层(Presentation)主要负责把网络中的消息转换成应用层可以读取的消息,应用层是无法直接读取网络中的消息的,需要表示层进行转换,TLS/SSL协议就是工作在

    HTTP1.1协议

    浏览器发起HTTP请求的典型场景当在浏览器输入框按下回车键后,浏览器就会发出第一个请求,第一个请求由渲染引擎发起然后回到我们的响应Response中。在这个响应Response中有许多的超链接,这些链接可以是css、JavaScript、图片或者音频等等。根据这些超链接,浏览器就会发出新的请求。

    优化context并实现读写分离

    优化Context并实现读写分离为什么要实现读写分离?可以更好地管理组件状态、代码可读性更高、维护更加简单//定义content.jsimport{createContext,useContext}from'react'constLogDispatch=createContext();constLo

    React-Hooks设计动机

    React-Hooks设计动机​在React中,有类组件和函数组件两种看似不同但却有着某种血缘关系的组件。首先来看类组件,在类组件中,我们只需要轻轻地继承一个React.component就可以使一个类组件得到很多的东西,而且这些东西都是现成的我们直接去调用就可以了,这一切只是因为我们继承了一个Re

    React.createContext

    ContextContext提供了一个无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。在一个典型的React应用中,数据是通过props属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这些属性是应用程序中许多组件都需要

    01-Dart变量

    重要概念任何保存在变量中的都是一个对象,并且所有的对象都是对应一个类的实例。无论是数字、函数和null都是对象,并且所有对象继承自Object类。尽管Dart是强类型的,但是Dart可以推断类型,所有类型注释是可选的。Dart支持泛型,如List<int>(整数列表)或List<d

    19-class基础语法

    引入了`Class(类)`这个概念作为对象的模板。通过`class`关键字可以定义类。基本上,ES6中的`class`可以看作是一个语法糖,它的绝大部分功能,ES5都可以做到,新的`class`写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。

    17-寄生组合式继承

    为了解决组合式继承带来的问题,出现了寄生组合式继承,既通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

    16-原型式继承

    `ECMAscript5`通过新增`Object.create()`方法规范化了原型式继承。这个方法接收两个参数:一是用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。

    15-组合继承

    组合继承有时候也叫伪经典继承,值的是将原型链和借用构造函数的技术组合到一块。从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,即通过在原型上定义了函数实现,又能够保证每个实例都有它自己的属性。

    14-借用构造函数

    在解决原型中包含引用类型值所带来问题的过程中,开发人员使用一种叫做借用构造函数的技术有时候也叫伪造对象或经典继承。这种技术的基本思想相当简单,既在子类型构造函数的内部调用超类型构造函数。

    13-原型链

    ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要办法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

    12-稳妥构造函数模式

    所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用`this`和`new`),或者防止数据被其他应用程序改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但是有两点不同:一是新创建对象的实例方法不引用`this`;二是不使用`new`操作符调用构造函数。

    11-寄生构造函数模式

    寄生构造函数模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但是从表面上看,这个函数很像是典型的构造函数。

    10-动态原型模式

    动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的有点。换句话说,可以通过检查某个应该存在的方法是否有效,来解决是否需要初始化原型。

    09-组合使用构造函数模式和原型模式

    创建自定义类型的最常用方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混合模式还支持向构造函数传递参数;可谓集两种模式之长。

    08-原型对象的问题

    原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一个环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大的问题,原型模式最大的问题是由其共享的本质所导致的。

    07-原生对象的原型

    通过原生对象的原型,不仅可以取得所有默认方法的引用,而且可以定义新的方法。可以修改自定义对象的原型一样修改原生对象的原型,因此可以随时添加新的方法。

    05-更简单的原型语法

    每添加一个属性就要敲一遍`Person.prototype`,为了减少不必要的输入,也为了从视觉上更好地封装原型地功能,更常见的做法使用一个包含所有属性和方法的对象字面量来重写整个原型对象

    04-原型与in操作符

    有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例还是原型中。

    03-理解原型对象

    无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,也就是指向这个新函数本身。不过需要注意的是这样的链接关系只存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间

    01-究极数据属性解析

    属性类型ECMAscript中有两种属性:数据属性和访问器属性。数据属性:​数据属性包括一个数据值的位置。在这个位置可以读取和写入值。​数据属性有4个描述其行为的特性:​[[Configurable]]:默认为false,表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否...

    React-redux与Redux

    Redux中文文档https://www.redux.org.cn/React-redux中文文档https://www.redux.org.cn/docs/react-redux/Redux是JavaScript状态容器,提供可预测化的状态管理,如果通俗地一点来讲,那么Redux可以看做是一个数据

    react-router钩子函数

    react的路由钩子函数主要有四种:⭐️useHistory⭐️useLocation⭐️useParams⭐️useRouteMatch但是使用这些钩子函数React版本必须>=16.8useHistory这个钩子可以访问history,可以更好的进行导航首先声明此钩子函数importRea

    React生命周期

    首先,React生命周期分为三个阶段:挂载、渲染和卸载。由三种不同的形式组成:render渲染、props改变和state改变。由两种过程组成:挂载卸载过程、更新过程。下面是React16.x版本之前的生命周期旧生命周期1.挂载卸载过程1.1.constructor()当组件被实例化之后,即使不手写

    元素等待-显式等待与隐式等待

    首先,了解元素等待需要先知道浏览器的工作方式。浏览器在解析HTML文件时,需要从第一行按顺序往下解析。不仅仅解析HTML文件如此,解析JS文件也是这样,但是浏览器解析JS文件就比解析HTML文件要复杂地多的多。对于许多页面来说,页面需要加载数据来驱动视图,数据没加载完成,页面就不会显示对应的

    2020-4-18下午六点的梦

    在一栋教学楼,其他的教室都开着灯,只有我在的这个教室和旁边的教室没开灯,旁边的教室很像我高三时候的教室,里面坐满了人,都好像在复习的样子,很安静,即使黑黑一片也没人嘈杂,教室的最后面有一束光很刺眼,好像是手机的闪光灯一直开着。教学楼的布局很奇怪,我在的这个教室好像就是个大走廊,没有看到门,但是我是从

    Node.js-FileSystem模块的日常使用

    Node.js-fs模块概念:文件系统(FileSystem),主要用于对系统文件及目录进行读写操作,所有文件系统操作都具有异步和同步的形式。

    JUST Vvvvv

    切换主题 | SCHEME TOOL