<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[G_XUI的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/G_XUI</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; G_XUI]]></copyright><item><title><![CDATA[vue3 实现简易滚动效果]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/126785188</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/126785188</guid><author>G_XUI</author><pubDate>Fri, 09 Sep 2022 17:42:52 +0800</pubDate><description><![CDATA[vue 实现滚动效果 ]]></description><category></category></item><item><title><![CDATA[常用dom操作（查找，创建，修改，属性操作，样式操作）]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108876534</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108876534</guid><author>G_XUI</author><pubDate>Tue, 29 Sep 2020 21:59:00 +0800</pubDate><description><![CDATA[节点查找API
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

 document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；

 document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标]]></description><category></category></item><item><title><![CDATA[前端优化之最小化http请求]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108859574</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108859574</guid><author>G_XUI</author><pubDate>Mon, 28 Sep 2020 23:11:30 +0800</pubDate><description><![CDATA[前端性能优化之最小化http请求

关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我主要是针对于一点去做出了总结也是能为了加深印象。

一、什么是前端性能优化（what）？
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
二、为什么要做前端性能优化（why）？
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化]]></description><category></category></item><item><title><![CDATA[前端优化问题（1）]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108783984</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108783984</guid><author>G_XUI</author><pubDate>Thu, 24 Sep 2020 21:55:39 +0800</pubDate><description><![CDATA[一、 你对优化这块了解多少?
大体常见的手段了解.
比如从客户端着手的:

压缩代码(JS/CSS),压缩图片
合并一些小图片(css sprite)
若是打包的代码尽可能切割成多个 chunk,减少单一 chunk过大
静态文件采用 cdn 引入
HTTP的缓存头使用的合理
减小第三方库的依赖
对于代码应该考虑性能来编写,比如使用requestAnimationFrame绘制动画,尽可能减少页面重绘(DOM 改变)
渐进升级,引入preload这些预加载资源
看情况用service worker来缓存资源]]></description><category></category></item><item><title><![CDATA[关于兼容问题的小总结（1）]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108762126</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108762126</guid><author>G_XUI</author><pubDate>Wed, 23 Sep 2020 22:59:53 +0800</pubDate><description><![CDATA[一.Polyfill是什么?
Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。
例如，querySelectorAll是很多现代浏览器都支持的原生Web API，但是有些古老的浏览器并不支持，那么假设有人写了库，只要用了这个库， 你就可以在古老的浏览器里面使用document.querySelectorAll，使用方法跟现代浏览器原生API无异。那么这个库就可以称为Polyfill或者Polyfiller。
那么问题就来了。jQuery是不是一个Polyfill?答案是No。因为它并]]></description><category></category></item><item><title><![CDATA[什么是虚拟Dom]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108741522</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108741522</guid><author>G_XUI</author><pubDate>Tue, 22 Sep 2020 21:23:00 +0800</pubDate><description><![CDATA[一、前言
虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念，本文将以vue2.0使用的snabbdom入手，来介绍虚拟DOM的主要实现原理。
二、虚拟DOM
在开始介绍snabbdom之前我们想来想两个问题，
（1）什么是虚拟DOM？
vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图：
 
可见左边的DOM结构，不论是标签名称]]></description><category></category></item><item><title><![CDATA[vue路由或者前端路由的实现原理]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108720276</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108720276</guid><author>G_XUI</author><pubDate>Mon, 21 Sep 2020 22:02:05 +0800</pubDate><description><![CDATA[一、什么是前端路由？
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。也就是说，通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图
二、单页应用与多页应用


单页应用

即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来]]></description><category></category></item><item><title><![CDATA[微信小程序支付功能]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108672957</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108672957</guid><author>G_XUI</author><pubDate>Fri, 18 Sep 2020 22:22:28 +0800</pubDate><description><![CDATA[学习目标：

例如：学习微信支付 流程

学习内容：

一、微信支付开发可用场景


线下支付


公众号支付


小程序支付


pc网站支付


手机app支付


企业内部使用微信资金流动


 
 ## 不同场景可用支付类型
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200918215136297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH]]></description><category></category></item><item><title><![CDATA[前端面试题之ajax]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108654202</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108654202</guid><author>G_XUI</author><pubDate>Thu, 17 Sep 2020 22:00:15 +0800</pubDate><description><![CDATA[谈谈你对ajax的理解，以及用原生JS实现有哪些要点需要注意。
ajax，全称是异步JavaScript和XML，是用来和服务器进行数据交互的，让无刷新页面替换数据变成了可能。
ajax最核心的就是依赖于浏览器提供的XMLHttpRequest对象
原理就是通过XMLHttpRequest对象向服务器发出异步请求，从服务器获取数据，然后用JavaScript来操作DOM实现页面的局部刷新。
至于有哪些要点呢，来一个简短点的ajax请求：
var xhr = new XMLHttpRequest()		//首]]></description><category></category></item><item><title><![CDATA[前端面试题[“1“,“2“,“3“].map(parseInt)?]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108631231</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108631231</guid><author>G_XUI</author><pubDate>Wed, 16 Sep 2020 21:41:45 +0800</pubDate><description><![CDATA[[“1”,“2”,“3”].map(parseInt)得到什么？
输出结果：1，NaN，NaN。
先抛出一个关于结果的概念，也是这为什么是这三个值的原因：

map函数传递参数的定义。
parseInt函数正对于radix的理解。
二进制中没有3这个数码。


好了，有了这样一个最基础的概念我们来具体分析这个问题：

我没猜错大多数人都会先想到结果是[“1”,“2”,“3”] 为什么会产生这样一个想法？因为我们通常使用map函数都会传一个函数，这个函数一般只使用1-2个参数，如下所示

var arr = ]]></description><category></category></item><item><title><![CDATA[XSS攻击的预防]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108607638</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108607638</guid><author>G_XUI</author><pubDate>Tue, 15 Sep 2020 19:43:01 +0800</pubDate><description><![CDATA[XSS攻击的预防
结合上一篇文章知道了XSS的基本攻击方式和基本概念，这里就主要讲一下如何预防XSS的攻击。

上面是我在网上找的一个可以作为简单理解的概念图，如果不理解可以根据顺序参照理解。
预防储存型和反射型XSS攻击
存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。
预防这两种漏洞，有两种常见做法：
改成纯前端渲染，把代码和数据分隔开。
对 HTML 做充分转义。
纯前端渲染
纯前端渲染的过程：
浏览器先加载一]]></description><category></category></item><item><title><![CDATA[2020-09-14]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108588826</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108588826</guid><author>G_XUI</author><pubDate>Mon, 14 Sep 2020 21:51:03 +0800</pubDate><description><![CDATA[一、echarts
1、安装：npm install echarts -S
2、引入：
 import echarts from 'echarts';
 Vue.prototype.$echarts = echarts

在官网可以查看更多样式https://echarts.apache.org/zh/download.html

html
&lt;template&gt;
  &lt;div class="sj"&gt;
     &lt;el-card&gt;
      &lt;!-- 2.为Echa]]></description><category></category></item><item><title><![CDATA[水平垂直居中十种方法]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108504308</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108504308</guid><author>G_XUI</author><pubDate>Wed, 09 Sep 2020 23:06:45 +0800</pubDate><description><![CDATA[方法
第一种通过绝对定位的方式 absolute + 负margin
首先知道子元素的宽高，给子元素设置top：50%；left：50%，
但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，
通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了
**优点：**比较好理解，兼容性好
**缺点：**需要知道子元素的宽高
第二种：也是通过绝对定位的方式 absolute + margin auto
这个是需要将各个方向]]></description><category></category></item><item><title><![CDATA[原生图片懒加载]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108477628</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108477628</guid><author>G_XUI</author><pubDate>Tue, 08 Sep 2020 22:07:19 +0800</pubDate><description><![CDATA[学习目标：

掌握原生图片懒加载

学习内容：

1、 掌握原生图片懒加载
2、 分析js代码
3、 搜索熟悉陌生单词用法
4、 掌握懒加载

概念


什么是懒加载



 懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。





为什么要懒加载？



懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举]]></description><category></category></item><item><title><![CDATA[Mock:模拟数据]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108455758</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108455758</guid><author>G_XUI</author><pubDate>Mon, 07 Sep 2020 20:54:02 +0800</pubDate><description><![CDATA[mockjs官网：http://mockjs.com/

mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started

一、第一步 安装mockjs
npm install mockjs
第二步 创建一个mock目录生成mock数据
mock目录下创建course.js文件
内容如下：
//引入mock
import Mock from "mockjs";

//mock课程数据
var result=Mock.mock({
  code.]]></description><category></category></item><item><title><![CDATA[CSRF]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108413459</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108413459</guid><author>G_XUI</author><pubDate>Fri, 04 Sep 2020 23:52:37 +0800</pubDate><description><![CDATA[CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
举个例子：
小明在刷gmail，突然看到一条链接，好奇点开了发现是个空白链接，就不管他，继续刷其他的。看似没有什么事情发生，但实际上攻击者利用这个所谓的空白页给小明偷偷设置了一个过滤规则，这个规则使他收到的邮件都转发给了攻击者。
1、攻击特点
攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。
攻击利用受害者在被攻击网站的登录凭证，冒充受害]]></description><category></category></item><item><title><![CDATA[ES6 2015 （1）]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108395352</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108395352</guid><author>G_XUI</author><pubDate>Thu, 03 Sep 2020 23:35:54 +0800</pubDate><description><![CDATA[let和const:
let是定义变量 ， const定义常量
const 自身常量不能改 但如果是对象的形式可以改属性和值
2.symbol：是ES6新增的基本数据类型
symbol:定义的值是唯一性
3.扩展运算符( … )
可以展开数组和对象
1.将数组转换成数据列表 [a,b,c,d]---&gt;a,b,c,d
例如：
var arr1=[666,777,888]
var arr2=['hello','vuejs']
var result=[...arr1,...arr2]

2.将数据列表转换成]]></description><category></category></item><item><title><![CDATA[vue watch用法]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108374077</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108374077</guid><author>G_XUI</author><pubDate>Thu, 03 Sep 2020 02:32:59 +0800</pubDate><description><![CDATA[watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
data:{
     a:1,
     b:{
         c:1
     }
 },
 watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
  ]]></description><category></category></item><item><title><![CDATA[GET 和 POST 的区别]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108352216</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108352216</guid><author>G_XUI</author><pubDate>Tue, 01 Sep 2020 22:34:34 +0800</pubDate><description><![CDATA[GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有
进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GE]]></description><category></category></item><item><title><![CDATA[防抖 节流]]></title><link>https://blog.youkuaiyun.com/G_XUI/article/details/108330447</link><guid>https://blog.youkuaiyun.com/G_XUI/article/details/108330447</guid><author>G_XUI</author><pubDate>Mon, 31 Aug 2020 22:30:58 +0800</pubDate><description><![CDATA[防抖(debounce)
1.在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms ，然后：

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。
实现：：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

//func 是函数 ，wait是等待的时间

function ]]></description><category></category></item></channel></rss>