- 博客(59)
- 收藏
- 关注
RSS订阅原创 ESLint && Prettier
使用ESLint && prettier对代码进行规范实现功能：在提交的时候对代码进行检测实时对代码进行检测自定义代码风格首先安装ESLint和prettieryarn add ESLintyarn add prettier踩坑：如果你全局安装了ESLint，并且项目中用的ESLint也是全局的那你装插件也要安装到全局，不然会导致找不到插件。安装ESLint 插件这里为了同时使用ESLint和Prettier，推荐使用两个插件 eslint-plugin-pre
2021-08-02 15:32:06
872
原创 ts-枚举
枚举什么是枚举？：一些带名字的常量，类似于python的字典，ts支持基于数字和字符串的枚举。文章目录枚举数字枚举字符串枚举异构枚举常量成员和计算成员联合枚举与枚举成员的类型运行时的枚举反向映射外部枚举数字枚举enum Direction { Up = 1, Down, Left, Right}// Up 初始化为1 ，其他成员会自动增长。 Down = 2; Left = 3; Right = 4// 如果完全不给初始值，就会从 0 开始自动增长console.log(Di
2021-07-17 17:32:39
768
原创 ts--类
类公共、私有与受保护类型**默认为 **publicprivate：它就不能在声明它的类的外部访问protected：protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问构造函数也可以被标记成 protected。 这意味着这个类不能在包含它的类外被实例化，但是能被继承readonly你可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化存储器TypeScript支持通过gett
2021-07-17 17:32:02
258
原创 ts-接口
接口TypeScript 的最核心原则就是对所有的传值进行类型检测。在TS里，接口的作用就是为这些类型命名和你的代码进行定义契约。function printLabel(labelledObj:{label:string}){ // 要求传入的对象里必须有一个label属性，并且为string类型 console.log(labelledObj.label)}printLabel({label:'lover hx'})// 上诉功能用interface实现interface L
2021-07-17 17:31:21
200
原创 ts-泛型
泛型介绍软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。初始泛型// 需求： 我们希望定义一个函数，约束传入值和返回值的类型是一样的// 不用泛型function identity(arg:number):number { return arg} // 只适用于传入值 为 number// or ?function indentity(arg:any):an
2021-07-17 17:30:01
190
原创 React-router
Router统一路由器管理一个app用 一个 BroswerRouter 包裹 <Route path={'/about'} component={About}/> <Route path={'/home'} component={Home} />// 在路由器中注册路由，并且 该路由里的内容就展示在 Route这个标签的位置<Link to={'/about'}>About</Link><Link to={'/home'}>Ho
2021-07-07 17:02:31
175
原创 ES...方法
…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> // 1. ... 方法对数组进行展开 let arr1 = [1,23,3421,213] let arr2 = [2231,214,32] consol
2021-07-03 15:20:55
170
原创 React-事件绑定
类组件里的方法两种调用 <button onClick={()=>{ this.changeWether()}}>修改</button> // 1. 本质是在点击的时候，再来找this 调用，这个this肯定是指向实例对象的 <button onClick={this.changeWether.bind(this)}>修改</button> // 2. 本质是 用bind修改this，render里的this 也是指向实例对象的
2021-07-03 15:18:57
72
原创 Redux
Redux什么是是Redux？redux是专门用来做状态管理的JS库，在各大框架中都可以使用，跟react并没有什么直接关系为什么需要Redux?在组件化开发中，我们经常会设计组件间的通信，譬如父子（props）祖孙（context）；但如果许多个组件都需要该状态，那我们就需要一个集中的地方来管理这些状态Redux 原理图React Component 告诉Action Creator 我要做什么，然后Action Creator会创建一个事件，并且传给store，store再让redu
2021-07-03 15:12:13
131
原创 字节面试总结
字节面试问的很深入，并且跟随着交流的场景来，小哥人很好。计网（问了超级多，超级深入）UDP、TCP（分别是什么、区别、TCP的优势）TCP怎么保证有效（在握手之后，怎么保证传输是完整的？）http请求（GET、POST）https（对称加密、非对称加密、两种加密的使用场景、一次请求中是使用一种加密还是两种都可以使用）IP地址的版本JS原型链基本数据类型ES6 的新特性JS 遍历二叉树，并且将同层次的节点存到一个数组中CSSposition 布局，问的超级细，几乎每个属性
2021-06-21 22:08:29
417
2
原创 百词斩面试总结
笔试一道较简单的正则匹配题目面试首先问了很多计网相关的，再问了vue相关，最后问了css和js计网&浏览器浏览器跨域，CROS；Access-Control-Allow-Origin设置值TCP、UDP请求浏览器缓存 cookie、sessionStorage、localStoragehttp缓存（强制缓存和对比缓存304）浏览器是多线程VUE&Webpack生命周期、生命周期函数VUE的数据双向绑定实现原理watchMVVM模型VUE渲染流程Webpa
2021-06-21 22:07:58
515
原创 JS-this的指向问题
this指向问题一般情况下，this指向调用该函数的对象全局作用域和普通函数中的this指向全局对象window*console.log(this) //指向windowfunction fn(){ console.log(this) //也指向window}方法调用中谁调用就指向谁let o ={ sayHi:function(){ console.log(this) }}o.sayHi() //这里的this就指向o这个对象构造函数中this指向构造函数实
2021-06-20 17:38:42
82
原创 ES5中新增的方法
数组方法有 forEach() map() filter() some() every()1. forEacharray.forEach(function(currentValue,index,arr))// currentValue 当前值// index 数组索引// arr 数组本身2. filterfilter() 方法会创建一个新的数组，将符合条件的所有元素放到一个数组里面作为返回值array.filter(function(currentValue,index,arr))/
2021-06-20 17:31:15
119
原创 JS-函数进阶
JS-函数进阶1. 函数的定义方式函数声明function hxx(){ // code here}函数表达式（匿名函数）let fn = function(){ // code here}new Function (构造函数)let fn = new Function('参数1','参数2','函数体')PS：Function 里的参数必须是字符串格式所有函数都是是 Function 的实例函数也属于对象函数的原型图[外链图片转存失败,源
2021-06-20 17:13:34
73
原创 函数的闭包
闭包什么是闭包？闭包(closure)就是有权访问另一个函数作用域中变量的函数 function fn() { let num = 10 // 被访问的这个变量所在的函数 这个函数就称为闭包函数 function fns() { // 访问了另一个函数内的局部变量 console.log(num); } fns
2021-06-20 16:49:42
108
原创 apply bind call
call作用：调用这个函数，比关切修改函数运行时this的指向fun.call(thisArg,arg1,arg2,...)// thisArg 调用该函数时，this的指向// arg1,agr2 传递的参数主要用来构造函数的继承function Father(name,age){ this.name = name this.age = age}// 子类function Son (name,age){ Father.call(Son,name,age) }let so
2021-06-18 11:50:02
83
原创 JS-继承
JS-继承在ES6之前里并没有 extends 方法提供继承，我们可以通过 构造函数+原型对象模拟实现继承。 称为组合继承1. call() 方法function.call(thisArg,arg1,arg2,...)// thisArg 要修改this指向的目标// arg1,arg2 函数需要传入的参数2. 通过构造函数继承父类属性原理：利用call() 方法，把父类的this 改为 指向子类的this，这样在 调用父类的构造函数时，就可以给子类赋值 // 1. 父构造函
2021-06-17 18:17:58
100
原创 JS高级-构造函数和原型
JS高级-构造函数和原型1. 什么是构造函数？ 构造函数时一种特殊的函数，在ES6之前用来初始化对象 1. 构造函数的几点要求：1. 构造函数用于创建某一类对象，首字母要大写2. 构造函数要和new一起使用才有意义 2. 构造函数在执行new时：1. 在内存中创建一个新的空对象2. 让this指向这个新对象3. 执行构造函数里的代码，给这个对象添加属性和方法4. 返回这个新对象（所以构造函数里不需要return）构造函数的问题存在浪费内存的问题function St
2021-06-17 11:52:54
247
1
原创 JS-正则表达式
JS-正则表达式什么是正则表达式 用于匹配字符串中字符组合的模式，在JavaScript中正则表达式也是 对象正则在 JS 中的使用1. 创建正则表达式通过调用 RegExp 对象的构造函数创建let rg = new RegExp(/正则表达式/)通过字面量创建let rg = /正则表达式/2. 测试正则表达式的方法： test() 是正则对象的方法RegExpObj.text(str) // RegExpObj正则表达式对象 str 要检测的字符串正则表达式
2021-06-16 22:51:36
275
1
原创 JS-ES6 类
JS-ES6 类1. 如何定义一个类？class Star{ } //定义了一个叫Star的类let you = new Star(); // 实例化了一个Star类，并赋值给you2. 类中的函数构造函数：在创建类的实例的时候会自动执行的函数class Star{ constrcutor(name,age){ // 这里的this是指向new出来的实例 this.name = name; this.age = age; console.log(this.
2021-06-16 21:08:50
131
原创 vue-router
什么是Vue-router？vue提供的前端路由管理工具，可以方便的设置前端路由。前端路由的规则URL的hash：URL的hash就是锚点，本质上是改变window.location的href属性我们可以通过直接赋值location.hash来改变href，但是页面不刷新HTML5的history模式：history接口时HTML5新增的，他有五种模式改变URL但不刷新页面his...
2021-05-14 15:38:51
68
原创 什么是前端渲染和后端渲染
后端渲染谈到后端渲染，必然会说到网站开发的三个著名阶段。包括后端路由阶段前后端分离阶段单页面富应用阶段后端路由阶段在早期的网站开发中，整个html页面都是服务器来渲染的，服务器直接生产渲染好对应的html页面，返回给客户端进行展示。在这个过程中存在一些问题，一个网站，很多的页面，服务器是怎么处理的呢？首先，一个页面有自己对应的网站，也就是一个URLURL会发送到服务器，服务器通过...
2021-05-12 03:21:22
573
原创 webpack-Vue的终极写法
步骤一：安装Vue并在index.js文件中引入npm install vue --save运行时依赖，所以不加-devimport Vue from 'vue'步骤二：将webpack打包的版本调整为runtime-compiler版本在webpack.config.js中步骤三：进行vue封装在 .vue文件中写我们的template需要的地方用 import 引入 ...
2021-04-28 14:52:00
76
原创 webpack-常用plugin及本地服务器配置
什么是plugin？plugin是webpack的插件，对现有的框架进行拓展，是为了方便人们使用。比如非常常见的vscode插件，chrome插件webpack的插件有哪些功能呢？只有你想不到，没有开发者做不到，今天就来介绍几个常见的plugin添加版权pluginName： BannerPlugin webpack自带的plugin作用： 为打包的文件添加版权声明以下是web...
2021-04-28 02:23:36
174
原创 webpack-配置
什么是webpack？从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。前端模块化常见模块化方案：AMD、CMD、CommonJS、ES6 但！！！浏览器只支持ES6，那我们想用其他的方案怎么办呢？解决方案：webpack当然，这只是webpack的一个功能，webpack还具有其他很多功能，比如es6转es5，less转css等webpack安...
2021-04-22 04:26:00
68
原创 css-过度延迟
基础知识动画属性不是所有的css属性都有过渡效果，一般来讲有中间值的属性都可以设置动画。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties元素状态初始状态：指当页面加载后的样式状态，下面是表单设置的初始样式。变化形态：指元素由初始状态变化后的状态，比如鼠标放上、表单获得焦点后的形态...
2021-04-19 09:15:30
577
原创 css-帧动画
什么是帧动画？通过定义一段动画中的关键点、关健态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。关键帧使用@kerframes规则配置动画的各个帧。from 表示起点 (若省略，css会以默认状态帮你创建)to 表示终点 (若省略，css会以默认状态帮你创建)可以用百分数 如20%来控制动画运行到20% 时候的精确状态基本使用<styl...
2021-04-19 05:16:07
677
原创 js-执行机制
js执行机制js是单线程js语言一大特点就是单线程，也就是说，同一时间只能做一件事。单线程就意味着所有任务都需要排队，只有当前一个任务结束之后，才会执行后一个任务。同步和异步为了解决这个问题，利用多核CPU的计算能力，HTML5提出了 Web Worker标准，允许js脚本创建多个进程，于是js中出现了同步和异步。同步任务同步任务都在主线程上执行，形成一个执行栈异步任务js 的异...
2021-04-18 21:21:06
78
原创 js-BOM
什么是BOM？BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 和 DOM 对比DOMBOM文档对象模型浏览器对象模型DOM就是把文档当作一个对象来看把浏览器当做一个对象来对待DOM的顶级对象是documentBOM的顶级对象是windowDOM主要学习的是操作页面的元素BOM学...
2021-04-17 19:49:34
93
原创 js-键鼠事件
常用键鼠事件总结常用鼠标事件鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标谈起触发onmousedown鼠标按下触发例子：禁止鼠标右键菜单document.addEventListener('conte...
2021-04-17 12:05:13
84
原创 js-DOM事件高级
DOM事件流要搞清楚什么是事件冒泡，就得先弄清楚在DOM里面，事件是怎么传播的。事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。DOM 事件流分为3个阶段：捕获阶段当前目标阶段冒泡阶段事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。事件捕获： 网景最早提出...
2021-04-17 06:16:04
91
原创 css-变形动画
基础知识坐标系统要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。共有三个轴，就跟高中学的立体坐标系类似。X轴是水平轴Y轴是垂直轴Z轴是纵深轴变形操作使用 transform 来控制元素变形操作，包括控制移动、旋转、倾斜、3D转换等选项说明none定义不进行转换translate(x,y)定义2D转换translate3d(x,y,z)定义3D转换trans...
2021-04-12 06:10:53
220
原创 爬虫--selenium使用心得
超级鹰验证码识别反时间戳反爬机制在自动化操作党课时发现，党课登录界面的验证码采用了时间戳反爬，在我获取到图片服务器地址后，再向这个地址发起请求时，会自动更改后面的时间戳，查网页源码发现：于是采用selenium截屏操作进行验证码识别。1.找到该元素2.使用screenshot方法截屏坑在爬取表格的时候，用xpath解析数据时，不要写tbody，xpath在处理文档时候把他给剔除了...
2021-04-09 11:38:08
222
原创 css--栅格系统
什么是栅格？CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。兼容性：参考 https://caniuse.com/1.声明容器块级容器display:grid;行级容器display:inline-grid;2.划分行列grid-template-columns 划分列数grid-template-ro...
2021-04-08 23:05:21
381
原创 css--浮动布局
浮动布局使用float：left；给浮动定义。float属性定义元素在哪个方向浮动。在css中任何元素都可以浮动，不论元素本身是何种元素，在浮动时都会生成一个块级框。选项说明left向左浮动right向右浮动none不浮动文档流没有设置浮动的块级元素是独占一行的。丢失空间：如果两个元素，只给第一个元素设置浮动，第二个元素不进行设置，则第一个元素空间位置会丢失，第二个元素会重叠到第...
2021-04-07 20:07:06
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人