<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Kobe_G的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Kobe_G</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Kobe_G]]></copyright><item><title><![CDATA[关于dom.click()多次调用无效的问题]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/133385569</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/133385569</guid><author>Kobe_G</author><pubDate>Thu, 28 Sep 2023 16:02:00 +0800</pubDate><description><![CDATA[我想通过多次调用click()函数来模拟点击实现某种效果，但是没有达到预期的效果（我的表现是点击只触发了一次）通过搜索发现，可能是。]]></description><category></category></item><item><title><![CDATA[Husky + lint-staged + ESlint + Prettier(可选) 实现git增量代码lint校验]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/130767617</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/130767617</guid><author>Kobe_G</author><pubDate>Fri, 19 May 2023 15:59:17 +0800</pubDate><description><![CDATA[Husky + lint-staged + ESlint + Prettier(可选) 实现git增量代码lint校验Husky：一个为 git 客户端增加 hook 的工具，它有一些钩子函数，比如pre-commit、 pre-push等: 一个过滤出 git 代码暂存区文件的工具，在每次提交时只检查本次提交的文件上图的index就表示暂存区，lint-staged 只对暂存区的文件执行一些命令。]]></description><category></category></item><item><title><![CDATA[HTML5中的FileReader对象]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/128496416</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/128496416</guid><author>Kobe_G</author><pubDate>Fri, 30 Dec 2022 16:20:26 +0800</pubDate><description><![CDATA[FileReader对象使用]]></description><category></category></item><item><title><![CDATA[React大文件分片上传方案]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/127752907</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/127752907</guid><author>Kobe_G</author><pubDate>Tue, 08 Nov 2022 19:14:58 +0800</pubDate><description><![CDATA[大文件分片上传方案]]></description><category></category></item><item><title><![CDATA[css、js的加载是否阻塞DOM的解析与渲染]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/124500818</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/124500818</guid><author>Kobe_G</author><pubDate>Fri, 29 Apr 2022 18:30:00 +0800</pubDate><description><![CDATA[首先说一下浏览器渲染页面的流程：
浏览器内核（渲染进程）拿到静态资源后，渲染大概可以划分成以下几个步骤：

解析html构建dom树
解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

从以上步骤可以得出几个结论：
1.html和css的]]></description><category></category></item><item><title><![CDATA[css之width继承]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/124492510</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/124492510</guid><author>Kobe_G</author><pubDate>Fri, 29 Apr 2022 11:44:54 +0800</pubDate><description><![CDATA[只说两点：
一、哪些情况下子元素会继承父元素的width属性？
只要子元素是块级元素且不定位、不浮动，都会继承父元素的width属性
二、width:100%，是以谁为基准的？

对于使用position:relative的子元素或浮动的子元素，其基准点始终是基于其直接父元素而言的，跟其父元素是否有定位无关
对于绝对定位position:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言
对于使用position:fixed的子元素，其]]></description><category></category></item><item><title><![CDATA[js中关于函数参数引用传递的误区]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/122148259</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/122148259</guid><author>Kobe_G</author><pubDate>Sat, 25 Dec 2021 21:06:07 +0800</pubDate><description><![CDATA[先看一段代码：
let a = [1, 2, 3]
function fn(b) {
  b = [4, 5, 6]
}
fn(a)
console.log(a)

正确的打印结果应该是 [1,2,3]，函数体中的代码并没有影响到外部变量a
我们在学习js的时候经常听到的一句话是 简单类型传值，复杂类型传址，意思是简单类型传递的是变量的值，而复杂类型（引用类型）传递的是变量的地址。这句话其实是错误的，这是为了方便理解才总结出来的，而事实是：ECMAScript中所有函数的参数都是按值传递的
在向函数传递引用]]></description><category></category></item><item><title><![CDATA[一文搞懂useCallback的使用]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/121752526</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/121752526</guid><author>Kobe_G</author><pubDate>Sat, 11 Dec 2021 21:57:59 +0800</pubDate><description><![CDATA[一、useCallback的作用
usecallback不是用来解决组件中有过多内部函数导致的性能问题：
1.我们要知道，js创建一个函数的成本是非常小的，这点计算对于计算机来说是小case
2.其实使用useCallback会产成额外的性能：对deps的判断
3.其实每次组件重新渲染时，都无所谓避免重新创建内部函数，因为即使useCallback的deps没有变，它也会重新创建内部函数作为useCallback的实参
那么，它的作用到底是什么？useCallback的作用其实是用来避免子组件不必要的reR]]></description><category></category></item><item><title><![CDATA[webpack打包优化总结]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/121749153</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/121749153</guid><author>Kobe_G</author><pubDate>Mon, 06 Dec 2021 16:37:58 +0800</pubDate><description><![CDATA[use tree shaking to delete unused code

在webpack.config.js中添加 optimization: { usedExports: true, }可以在打包后的文件中的注释中看到未使用的代码
在package.json中添加"sideEffects": false来告知 webpack 它可以安全地删除未用到的 export（如果所有代码都不包含副作用），如果有代码文件是有副作用的，比如polyfill，可以在sideEffects属性设置成一个数组，比..]]></description><category></category></item><item><title><![CDATA[关于video标签使用的一些总结]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/120484825</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/120484825</guid><author>Kobe_G</author><pubDate>Sun, 26 Sep 2021 11:18:09 +0800</pubDate><description><![CDATA[问题一：用一个div包住video，div下边缘会出现下缝隙（和img标签一样）
解决方案：和img标签一样，设置video为display：block或者设置div的font-size为0
问题二：给video标签设置autopaly失效，视频没有自动播放
解决方案：在Chrome 66后，浏览器关掉了声音自动播放，也就是说和在桌面版浏览器也将失效（移动端最开始是完全禁止音视频自动播放的，后来有放开），可以在video标签加上muted属性，现在视频是静音自动播放，可以再显示一个打开声音的按钮，提示用户点]]></description><category></category></item><item><title><![CDATA[前端场景问题经验总结]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/120105793</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/120105793</guid><author>Kobe_G</author><pubDate>Sat, 04 Sep 2021 21:19:48 +0800</pubDate><description><![CDATA[一、vue中使用$refs时TS报错
比如我们在video标签上使用了ref属性，
&lt;video ref='myVideo'&gt;&lt;/video&gt;

当我们用this.$refs.myVideo.xxx时ts会报错没有这个属性或方法
解决方案：

如果你使用了vue-property-decorator，可以用Ref装饰器解决

import { Vue, Component, Ref } from 'vue-property-decorator'
@Component
export d]]></description><category></category></item><item><title><![CDATA[如何判断H5中是否成功调起应用商店]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/120101269</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/120101269</guid><author>Kobe_G</author><pubDate>Sat, 04 Sep 2021 20:49:20 +0800</pubDate><description><![CDATA[一、H5页面如何打开本地APP
使用scheme协议：直接window.open(schemeUrl)，比如：
window.open('market://details?id=xxx') //安卓通用应用市场
window.open('https://apps.apple.com/cn/app/idxxxx') //IOS app store

同样的，也可以打开其他app，
window.open('weixin://xxxxx')

scheme协议的格式:[scheme]://[host]/[pat]]></description><category></category></item><item><title><![CDATA[typeScript学习笔记（二）]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/109136334</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/109136334</guid><author>Kobe_G</author><pubDate>Sun, 22 Aug 2021 17:23:07 +0800</pubDate><description><![CDATA[一、高级类型




]]></description><category></category></item><item><title><![CDATA[用express和mockjs实现前端mock serve]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/119854887</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/119854887</guid><author>Kobe_G</author><pubDate>Sun, 22 Aug 2021 17:20:21 +0800</pubDate><description><![CDATA[本文介绍一种用express和mockjs实现模拟后端接口返回数据的思路，直接上代码：
1.在项目根目录新建文件夹：mock
2.在mock文件夹下新建mock.js和mockData.js文件
3.
//mock.js
const Mock = require('mockjs')
const express = require('express')
const mockData = require('./mockData')
const mockDatas = Object.entries(mockDat]]></description><category></category></item><item><title><![CDATA[使用vscode结合Prettier实现实时对代码进行自动格式化]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/119703478</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/119703478</guid><author>Kobe_G</author><pubDate>Sat, 14 Aug 2021 17:11:24 +0800</pubDate><description><![CDATA[配置Prettier
安装prettier
$ yarn add --dev --exact prettier

自定义配置，添加.prettierrc.json
{
  "trailingComma": "all",
  "singleQuote": true,
  "bracketSpacing": true,
  "semi": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false
}

添加vscode配置文件
$ touch ]]></description><category></category></item><item><title><![CDATA[Use Chrome DevTools Like a Senior Frontend Developer]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/112426179</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/112426179</guid><author>Kobe_G</author><pubDate>Sun, 10 Jan 2021 11:56:47 +0800</pubDate><description><![CDATA[https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674

]]></description><category></category></item><item><title><![CDATA[关于如何使用css3中的steps完成图片帧动画]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/111924196</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/111924196</guid><author>Kobe_G</author><pubDate>Tue, 29 Dec 2020 18:38:34 +0800</pubDate><description><![CDATA[前端中的动画效果可以有很多种方法完成，对于一些简单的颜色、大小、长度、位置变化都可以通过transition轻松实现，对于一些复杂的、不规则的动画就要借助图片来完成了。
今天介绍一种结合图片和css3中的keyframes和animation实现的复杂动画方法。
先看图片和动画效果，


实现的原理是通过改变背景图片的位置，从而让人看起来是动画，看一下它的源码：
&lt;div class="box"&gt;&lt;/div&gt;

.box {
    width: 50px;
    height: ]]></description><category></category></item><item><title><![CDATA[typeScript学习笔记（一）]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/108908768</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/108908768</guid><author>Kobe_G</author><pubDate>Tue, 13 Oct 2020 13:19:42 +0800</pubDate><description><![CDATA[一、基础类型

布尔值、数字、字符串

let isDone: boolean = false;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let name: string = "bob";
let sentence: string = `Hello, my name is ${ name }.


数组

let list: number[] = [1, 2, 3];
let list: Array&lt;number&gt;]]></description><category></category></item><item><title><![CDATA[推荐一些好用的插件，可搭配react使用]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/105076970</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/105076970</guid><author>Kobe_G</author><pubDate>Tue, 24 Mar 2020 17:45:12 +0800</pubDate><description><![CDATA[react-sortable-hoc
作用：可以很简便地对元素进行拖拽
用法：
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

const SortableList = SortableContainer(({ children...]]></description><category></category></item><item><title><![CDATA[个人GitHub地址]]></title><link>https://blog.youkuaiyun.com/Kobe_G/article/details/102731716</link><guid>https://blog.youkuaiyun.com/Kobe_G/article/details/102731716</guid><author>Kobe_G</author><pubDate>Thu, 24 Oct 2019 20:46:49 +0800</pubDate><description><![CDATA[个人GitHub仓库地址：
https://github.com/Kobe-G

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