<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[-]]></title><description><![CDATA[呀，你来了]]></description><link>https://blog.youkuaiyun.com/YL971129</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; YL971129]]></copyright><item><title><![CDATA[javascript事件循环Event Loop，宏任务与微任务]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123802136</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123802136</guid><author>YL971129</author><pubDate>Mon, 28 Mar 2022 18:18:38 +0800</pubDate><description><![CDATA[1、javascript的运行机制介绍
	javascript是单线程的语言，默认情况下一个时间点只能做一件事情，因此引入异步模型

	javascript是一门解释性脚本语言，即（边解释边运行）


2、阻塞式代码和非阻塞式代码

阻塞式代码：
同步代码代码会严格按照单线程(从上到下， 从左到右)执行代码逻辑，以此标准来进行代码的解释和运行
const a = 1,
    b = 2
let d1 = new Date().getTime(),
    d2 = new Date().getTime(.]]></description><category></category></item><item><title><![CDATA[Vue2.x + element ui 导入导出excel]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123767476</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123767476</guid><author>YL971129</author><pubDate>Sun, 27 Mar 2022 01:56:35 +0800</pubDate><description><![CDATA[实现内容：

导入excel文件最终将其展现在页面table中
将页面table中的表格转换为excel文件

仓库地址：
完整代码在这里：https://github.com/Nigo-yyy/vue-excel
依赖安装：
需要安装三个依赖包， 和两个JS包
npm包：
分别安装 file-saver、 xlsx、 script-loader三个依赖
npm install -S file-saver xlsx（这里其实安装了2个依赖）
npm install -D script-loader
JS文件]]></description><category></category></item><item><title><![CDATA[vue2.x el-table二次封装支持编辑修改]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123675870</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123675870</guid><author>YL971129</author><pubDate>Wed, 23 Mar 2022 01:05:40 +0800</pubDate><description><![CDATA[最近开发新业务，看到有些功能一样的表格，想着封装一个组件，记录一下：
大概实现是：

封装一个通用的表格
接收两个数组， 一个控制行数，一个控制列数
表格可进行编辑操作

官方文档

图中我们可以看到：

:data="tableData"中 传入的tableData用来控制表格行数
el-table-column用来控制列数，有几个el-table-column, 表格就有几列
因此我们再定义一个数组，去对应tableData中的要显示的项，用来产生需要的列

comTable代码如下：
//data是从]]></description><category></category></item><item><title><![CDATA[mac m1使用picGo + gitee搭建免费图床]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123605267</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123605267</guid><author>YL971129</author><pubDate>Sat, 19 Mar 2022 23:11:18 +0800</pubDate><description><![CDATA[简介
图床也就是储存图片的服务器，用来存储我们计算机上的图片，写博客时更加方便了不是
因为最近github访问很慢，经常打不开，也是就选择国内gitee去托管图片
其实单独使用gitee也可以搭建图床，使用picGo能使我们的操作更加方便
picGo是一个很方便的工具，可以帮我们把图片push到预设好的仓库中，最终返回图片地址，以供我们使用
好了，直接开始
准备工作
需要两步：


gitee上新建一个仓库，存放图片


下载picGo，并进行配置
机器是m1的mac


一、gitee新建仓库并进行设置
]]></description><category></category></item><item><title><![CDATA[vue2.6 element-ui 按需引入样式未生效 Error: Cannot find module ‘babel-preset-es2015解决]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123547471</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123547471</guid><author>YL971129</author><pubDate>Thu, 17 Mar 2022 13:02:08 +0800</pubDate><description><![CDATA[element-ui按需引入遇到两个问题

元素会显示，但是样式没有生效
编译过程中遇到错误

Error: Cannot find module ‘babel-preset-es2015‘
官方文档：element-ui按需引入



一、样式问题：
引入组件的同时，要引入样式文件
main.js中：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入组件及对应的样式文件
import {]]></description><category></category></item><item><title><![CDATA[echarts 格式化legend并设置样式]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123539855</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123539855</guid><author>YL971129</author><pubDate>Thu, 17 Mar 2022 00:07:54 +0800</pubDate><description><![CDATA[要实现的效果

官方文档：echarts-api
要实现两个需求：
- legend每一项默认只会显示类目名称，要添加相对应的值进去
- 设置 类目名称 对应值 各自的样式
legend相关配置如下：
legend: {
					//纵向排列
                    orient: 'vertical',
                    //与外部容器之间的距离
                    left: '5%',
                    top:'30%]]></description><category></category></item><item><title><![CDATA[JS 函数中的this、手写call、 apply、bind]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123094202</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123094202</guid><author>YL971129</author><pubDate>Wed, 23 Feb 2022 16:54:49 +0800</pubDate><description><![CDATA[函数中的this指向
this可以理解为函数的执行上下文，在 普通函数 和 箭头函数 中this的指向是不同的
this是个关键字，JS中不允许给this赋值

普通函数

this指向谁取决于函数最终被谁调用。
普通函数中的this只有函数被调用时才能确定指向谁


箭头函数

箭头函数中的this是静态的，不可被被改变
this总是继承自身定义环境所在的this值，即 箭头函数没有this, this会作为变量一直向上级词法作用域查找，直到找到为止



普通函数(function) this绑定规则：]]></description><category></category></item><item><title><![CDATA[vue-router实现(hash模式与history模式)]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123059331</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123059331</guid><author>YL971129</author><pubDate>Tue, 22 Feb 2022 00:50:58 +0800</pubDate><description><![CDATA[核心代码：
Main.js:
import Vue from 'vue'
import Router from 'vue-router'
//Vue.use可以传入对象和函数
//传入函数：直接调用这个函数
//传入对象：调用该对象的install方法
Vue.use(Router)

const router = new Router({    //配置路由规则
  routes:[    //配置路由
    
  ]
})
//创建vue实例并传入刚刚创建好的router对象
new Vue({
  ]]></description><category></category></item><item><title><![CDATA[ES6模块化理解]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/123058782</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/123058782</guid><author>YL971129</author><pubDate>Mon, 21 Feb 2022 23:56:43 +0800</pubDate><description><![CDATA[ES6之前，虽然有commonJS和AMD两种模块加载方案，但是JS在语言标准的层面上是没有模块体系的
为了解决这一问题，便引入了export import命令来实现模块化
ES6模块化与commonJS区别：
一、
// CommonJS模块
let { state, exiets, redafile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let r]]></description><category></category></item><item><title><![CDATA[gulp-sass 使用报错Error:gulp-sass no longer has a default Sass compiler； please set one yourself]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122953933</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122953933</guid><author>YL971129</author><pubDate>Tue, 15 Feb 2022 23:03:53 +0800</pubDate><description><![CDATA[使用gulp-sass报错，报错信息如下：

跟个上面提示，我们发现，需要自己指定一个sass解释器， 即安装sass或者node-sass，便执行以下操作
npm i sass -d
并且在引入gulp-sass时，要这样写
const sass = require('gulp-sass')(require('sass'))

然后gulp-sass就可以使用了

...]]></description><category></category></item><item><title><![CDATA[vue 指定元素滚动到页面可视区域]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122805407</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122805407</guid><author>YL971129</author><pubDate>Mon, 07 Feb 2022 11:27:26 +0800</pubDate><description><![CDATA[使用场景：
1、点击页面tab，或步骤条的某一步，使其对应元素滚动到页面可视区域
2、使遍历而来的list滚动到页面可视区域

实现：
使用el.scrollIntoView() API实现
scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。
注意：要设置页面(最外层容器)可滚动，否则不会生效
语法：
	element.scrollIntoView(); // 等同于element.scrollIntoView(true)
	element.s]]></description><category></category></item><item><title><![CDATA[element-ui el-steps自定义进度图标及完成图标]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122690591</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122690591</guid><author>YL971129</author><pubDate>Tue, 25 Jan 2022 19:08:14 +0800</pubDate><description><![CDATA[项目中需要自定义 el-steps的图标 同时完成时图标也要进行修改，记录一下，有写的不好的地方欢迎大佬们指正:
实现步骤：
首先在templete部分：
el-step中添加一个插槽 slot=“icon”， 为其添加类名，以便于修改样式
&lt;el-steps class="handlerSteps"&gt;
          &lt;el-step
            @click.native="scrollToTop('build')"
            :status="flag.]]></description><category></category></item><item><title><![CDATA[Vue自定义指令， 自定义指令封装全局防抖函数]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122477463</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122477463</guid><author>YL971129</author><pubDate>Thu, 13 Jan 2022 16:45:39 +0800</pubDate><description><![CDATA[Vue自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue允许我们注册自定义指令用于元素上
当我们需要对普通 DOM 元素进行底层操作时，就可以用到用到自定义指令。
如何注册
我们可以全局注册自定义指令， 也可以局部注册
全局注册：
全局注册自定义指令是将我们的自定义指令挂载到vue实例上的，在项目中都可以使用
全局指令注册方法为：Vue.directive(dName, options) 传入两个参数
分别是 指令名  和 配置对象
创建完之后，我们就可以使用 v-指令名]]></description><category></category></item><item><title><![CDATA[防抖与节流]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122422553</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122422553</guid><author>YL971129</author><pubDate>Tue, 11 Jan 2022 00:32:46 +0800</pubDate><description><![CDATA[防抖与节流
什么情况下需要防抖与节流：
在一些高频率事件触发的场景下，不希望对应的事件处理函数多次执行
比如：
​	滚动事件
​	input输入框的模糊查询
轮播图切换
​	点击操作等
浏览器默认情况下都会有自己的监听事件间隔(谷歌浏览器 4 - 6 ms)， 如果检测到多次，就会造成不必要的资源浪费
防抖：对于高频操作来说，我们只希望识别一次点击，即只触发一次对应的事件，第一次或最后一次都可以
节流：对于高频操作，可以自行设定事件触发频率，以使多次触发的事件，在规定时间内，只触发一次
防抖实现：
&lt;]]></description><category></category></item><item><title><![CDATA[JS性能优化策略]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122401844</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122401844</guid><author>YL971129</author><pubDate>Sun, 09 Jan 2022 23:43:09 +0800</pubDate><description><![CDATA[JS性能优化策略
一、减少不必要的全局变量使用
​	为什么要尽量少使用全局变量呢？

全局变量定义在全局执行上下文，是所有作用域链的顶端，从下向上根据作用域链查找的时间损耗是比较大的，代码执行效率相对是比较低的。
全局执行上下文一直存在于上下文执行栈，直到程序退出才会被释放，不利于GC进行垃圾回收。

因此，在能用局部变量解决的地方，就用局部变量
验证一下：
let i , str = ""
function packageDom(){
    console.time('使用全局变量')
    for(]]></description><category></category></item><item><title><![CDATA[JS内存管理]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122290244</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122290244</guid><author>YL971129</author><pubDate>Mon, 03 Jan 2022 17:53:21 +0800</pubDate><description><![CDATA[内容概要：
在程序运行中，性能优化是必不可少的。从认识内存空间的使用，到垃圾回收的机制，一步步地写出更高效的代码

内存管理
垃圾回收与常见GC算法
V8引擎的垃圾回收
Performance工具
代码优化示例

内存管理介绍：

内存： 由可读写单元组成， 表示一片可操作空间
管理： 人为的去操作一片空间的申请、使用和释放
内存管理： 开发者主动申请空间、 使用空间、 释放空间
流程： 申请-使用-释放

JS中的内存管理
JS中的内存管理是自动进行的，没有相关API去进行实现，以下内容就可以看做是JS中]]></description><category></category></item><item><title><![CDATA[JS内存管理]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122290172</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122290172</guid><author>YL971129</author><pubDate>Mon, 03 Jan 2022 17:48:42 +0800</pubDate><description><![CDATA[内容概要：
在程序运行中，性能优化是必不可少的。从认识内存空间的使用，到垃圾回收的机制，一步步地写出更高效的代码

内存管理
垃圾回收与常见GC算法
V8引擎的垃圾回收
Performance工具
代码优化示例

内存管理介绍：

内存： 由可读写单元组成， 表示一片可操作空间
管理： 人为的去操作一片空间的申请、使用和释放
内存管理： 开发者主动申请空间、 使用空间、 释放空间
流程： 申请-使用-释放

JS中的内存管理
JS中的内存管理是自动进行的，没有相关API去进行实现，以下内容就可以看做是JS中]]></description><category></category></item><item><title><![CDATA[flow使用及基本语法]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122183855</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122183855</guid><author>YL971129</author><pubDate>Tue, 28 Dec 2021 01:28:00 +0800</pubDate><description><![CDATA[为何要使用flow
因为js弱类型且 动态类型的语言
	弱类型：代码内部允许进行隐式类型转换
	动态类型语言：
		1、在运行阶段，才能明确一个变量的类型，且变量的类型随时可以改变
		2、也就是说，在动态类型语言中，变量没有类型，变量中存放的值有类型
因为该特点，导致JS代码有一些问题只有在运行时才能暴露出问题，编译时不可预知到问题所在
而flow在代码编写阶段就为我们提供了静态类型检测的能力

flow语法参考文档：flow语法
如何使用flow:
flow是一个帮我们进行JS数据类型检测的小工具


]]></description><category></category></item><item><title><![CDATA[JS let、const、var的区别、块级作用域理解]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/122176503</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/122176503</guid><author>YL971129</author><pubDate>Mon, 27 Dec 2021 17:16:33 +0800</pubDate><description><![CDATA[let const
let


用于声明变量，不存在变量提升(不允许先试用后声明)，可以只声明变量 之后赋值，可以使用一条let同时声明多个变量
​
let i, j , k
let x = 1, y = 2, z = x*y



同一个块级作用域内不可重复声明同一个变量


声明的变量不会挂载到全局对象上


const

const用于声明常量，一旦被声明不可被改变(引用数据类型内存地址改变才视为改变)
const声明常量必须赋值
同一个块级作用域内不可重复声明同一个常量名

块级作用域
​	let ]]></description><category></category></item><item><title><![CDATA[Vue axios取消发送某个请求]]></title><link>https://blog.youkuaiyun.com/YL971129/article/details/121978575</link><guid>https://blog.youkuaiyun.com/YL971129/article/details/121978575</guid><author>YL971129</author><pubDate>Thu, 16 Dec 2021 18:23:24 +0800</pubDate><description><![CDATA[在项目中遇到一个情况，因为参数不同而频繁请求一个接口，因为接口的响应速率不同，从而导致最后一次请求的结果被之前的请求覆盖，显示的内容就会出错
想要实现当触发同样的请求时，不轮同时触发多少，只进行最后一次请求
解决方案：
axios.CancelToken
官方文档：http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88
	该api可以用来取消请求

官方示例：
const CancelToken = axios.CancelToken;
let canc]]></description><category></category></item></channel></rss>