游客ruqdfvh2iuyqc_社区达人页

2023年01月

• 01.14 21:16:22
  发表了文章 2023-01-14 21:16:22

  vue3 + ts + vite + scss 搭建移动端的H5

  请注意，因为esbuild只执行不带类型信息的转换，所以它不支持某些特性，如const enum和隐式的纯类型导入。你必须在tsconfig中设置"isolatedModules": true。这样TS就会对那些不能与单独的翻译一起工作的特性发出警告。

  
• 01.14 21:12:22
  发表了文章 2023-01-14 21:12:22

  react组件进阶之 事件原理

  在react 中，给组件注册的事件，不是真正的给组件内的div，或者是其他的元素注册的事件，而是通过事件冒泡的形式，最终都是给document注册的事件。（react 16版本），在react17版本上,事件就不是冒泡到document上了，而是在虚拟的根节点中进行注册.

  
• 01.14 21:09:00
  发表了文章 2023-01-14 21:09:00

  react 组件进阶之Error Boundaries（错误边界）

  错误边界： 用来捕捉错误的代码，说到捕捉错误。大家可能都会说 直接try catch 不就行了。对的，try catch 确实是一种在各个语言比较通用的方法。但是在react 组件中，如果某一个组件发生错误，他是会往他的父级组件抛出错误的，然后自己是会被卸载的。如果到跟组件都不能够处理错误，这个组件树就会被卸载，组件树卸载导致的页面效果就是直接的报错。

  
• 01.14 21:05:28
  发表了文章 2023-01-14 21:05:28

  react 组件进阶之 Portals

  Portals 翻译为门户，但是感觉不对。作用类似插槽，但是不是vue 里面的插槽哦，有点像vue3 里面的 teleport,两者的作用都是将对于的虚拟dom 插入到真实dom的某个位置上。这里不讲两者的区别，只讲 Portals 的用法

  
• 01.14 21:03:01
  发表了文章 2023-01-14 21:03:01

  react组件进阶 render props （渲染属性） ts

  我举一个这样的场景，在编辑用户，我们需要一个用户数据的表单，然后在个人中心的时候，我们也需要一个用户的表单，但是这两个界面长的是布局啥的都不一样，无法达到界面复用。功能都是展示用户数据。

  
• 01.14 20:59:28
  发表了文章 2023-01-14 20:59:28

  react 组件进阶之 pureComponent(纯组件)

  react 组件进阶之 pureComponent(纯组件)

  
• 01.14 20:55:30
  发表了文章 2023-01-14 20:55:30

  react组件进阶之 context(上下文)

  上下文（context）: 是指一个组件里面包含所有子组件组成dom 的树，那么在这颗虚拟dom树中的环境，就称之为上下文。说到树这个概念，稍微提一笔，在树中，每一个节点我们都可以理解他是一颗树的根节点（起始节点）。

  
• 01.14 20:51:32
  发表了文章 2023-01-14 20:51:32

  vue2-ts-template vue2后台管理系统模板

  默认我全局导入了两个变量文件，一个是variable.scss, 另一个是 mixin.scss, 需要啥颜色直接改里面的$mianColor 和 subColor， 包括可以定义elementui的主题颜色

  
• 01.14 20:47:21
  发表了文章 2023-01-14 20:47:21

  Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

  Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

  
• 01.14 20:45:13
  发表了文章 2023-01-14 20:45:13

  修改 elementui nav 下拉菜单内部样式

  修改 elementui nav 下拉菜单内部样式

  
• 01.14 20:43:59
  发表了文章 2023-01-14 20:43:59

  [vuex] vuex requires a Promise polyfill in this browser. vue2兼容ie

  vue-cli 是一个官方推荐的vue项目脚手架，搭建项目就不用那么费劲了。但是搭建好的项目是一般可以ie9的浏览器中打开的（这里指的是vue2）。ie9主要特别蛋疼的地方在于不能使用弹性盒模型。所以一直兼容ie都是从ie10开始进行兼容的。

  
