暂时未有相关云产品技术能力~
暂无个人介绍
react 组件进阶之 pureComponent(纯组件)
上下文(context): 是指一个组件里面包含所有子组件组成dom 的树,那么在这颗虚拟dom树中的环境,就称之为上下文。说到树这个概念,稍微提一笔,在树中,每一个节点我们都可以理解他是一颗树的根节点(起始节点)。
默认我全局导入了两个变量文件,一个是variable.scss, 另一个是 mixin.scss, 需要啥颜色直接改里面的$mianColor 和 subColor, 包括可以定义elementui的主题颜色
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
修改 elementui nav 下拉菜单内部样式
vue-cli 是一个官方推荐的vue项目脚手架,搭建项目就不用那么费劲了。但是搭建好的项目是一般可以ie9的浏览器中打开的(这里指的是vue2)。ie9主要特别蛋疼的地方在于不能使用弹性盒模型。所以一直兼容ie都是从ie10开始进行兼容的。
我们知道,函数组件是没有状态的。因此,我们想想获取函数组件,不能是在类组件中那么使用,那么,如果我们想获取函数组件内部的dom 或者react 元素呢? 此时,我们就需要使用ref转发了.
如果ref的值发生了变动(旧的函数被新的函数替代),分别调用旧的函数以及新的函数,时间点出现在componentDidUpdate之前
在了解高阶组件的时候,我们先来会议一下高阶函数,HOF(Higher-Order Function),这个的定义分为广义和侠义
我们从名字上就可以知道,静态类型是发生在代码的编写阶段,不发生在代码的运行阶段。所以我们在使用的过程中,就可以及时的提示我们代码是否存在问题等,这个的效果就和 eslint 是一样的。
上面我的使用方式是在render里面的,这个也可以是constructor里面来进行属性的赋值,具体的使用方式,根据实际情况而定,只要满足在render的前面完成属性的赋值即可。
表单大家都很清楚,input 框,select, radio 等, 在 vue 中的表单数绑定使用的是 v-model, v-model 是啥,一个语法糖,用于双向数据绑定而已,在react 中是没有这样的语法糖的,需要自己来手动实现
生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的`钩子函数``(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。
事件和组件的属性,状态state 一样,都是组件的一个属性,按照之前React对组件的约定,由于事件本质上是一个属性,因此也需要使用小驼峰命名法
组件分为函数组件和类组件,在hooks 出来之前,只有类组件才有状态,现在不管函数组件和类组件,都是含有状态的。这里只讨论类组件的状态
react 组件分为两种组件(由于本人会ts(typescript),所以后面的列子都是基于typescript来进行组件编写)
vscode:免费开源,在开发vue和react 挺好的,如果vue 和 react 结合ts ,那么这个编辑器讲会是一个神器,爽的不得了。而且比较轻量级的。
jsx 也可以使用表达式,像在vue的 {{ }} 中一样,可以写表达式,在jsx 的语法是 { }这个里面写表达式
单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
在typescript中存在两种文件后缀名,一种是 .ts,另一种是.d.ts结尾的文件,我们主要的代码都是写在以.ts文件结尾的文件中。而.d.ts结尾的文件就是声明文件。
我们都知道,ts 具有类型推导,并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型,那么这个需要怎么做呢?
在做项目的时候,展示图片可能会用到nginx 的代理来进行展示,然而有些运维小哥哥喜欢展示技术,在展示图片的时候还需要前提传一个请求头,也就是账号和密码。
每一个属性都要验证,我们就要写一个if 来进行判断,100个属性就要写100遍,然后每一个if中的条件还有可能相同,就会导致我们写重复的代码,这是非常麻烦的。
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
在TS中,默认情况下,不对索引器(成员表达式)做严格的类型检查使用配置noImplicitAny:true开启对隐式any的检查。
在js中,构造函数也是函数,只是特殊的地方在于,构造函数相对于普通函数来说。使用new 的方式来创建,并且构造函数里面是有this的。这个this 的指向是当前构造函数的对象。而普通的函数的this的指向是指向全局window的。
模板模式:有些方法,所有的子类实现的流程完全一致,只是流程中的某个步骤的具体实现不一致,可以将该方法提取到父类,在父类中完成整个流程的实现(上面代码中的attack()),遇到实现不一致的方法时(把该方法做成抽象方法,字类必须去实现),将该方法做成抽象方法。这种设计模式是大名鼎鼎的 模板模式
super当作属性使用的时候, super 指向的是父类的原型,因此super无法拿到父类的实例属性,只能拿到父类的public和protected的方法,super 如果当方法使用的话,只能在字类的构造函数中并且是第一行使用,需要使用super()来实例化父类里面的属性,确保字类可以获取父类的成员。
ts(typescript) 字类 继承父类 在字类构造函数为啥需要先super()调用 分析
方式一: (使用多个分支) 网上的同学大部分都说源代码是master分支,而部署的是另一个分支(就是将vue打包的结果放另一个分支),好处是,每个分支做每个分支的事情,这样分开也挺好的。
搭建react项目 搭建ts react项目 使用vite搭建react项目
作用是:这样 vite 在执行 runOptimize 的时候中会使用 rollup 对 包含的 包重新编译,将编译成符合 esm 模块规范的新的包放入 node_modules 下的.vite_opt_cache中,然后配合 resolver 对 包含的包 的导入进行处理:使用编译后的包内容代替原来 qrcanvas 的包的内容,这样就解决了 vite 中不能使用 其他js包 的问题,这部分代码在 depOptimizer.ts 里。
我后台使用的是 node + express ,所以首先定位问题所在,图片是属于静态资源的,然后我们后台解析静态资源使用 express 里面的 static 中间件。所以打开对应的文档,查看对应的配置。
泛型相当于是一个类型变量,在定义时,无法预先知道具体的类型,可以用该变量来代替,只有到调用时,才能确定它的类型。很多时候,TS会智能的根据传递的参数,推导出泛型的具体类型
ts 手动实现 ts 中的map
当大家看到typescript(ts) 中的类(class)时候,可能好多人都会想起面向对象,对的,面向对象是许多后台的一种编程思想,比如: 本人曾经接触的java, 里面就是用的是面向对象的思想。但是本文不讨论面向对象,值讨论ts 中 class 新增的语法,和一些使用方法以及注意事项。
接口可以使用 extends 关键字来进行扩展(这个继承是包含关系,如果父级有了,子集不可以声明重复的,会报错的),或者是 implements来进行实现某个接口
ts 类型系统在检查普通字面量是严格检查的,是完全匹配的,如果有一点不一样,ts 都会提出错误,原因嘛,个人觉得你既然使用了类型检查,对于普通的原生数据类型肯定是严格检查,有一点都报错
ts 中可以通过使用 module 设置编译结果中使用的模块化标准,这个可以依照环境的不同来设置,如浏览器设置 es6, node 设置 commonjs等,这个是灵活处理的。
目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。不信的话,你可以增加一个rules和prop(为了调用验证方法,也el-form也加一个ref属性,相当于id或者class选择器的意思),但是不写model,然后验证的话,会提示缺少model,导致无法验证成功。
vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
位运算是在数字底层(即表示数字的 32 个数位)进行运算的。由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直观,许多场合不能够使用。
接口 interface 含义:是指对协定进行定义的引用类型。其他类型实现接口,以保证它们支持某些操作。接口指定必须由类提供的成员或实现它的其他接口。与类相似,接口可以包含方法、属性、索引器和事件作为成员
object: 对象, 对象的检查有点弱,里面如果要严格检查里面的每一个属性,需要用到后面的接口或者类,或者是使用字面量的方式。
node环境搭建typescript 环境,懒人版
tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
如果需要使用状态管理工具,那个在src下面创建一个store文件夹,然后里面写vuex的配置,我这里使用的是模块,模块里面的内容和vuex3是一样的,调用方式也是一样的
vue vue3 实现滚动进度条,斑马纹进度条
如果一个进程B是由进程A开启,则A是B的父进程,B是A的子进程,子进程会继承父进程的一些信息,但仍然保持相对独立
b.资源的加载顺序。资源的加载顺序决定了页面的逻辑能否正常的执行,当页面加载顺序出现问题导致页面无法正常执行,最终导致白页现象。或者网速较慢,下载相关资源很慢,这时就会出现暂时的空白页的现象。