wytraining

原创 vue实现滚动加载

vue实现多个场景下的滚动加载

原创 浏览器——学习笔记

02. TCP协议：如何保证页面文件能被完整送达浏览器？IP：把数据包送达目的主机计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。UDP：把数据包送达应用程序UDP 中一个最重要的信息是端口号，端口号其实就是一个数字，每个想访问网络的程序都需要绑定一个端口号。通过端口号 UDP 就能把指定的数据包发送给指定的程序了。IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序。...

原创 知识梳理——vue

1.Vue模板编译的原理就是将template（模板）转化为render（渲染函数）的过程。会经历以下阶段：1.解析器： 将模板解析成AST（abstract syntax tree 抽象语法树）2.优化器： 遍历AST标记静态节点（生成渲染函数之前这个阶段，需要做一个优化操作：遍历一遍AST，给所有静态节点做一个标记，这样在虚拟DOM中更新节点时，如果发现这个节点有这个标记，就不会重新渲染它。）3.代码生成器： 将优化后的AST树转换为可执行的代码（渲染函数）...

原创 知识梳理——JavaScript

1. 说说前端中的事件流HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。什么是事件流：事件流描述的是从页面中接收事件的顺序.DOM2级事件流包括下面几个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段addEventListener：addEventListener 是DOM2 级事件新增的指定事件处

原创 知识梳理——计算机基础

1. Cookie如何防范XSS攻击XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。结果应该是这样的：Set-Cookie=…...

原创 star

一：进程与线程1.线程和进程的区别是什么？2.浏览器的多线程

原创 利用webSocket实现消息的实时推送

webSocket实现实现推送消息WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。以前的推送技术使用 Ajax 轮询，浏览器需要不断地向服务器发送http请求来获取最新的数据，浪费很多的带宽等资源。使用webSocket通讯，客户端和服务端只需要一次握手建立连接，就可以互相发送消息，进行数据传输，更实时地进行通讯。相比http，减少了请求次数，不需要客户端多次请求，服务器处理业务完毕后主动向客户端推送消息。test.html<!DOCTYPE h

原创 前端利用scss实现一键换肤功能

1.要实现系统的一键换肤功能，首先要将颜色作为变量提取出来，并为两种主题配置颜色variables.scss//浅色主题$light-theme: ( base-color: #000, background-color: #ccc);//深色主题$dark-theme: ( base-color: #fff, background-color: #000);//定义映射集合$themes: ( light

原创 前端将echarts的图和element表格 一起导出到excel中

三：给对应表格添加id，绑定方法。五：导出echarts+表格。四：只导出echarts。

原创 前端element表格导出excel

前端表格导出excel

原创 用原生js实现tooltip的功能

用原生js实现tooltip的功能

原创 vue3中的父子组件传值

【代码】vue3中的父子组件传值。

原创 axios 如何取消请求

还可以使用 cancel token 取消一个请求，Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。开始，Axios 支持以 fetch API 方式——开始已被弃用，不应在新项目中使用）

原创 webpack 的打包流程

Transform（转化）阶段：这个阶段babel通过对于这棵树的遍历，从而对于旧的AST进行增删改查，将新的js语法节点转化称为浏览器兼容的语法节点。Parse（解析）阶段：这个阶段将我们的js代码(字符串)进行词法分析生成一系列tokens，之后再进行语法分析将tokens组合称为一颗AST抽象语法树。这一步会从我们配置的webpack.config.js中读取到对应的配置参数和shell命令中传入的参数进行合并得到最终打包配置参数。同时分析模块依赖的模块，递归进行模块编译工作。

原创 前端性能优化

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度。来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中。2.组件库按需引入的原理：只引入指定组件和对应的样式，来实现减少组件库体积大小（借助 babel-plugin-component 插件）2.在 vue.config.js 中引入。

原创 浏览器的垃圾回收机制

相比于新生代，老生代的垃圾回收就比较容易理解了，上面我们说过，对于大多数占用空间大、存活时间长的对象会被分配到老生代里，因为老生代中的对象通常比较大，如果再如新生代一般分区然后复制来复制去就会非常耗时，从而导致回收执行效率不高，所以老生代垃圾回收器来管理其垃圾回收执行，它的整个流程就采用的就是上文所说的。（V8 整个堆内存的大小就等于新生代加上老生代的内存）它的标记阶段和标记清除算法没有什么不同，只是标记结束后，标记整理算法会将活着的对象（即不需要清理的对象）向内存的一端移动，最后清理掉边界的内存。

原创 TypeScript 中的数据类型

在编写代码时，有时并不清楚一个值是什么类型，这时就需要用到any类型，它是一个任意类型，定义为any类型的变量就会绕过TypeScript的静态类型检测。对于声明为any类型的值，可以对其进行任何操作，包括获取事实上并不存在的属性、方法，并且 TypeScript 无法检测其属性是否存在、类型是否正确。never类型表示的是那些永不存在的值的类型。never类型是任何类型的子类型，也可以赋值给任何类型；void 和 any 相反，any 是表示任意类型，而 void 是表示没有类型，就是什么类型都不是。

原创 TypeScript 中常用的内置工具类型