• 01.14 20:40:43
  发表了文章 2023-01-14 20:40:43

  react进阶之refs转发（ts 版本）

  我们知道，函数组件是没有状态的。因此，我们想想获取函数组件，不能是在类组件中那么使用，那么，如果我们想获取函数组件内部的dom 或者react 元素呢？ 此时，我们就需要使用ref转发了.

  
• 01.14 20:38:36
  发表了文章 2023-01-14 20:38:36

  react 组件 进阶之 ref （ts 版本）

  如果ref的值发生了变动（旧的函数被新的函数替代），分别调用旧的函数以及新的函数，时间点出现在componentDidUpdate之前

  
• 01.14 20:33:22
  发表了文章 2023-01-14 20:33:22

  react 进阶高阶组件 HOC

  在了解高阶组件的时候，我们先来会议一下高阶函数，HOF(Higher-Order Function),这个的定义分为广义和侠义

  
• 01.14 20:29:49
  发表了文章 2023-01-14 20:29:49

  react组件进阶 属性类型检查

  我们从名字上就可以知道，静态类型是发生在代码的编写阶段，不发生在代码的运行阶段。所以我们在使用的过程中，就可以及时的提示我们代码是否存在问题等，这个的效果就和 eslint 是一样的。

  
• 01.14 20:27:41
  发表了文章 2023-01-14 20:27:41

  react组件进阶 属性默认值

  上面我的使用方式是在render里面的，这个也可以是constructor里面来进行属性的赋值，具体的使用方式，根据实际情况而定，只要满足在render的前面完成属性的赋值即可。

  
• 01.14 20:25:12
  发表了文章 2023-01-14 20:25:12

  react from表单初探

  表单大家都很清楚，input 框，select， radio 等， 在 vue 中的表单数绑定使用的是 v-model, v-model 是啥，一个语法糖，用于双向数据绑定而已，在react 中是没有这样的语法糖的，需要自己来手动实现

  
