<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[BobbleHat的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/BobbleHat</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; BobbleHat]]></copyright><item><title><![CDATA[关于服务器部署的Nginx相关]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/129174667</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/129174667</guid><author>BobbleHat</author><pubDate>Thu, 23 Feb 2023 09:28:14 +0800</pubDate><description><![CDATA[nginx的踩坑]]></description><category></category></item><item><title><![CDATA[一次有价值的面试题【前端】]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/120946901</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/120946901</guid><author>BobbleHat</author><pubDate>Mon, 25 Oct 2021 10:08:57 +0800</pubDate><description><![CDATA[// 1: 根据后面的每次调用写出 o 的输出结果：
function fun(n, o) {
    console.log(o);
    return {
      n: 10,
      fun: function (m) {
        return fun(m, n);
      }
    };
  }

  
  var a = fun(0);  
  a.fun(1);  // 
  a.fun(2);  // 
  a.fun(3);  // 
  console.log(a.]]></description><category></category></item><item><title><![CDATA[B端web项目处理不同交付之间的接口差异「工程化」]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/118357562</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/118357562</guid><author>BobbleHat</author><pubDate>Wed, 30 Jun 2021 15:08:19 +0800</pubDate><description><![CDATA[B端web项目处理不同交付之间的接口差异「工程化」逻辑构思文件结构Serve核心封装按需加载文件图形化理解（如果有兴趣可以搞一份思维导图）相关链接
逻辑构思
最近在JD开发自研IDE的时候遇到个有趣的问题，因为项目面向iot的独特性，有一部分接口是针对不同甲方订制的，那么自然不同的甲方所需要的功能，提供的接口（比如加密sign和token签名）自然也是不同的，以往的 「请求根封装 + 接口列表 」 的方式难以满足其灵活多变的需求，在处理单项目多交付并行的情况时也捉襟见肘，故此重新设计了针对这类问题对于网络请]]></description><category></category></item><item><title><![CDATA[vue3 动态刷新echarts数据]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/117288404</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/117288404</guid><author>BobbleHat</author><pubDate>Wed, 26 May 2021 13:33:49 +0800</pubDate><description><![CDATA[最近在搞vue3项目，用composition API的写法的话的的确确之前很多插件都不好用了，echarts数据刷新这里也是苦恼了一阵
首先setup全局数据用provide和inject就能搞定，主要是数据刷新这里的写法。因为vue3的setup里屏蔽了this，并且在setup调起的时期页面还没构建生成，获取不到元素，所以不能像vue2那样直接this.setOption了，要稍微改动一下
...
setup() {
	let echarts = inject("ec");  // 我的项目把echa]]></description><category></category></item><item><title><![CDATA[关于Vue2组件适配迁移到Vue3的坑（持续更新）]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/117123515</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/117123515</guid><author>BobbleHat</author><pubDate>Fri, 21 May 2021 15:27:53 +0800</pubDate><description><![CDATA[&gt;@onclick触发的逻辑有修改
]]></description><category></category></item><item><title><![CDATA[box-shadow单边]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/109708692</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/109708692</guid><author>BobbleHat</author><pubDate>Sun, 15 Nov 2020 20:13:34 +0800</pubDate><description><![CDATA[首先我们可以先分析道box-shadow的各项属性


box-shadow: 左右位移 | 上下位移 | 模糊距离 | 模糊半径缩放 | 模糊颜色 | 其他属性类似于（inset）


我们从这里可以有个思路，比如我们想制作底部单边阴影，那么可以把阴影向下位移一些，在做一些缩放，这样看上去就像单边了，demo：


box-shadow: 0 10px 10px -10px #ff4c10



...]]></description><category></category></item><item><title><![CDATA[Virtual Dom（虚拟Dom）]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/109601347</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/109601347</guid><author>BobbleHat</author><pubDate>Wed, 11 Nov 2020 00:54:25 +0800</pubDate><description><![CDATA[1
]]></description><category></category></item><item><title><![CDATA[细谈JS的存储方式（堆内存，栈内存）与深拷贝，浅拷贝]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/109587909</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/109587909</guid><author>BobbleHat</author><pubDate>Tue, 10 Nov 2020 00:40:42 +0800</pubDate><description><![CDATA[堆内存，栈内存


大家从一开始学习c/c++的时候对于声明变量就不陌生了，同样也是行文的重要部分，JavaScript也同样，出于JS引擎的独特设计，在分配内存空间时会自动处理不同类型的变量的存储位置，给程序员减轻一些负担，但是同时也加大了一些学习成本，今天我们就来细说一下。先贴定义：


	栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类型值的地址
	
	
	堆内存：用来保存一组无序且唯一的引用类型值，可以使用栈中的键名来取得
	
显而易见的，堆内存和栈内存在存储的任务上并不相.]]></description><category></category></item><item><title><![CDATA[前端为什么要用服务端渲染？和客户端渲染的区别是什么]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/109327833</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/109327833</guid><author>BobbleHat</author><pubDate>Mon, 02 Nov 2020 11:23:56 +0800</pubDate><description><![CDATA[SSR（Server Side Render）服务端渲染


说到SSR，老程序员肯定不会陌生，web开发最初的上古时期，wordpress，jsp，javaweb都是服务端渲染，这些技术下开发的程序都是传统的SSR架构，这片博客讲的主要是当前前后端分离模式下前端的服务端渲染



为什么要做：

web开发者对于vue，react，angular这样的前端框架肯定并不陌生，近些年大火的vue和react不约而同的使用了Virtual DOM，其核心做法是将网页内容通过js动态挂载到页面中，这就是客户端..]]></description><category></category></item><item><title><![CDATA[搭建一个服务端渲染个人博客（更新中]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/109327567</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/109327567</guid><author>BobbleHat</author><pubDate>Wed, 28 Oct 2020 10:29:44 +0800</pubDate><description><![CDATA[选型用了vue + nuxt

前端部分是在服务器上用pm2跑了两个node服务，一个是移动端，一个是web端，分别单独适配，这样减少渲染压力，也减少加载不必要的适配代码，nginx做的UA判断反向代理到两个不同的端口



（我用了terminus作为ssh工具，xshell之类的都可，没有影响）



更新中...
...]]></description><category></category></item><item><title><![CDATA[URL到显示网页最详细的所有步骤，含浏览器请求资源的所有可能情况]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/108126613</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/108126613</guid><author>BobbleHat</author><pubDate>Thu, 20 Aug 2020 17:32:13 +0800</pubDate><description><![CDATA[·先在地址栏输入url浏览器判断是否为地址（关键词则搜索）

·浏览器吊起beforeUnload钩子，等待当前页面处理完毕

·域名解析


   [1]判断是否有缓存记录该地址对应的ip地址（近期访问过）

   [2]如果没有则查找本地host是否有记载（就是那个host文件）

   [3]如果都没有去访问DNS服务器询问ip地址


·与主机连接【这里有好几种情况】


   第一种情况：就是我要访问的浏览地址

     [1]「http协议相关」是否握手连接（...]]></description><category></category></item><item><title><![CDATA[解决全屏Blur白边问题]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/107301588</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/107301588</guid><author>BobbleHat</author><pubDate>Sun, 12 Jul 2020 17:11:03 +0800</pubDate><description><![CDATA[还是在写vtuber-music时候遇到的这个问题，背景的全屏图片需要模糊，但是反复论证filter: blur()只能作用于窗口范围，不能通过margin或者top，left的方式顶出去，而backdrop的方式性能差而且兼容性又不好，所以试来试去找到个办法

效果图





Vue特别方法（css伪类）

vue遇到的问题是需要动态刷新背景，而在vue里的css刷新图片url部分是不会携带background-size这个属性的，所以图片变更的代码里带了background-size如下


xxx.]]></description><category></category></item><item><title><![CDATA[vue如何抽象一个客户端级的audio播放模块（多页面同时控制）]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/106753615</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/106753615</guid><author>BobbleHat</author><pubDate>Mon, 15 Jun 2020 00:16:43 +0800</pubDate><description><![CDATA[因为很喜欢看vtuber哈哈，最近进了vtuber-music的项目组参与开发，项目是vue项目，但因为UI的设计很偏向客户端，我设计了这个客户端级的audio控件，可多个页面同时控制播放，暂停，切歌，改变音量，播放位置等操作


项目开发环境快照 http://47.103.218.183

项目开源地址https://github.com/vtbmusic/VtuberMusic （dev分支是最新开发进度，其他是灾备备份）




逻辑原理

先介绍下逻辑原理，由于这个audio需要多个页...]]></description><category></category></item><item><title><![CDATA[vue常用的页面监听事件（更新中）]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/106089479</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/106089479</guid><author>BobbleHat</author><pubDate>Wed, 13 May 2020 04:14:45 +0800</pubDate><description><![CDATA[监听页面滚动：


mounted() {
    window.addEventListener('scroll', this.handleScroll)
},
methods: {
    /** 处理页面滚动*/
    handleScroll() {
	let scrollTop = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
	console.log(scrollTop)
 ]]></description><category></category></item><item><title><![CDATA[MacOS配置Git的SSH密钥]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/106049580</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/106049580</guid><author>BobbleHat</author><pubDate>Mon, 11 May 2020 11:11:31 +0800</pubDate><description><![CDATA[打开bash先进入.ssh文件夹下


cd ~/.ssh


然后输入生成SSH


ssh-keygen -t rsa -C "xxxxxx@xxxxx"

xxxx意思是你的github注册邮箱


然后会提示你输入两次密码，一次是github的密码，一次是push密码，推荐设置成一样的，免得忘掉www

如果有提示下图图说明正确了



如果有问题或者想要打开文件夹可以输入


open ~/.ssh

这条命令会在桌面上打开这个文件夹


一切顺利的话接下来拷贝刚刚生成的SSH


cat ~/.]]></description><category></category></item><item><title><![CDATA[js获取当前触发元素的位置（绕过a标签）]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/104257311</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/104257311</guid><author>BobbleHat</author><pubDate>Tue, 11 Feb 2020 01:25:59 +0800</pubDate><description><![CDATA[需求的由来是这样的：我需要做一个点击的动画效果，涉及到获取当前元素的位置，但是下一层的a标签会干扰到实际的获取情况，所以我需要绕过下面的标签，只获取触发器，下面是图




js原生的 getBoundingClientRect()方法，可以获取到当前元素的相对浏览器位置


逻辑是获取到元素之后检查这个标签是否为a标签，是则寻找他的父元素（触发器），再用找到的父元素使用get....Rec...]]></description><category></category></item><item><title><![CDATA[Vue/cli 4.x 无法创建新项目的解决办法]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/103794888</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/103794888</guid><author>BobbleHat</author><pubDate>Wed, 01 Jan 2020 18:46:47 +0800</pubDate><description><![CDATA[自己在vue create的时候发现报错，提示vue package mistach

解决办法：core-js版本过于老旧



首先卸载vue/cli和vue  


sudo npm uninstall -g @vue/cli


npm uninstall -g vue

然后重新install vue，更新版本（bash在这一步有可能warn你core-js过于老旧）

然后更新...]]></description><category></category></item><item><title><![CDATA[antdPro动态路由]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/90430486</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/90430486</guid><author>BobbleHat</author><pubDate>Wed, 22 May 2019 02:34:29 +0800</pubDate><description><![CDATA[因为项目需要依据后端返回条件动态显示路由，通宵研究了一整个晚上搞出来的比较简单的实现方式



原理

antdPro用的是umi的路由，大体的实现方式是这样的：


 router.config.js =&gt;.umi/router.js =&gt; models/menu.js&lt;=&gt;layouts/BasicLayout.js =&gt; compone...]]></description><category></category></item><item><title><![CDATA[react改变wangeditor源码默认高度]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/89523297</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/89523297</guid><author>BobbleHat</author><pubDate>Thu, 25 Apr 2019 20:10:07 +0800</pubDate><description><![CDATA[装antdPro的项目同样适用



在node_modules文件夹下找到

=&gt; wangeditor源码文件夹下的

=&gt; release文件夹下的

=&gt; wangEditor.js



在大概1191行左右找到这样的几行代码



或者可以搜索 $tabContentContainer.css  这个字段，在这个文件里是唯一的

改height为你想要的...]]></description><category></category></item><item><title><![CDATA[react + antd 项目常用操作汇总(更新中)]]></title><link>https://blog.youkuaiyun.com/BobbleHat/article/details/89477016</link><guid>https://blog.youkuaiyun.com/BobbleHat/article/details/89477016</guid><author>BobbleHat</author><pubDate>Tue, 23 Apr 2019 17:52:11 +0800</pubDate><description><![CDATA[表格内访问地址


const columns = [
  {
    title: '访问地址',
    render: (text, record) =&gt; &lt;a target="_blank" href={record.guid}&gt;{record.guid}&lt;/a&gt;,
  },
];

// 这里的record从数据中取得



JS逻辑跳转路由页面


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