1.源码：Pick工具类型接收了两个泛型参数：第一个 T 为给定的参数类型，而第二个参数为需要提取的键值 key。有了参数类型和需要提取的键值 key，我们就可以通过映射类型很容易地实现 Pick 工具类型的功能。1.源码：从 T 中剔除可以赋值给 U 的类型，如果 T 是 U 的子类型，则返回 never 不是则返回 T。1.源码：映射类型在键值的后面使用了一个 - 符号，- 与?1.源码：接收了两个泛型参数：第一个参数作为接口类型的属性，第二个参数作为接口类型的属性值。

原创 lottie-web 前端动画类库的使用

lottie-web 前端动画类库的使用

原创 vue动态修改标签页的icon、系统名称

vue动态修改标签页的icon、系统名称

原创 iview实现表格的expand和编辑功能

iview表格实现的编辑和expand功能

原创 vue使用beforeRouteLeave实现路由的监听，在跳转前出现确认弹窗

vue实现路由的监听，在跳转前出现确认弹窗

原创 vue页面中实现锚点的功能，平滑移动至被定位处

vue页面中实现锚点的功能，平滑移动至被定位处

原创 iview的穿梭框中加入列名

设置iview穿梭框中的列名

原创 iview表单校验文件的必填

1.问题描述iview中使用form组件来校验各个字段的必填项，其中在校验文件时，即使文件已上传成功，依旧提示“请上传文件！”2.重点在formValidate.file中定义一个validator的方法文件上传成功后，清除对文件必填项的校验：this.$refs.formRef.validateField('file') 3.解决方案1.html：<Form ref='formRef' :model='resultForm' :rules='formVali

原创 采用微前端来实现新老技术的兼容问题

1.什么是微前端？微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系。2.微前端架构具备的核心价值技术栈无关：主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技

原创 MyPromise的实现

1.实现一个MyPromisefunction resolvePromise(promise2,x,resolve,reject){ //判断x是不是promise //规范中规定：我们允许别人乱写，这个代码可以实现我们的promise和别人的promise 进行交互 if(promise2 === x){//不能自己等待自己完成 return reject(new TypeError('循环引用')); } // x是除了null以外的对象或者函数

原创 nvm的安装与使用

1.下载地址：https://github.com/coreybutler/nvm-windows/releases2.检查nvm版本nvmnvm下载 安装 使用

原创 iview实现表格的全选、反选、清空、统计、单选等功能

iview实现表格的全选、反选、清空、统计、单选等功能

原创 vue中的动态组件：使用is

vue 可以通过 component 元素加一个特殊的 is 来实现组件的动态切换html：<ul class='tabs'> <li v-for='item in tabList' :key='item.name' :class='{actived: currentTab===item.value}' @click='changeTab(item)' > {{ item.name }

原创 自定义时间轴组件样式

实现一个时间轴的样式，并且点击可以展开详情效果图如下：1.html<div class='timeline-step'> <div class='time-list' v-for='(item, index) in timeList' :key='index' > <div class='left'> <img :src='

原创 前端打tag，以及cherry-pick的用法

1.打2.5版本的tag之前开发的2.5版本已经完成了，就需要打个tag，并且写好changeLog，记录当前版本主要开发了什么功能1.查看当前所有的taggit tag2.创建tag，并推送到远程git tag v2.5.0.0// 推送指定的taggit push origin v2.5.0.0//一次性推送全部taggit push origin --tags3.删除本地tag（未推送到远程）git tag -d v2.5.0.04.删除远程的tag（需要先删除本地的

原创 常见的表单校验

form表单的校验<Form ref='drawerForm' :label-width='80' :rules='formValidators' :model='info'> <FormItem label='单位名称：' prop='name' > <Input v-model.trim='info.name' clearabl

原创 Interllij IDEA 中一些基本的配置

1.修改初始化的vue模板Settings -> Editor -> File and Code Templates2.保存时自动格式化代码，并且根据ESLint检测Settings -> Tools -> Actions on Save3.Terminal工具不识别node/npm等命令Settings -> Tools -> Terminal...

原创 重学前端——大纲

原创 vue的路由守卫与axios的请求拦截

vue的路由守卫与axios的请求拦截

原创 git的基本操作

1.clone到本地（配置账号和密码）git clone https://用户名:密码@git.com……2.clone指定分支的代码git clone -b wuyt https://git.com……3.拉取指定的分支git pull origin dev4.提交到指定分支上git push origin master5.切换分支git checkout dev6.查看上次提交之后是否有修改git status7.查看提交记录git log...

原创 前端配置多个后台地址： baseUrl

1.vue.config.js 中配置不同的前缀，以及所对应的后台地址devServer: { proxy: { "/api": { target: "http://172.xx.x.xxx:xxxx", // 地址1 //表示/api替换成该地址 changeOrigin: true, pathRewrite: { "^/api": "", //重写api为空

原创 使用echarts改变窗口大小时，图表自适应

核心:// 监听窗口变化window.onresize = function () { myChart.resize()}全部代码：<template> <div class="trend-line"> <div id="trend-line"></div> </div></template><script> export default { n

原创 class类

类中的构造器constructor不是必写的，要对实例进行初始化的操作，如添加指定属性时才写如果子类继承了父类，且子类写了构造器，那么子类构造器中的super是必须要调用的，且要放在最前面类中定义的所有方法，都是放在了类的原型对象上，供实例去使用 // 创建一个 Person 类 class Person { // 构造函数 constructor(name, age) { // 构造函数中的 this 是谁？ ———— 类的实例对象 th.