• 01.14 20:22:01
  发表了文章 2023-01-14 20:22:01

  react组件的生命周期

  生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的`钩子函数``（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。

  
• 01.14 20:17:30
  发表了文章 2023-01-14 20:17:30

  react 组件之事件 event

  事件和组件的属性，状态state 一样，都是组件的一个属性，按照之前React对组件的约定，由于事件本质上是一个属性，因此也需要使用小驼峰命名法

  
• 01.14 20:13:08
  发表了文章 2023-01-14 20:13:08

  react 组件之组件的状态，state

  组件分为函数组件和类组件，在hooks 出来之前，只有类组件才有状态，现在不管函数组件和类组件，都是含有状态的。这里只讨论类组件的状态

  
• 01.14 20:07:31
  发表了文章 2023-01-14 20:07:31

  react 组件之组件的属性

  react 组件分为两种组件（由于本人会ts(typescript),所以后面的列子都是基于typescript来进行组件编写）

  
• 01.14 20:02:23
  发表了文章 2023-01-14 20:02:23

  前端vscode必装插件

  vscode：免费开源，在开发vue和react 挺好的，如果vue 和 react 结合ts ,那么这个编辑器讲会是一个神器，爽的不得了。而且比较轻量级的。
• 01.14 20:00:09
  发表了文章 2023-01-14 20:00:09

  react jsx初探

  jsx 也可以使用表达式，像在vue的 {{ }} 中一样，可以写表达式，在jsx 的语法是 { }这个里面写表达式

  
• 01.14 19:54:31
  发表了文章 2023-01-14 19:54:31

  初识 react 一分钟上手

  单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

  
• 01.14 19:50:44
  发表了文章 2023-01-14 19:50:44

  typescript(ts) 声明文件

  在typescript中存在两种文件后缀名，一种是 .ts,另一种是.d.ts结尾的文件，我们主要的代码都是写在以.ts文件结尾的文件中。而.d.ts结尾的文件就是声明文件。

  
• 01.14 19:45:12
  发表了文章 2023-01-14 19:45:12

  typescript(ts) 类型演算，类型推导

  我们都知道，ts 具有类型推导，并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型，那么这个需要怎么做呢？

  
• 01.14 19:38:20
  发表了文章 2023-01-14 19:38:20

  vue img 图片需要自定义请求头

  在做项目的时候，展示图片可能会用到nginx 的代理来进行展示，然而有些运维小哥哥喜欢展示技术，在展示图片的时候还需要前提传一个请求头，也就是账号和密码。

  
• 01.14 19:35:42
  发表了文章 2023-01-14 19:35:42

  typescript(ts)面向对象之装饰器

  每一个属性都要验证，我们就要写一个if 来进行判断，100个属性就要写100遍，然后每一个if中的条件还有可能相同，就会导致我们写重复的代码，这是非常麻烦的。

  
• 01.14 19:22:27
  发表了文章 2023-01-14 19:22:27

  Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

  Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

  
• 01.14 19:20:07
  发表了文章 2023-01-14 19:20:07

  this指向约束

  this指向约束

  
• 01.14 19:14:37
  发表了文章 2023-01-14 19:14:37

  ts(typescript)面向对象之索引器

  在TS中，默认情况下，不对索引器（成员表达式）做严格的类型检查使用配置noImplicitAny：true开启对隐式any的检查。

  
• 01.14 19:12:01
  发表了文章 2023-01-14 19:12:01

  ts(typescript)面向对象之静态成员

  在js中，构造函数也是函数，只是特殊的地方在于，构造函数相对于普通函数来说。使用new 的方式来创建，并且构造函数里面是有this的。这个this 的指向是当前构造函数的对象。而普通的函数的this的指向是指向全局window的。

  
• 01.14 19:08:05
  发表了文章 2023-01-14 19:08:05

  ts（typescript）面向对象之类的抽象类

  模板模式：有些方法，所有的子类实现的流程完全一致，只是流程中的某个步骤的具体实现不一致，可以将该方法提取到父类，在父类中完成整个流程的实现(上面代码中的attack())，遇到实现不一致的方法时(把该方法做成抽象方法，字类必须去实现)，将该方法做成抽象方法。这种设计模式是大名鼎鼎的 模板模式

  
• 01.14 19:03:19
  发表了文章 2023-01-14 19:03:19

  ts（typescript）面向对象之类的继承

  super当作属性使用的时候， super 指向的是父类的原型，因此super无法拿到父类的实例属性，只能拿到父类的public和protected的方法，super 如果当方法使用的话，只能在字类的构造函数中并且是第一行使用，需要使用super()来实例化父类里面的属性，确保字类可以获取父类的成员。

  
• 01.14 12:36:35
  发表了文章 2023-01-14 12:36:35

  ts（typescript） 字类 继承父类 在字类构造函数为啥需要先super()调用 分析

  ts（typescript） 字类 继承父类 在字类构造函数为啥需要先super()调用 分析

  
• 01.14 12:34:54
  发表了文章 2023-01-14 12:34:54

  gitup部署vue或者react项目

  方式一： (使用多个分支) 网上的同学大部分都说源代码是master分支，而部署的是另一个分支（就是将vue打包的结果放另一个分支），好处是，每个分支做每个分支的事情，这样分开也挺好的。

  
• 01.14 12:28:43
  发表了文章 2023-01-14 12:28:43

  搭建react项目 搭建ts react项目 使用vite搭建react项目

  搭建react项目 搭建ts react项目 使用vite搭建react项目

  
• 01.14 12:23:38
  发表了文章 2023-01-14 12:23:38

  vue3 + node 实战（实现图片操作功能）总结

  作用是：这样 vite 在执行 runOptimize 的时候中会使用 rollup 对 包含的 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules 下的.vite_opt_cache中，然后配合 resolver 对 包含的包 的导入进行处理：使用编译后的包内容代替原来 qrcanvas 的包的内容，这样就解决了 vite 中不能使用 其他js包 的问题，这部分代码在 depOptimizer.ts 里。

  
• 01.14 12:14:30
  发表了文章 2023-01-14 12:14:30

  node express前端 canvas操作图片 报跨域

  我后台使用的是 node + express ，所以首先定位问题所在，图片是属于静态资源的，然后我们后台解析静态资源使用 express 里面的 static 中间件。所以打开对应的文档，查看对应的配置。

  
• 01.14 12:12:10
  发表了文章 2023-01-14 12:12:10

  typescript (ts) 泛型初探

  泛型相当于是一个类型变量，在定义时，无法预先知道具体的类型，可以用该变量来代替，只有到调用时，才能确定它的类型。很多时候，TS会智能的根据传递的参数，推导出泛型的具体类型

  
• 01.14 12:06:36
  发表了文章 2023-01-14 12:06:36

  ts 手动实现 ts 中的map

  ts 手动实现 ts 中的map

  
• 01.14 12:04:29
  发表了文章 2023-01-14 12:04:29

  ts(typescript) 类(class)初探

  当大家看到typescript（ts） 中的类（class）时候，可能好多人都会想起面向对象，对的，面向对象是许多后台的一种编程思想，比如： 本人曾经接触的java， 里面就是用的是面向对象的思想。但是本文不讨论面向对象，值讨论ts 中 class 新增的语法，和一些使用方法以及注意事项。

  
• 01.14 11:58:32
  发表了文章 2023-01-14 11:58:32

  typescript（ts） interface 与 type 的异同

  接口可以使用 extends 关键字来进行扩展（这个继承是包含关系，如果父级有了，子集不可以声明重复的，会报错的），或者是 implements来进行实现某个接口

  
• 01.14 11:51:10
  发表了文章 2023-01-14 11:51:10

  typescript(ts) 类型兼容性 分析

  ts 类型系统在检查普通字面量是严格检查的，是完全匹配的，如果有一点不一样，ts 都会提出错误，原因嘛，个人觉得你既然使用了类型检查，对于普通的原生数据类型肯定是严格检查，有一点都报错

  
• 01.14 11:15:16
  发表了文章 2023-01-14 11:15:16

  ts(typescript) 的模块化

  ts 中可以通过使用 module 设置编译结果中使用的模块化标准,这个可以依照环境的不同来设置，如浏览器设置 es6， node 设置 commonjs等，这个是灵活处理的。

  
• 01.14 11:09:03
  发表了文章 2023-01-14 11:09:03

  Property xxx was accessed during render but is not defined on instance

  目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。不信的话，你可以增加一个rules和prop(为了调用验证方法，也el-form也加一个ref属性，相当于id或者class选择器的意思)，但是不写model，然后验证的话，会提示缺少model，导致无法验证成功。

  
• 01.14 11:04:01
  发表了文章 2023-01-14 11:04:01

  vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js

  vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js

  
• 01.14 10:58:48
  发表了文章 2023-01-14 10:58:48

  重温js ——位运算

  位运算是在数字底层（即表示数字的 32 个数位）进行运算的。由于位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直观，许多场合不能够使用。

  
• 01.14 10:30:50
  发表了文章 2023-01-14 10:30:50

  ts扩展类型

  接口 interface 含义：是指对协定进行定义的引用类型。其他类型实现接口，以保证它们支持某些操作。接口指定必须由类提供的成员或实现它的其他接口。与类相似，接口可以包含方法、属性、索引器和事件作为成员

  
• 01.14 10:25:59
  发表了文章 2023-01-14 10:25:59

  ts(typescript) 类型约束

  object: 对象， 对象的检查有点弱，里面如果要严格检查里面的每一个属性，需要用到后面的接口或者类，或者是使用字面量的方式。