<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[HamsterKnight的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/HamsterKnight</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; HamsterKnight]]></copyright><item><title><![CDATA[web component学习使用]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/119600255</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/119600255</guid><author>HamsterKnight</author><pubDate>Wed, 11 Aug 2021 11:28:03 +0800</pubDate><description><![CDATA[#WebComponents

WebComponents是一套原生的，允许我们自定义一套可重用有相应功能的元素的组件。

利用它，可以实现类似vue组件的可复用模块。

缺点：兼容不好



相关知识：

1.CustomElement:自定义元素

```customElements```的通过```define```方法来自定义元素

-接受两个参数

-第一个参数,自定义元素名

-第二个元素,自定义元素的模板对象

-例子：customElement...]]></description><category></category></item><item><title><![CDATA[通过vue.extend实现一个弹窗组件]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/103992069</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/103992069</guid><author>HamsterKnight</author><pubDate>Wed, 15 Jan 2020 17:27:08 +0800</pubDate><description><![CDATA[1.首先编写需要被继承的弹窗组件


&lt;template&gt;
  &lt;div v-if="show" ref="modal" class="ek-modal_wrap"&gt;
    &lt;div class="ek-modal-content"&gt;
      &lt;div class="modal-title-wrap"&gt;
        &lt;div clas...]]></description><category></category></item><item><title><![CDATA[js手写一个自己的滚动条]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/98763852</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/98763852</guid><author>HamsterKnight</author><pubDate>Mon, 12 Aug 2019 17:05:15 +0800</pubDate><description><![CDATA[1.滚动条出现的原因是元素里面的内容超出元素本身的大小

元素的所有子元素的高度和= 元素滚动条可滚动的距离 + 元素可见大小

2.通过元素获取到元素内部子元素的高度和和元素可见高度，可求得元素滚动条可滚动的距离

3.通过监听元素的scroll事件获取元素滚动条的滚动距离，求得当前滚动距离占可滚动位置的百分比

当前滚动条滚动的距离 / 元素可滚动的距离

4.（再用元素可见高度 乘 滚...]]></description><category></category></item><item><title><![CDATA[ES6学习之Map]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/97151146</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/97151146</guid><author>HamsterKnight</author><pubDate>Wed, 24 Jul 2019 18:54:09 +0800</pubDate><description><![CDATA[在es5之前，js对象的属性名只能是字符串。

在es6提供了map数据结构,来打破这个限制，让除了字符串之外，让对象等也可以成为属性名。



创建一个map结构


let map = new Map()

往map里面增加成员，通过map方法，也可以直接在创建结构的时候直接添加成员，参数为数组，每个数组里面的子项也是数组，子数组有两个孙子元素


let map = new Map()
l...]]></description><category></category></item><item><title><![CDATA[ES6学习之set]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/96485790</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/96485790</guid><author>HamsterKnight</author><pubDate>Fri, 19 Jul 2019 17:42:58 +0800</pubDate><description><![CDATA[set是ES6新提供的一个数据结构，跟集合差不多，里面的每个值都是唯一的。

Set本身就是一个构造函数，可以直接通过new方法创建set结构


let s = new Set()

增 s.add(1)
	删 s.delete(1)
	查 s.has(1)
	清除所有 s.clear()


通过add方法，添加数据项


let s = new Set()
s.add(1)
s.add(...]]></description><category></category></item><item><title><![CDATA[ES6之class学习]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/96479377</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/96479377</guid><author>HamsterKnight</author><pubDate>Fri, 19 Jul 2019 15:12:57 +0800</pubDate><description><![CDATA[es6提供了创建对象的一个新写法


class MyObj {}

大致相当于

function MyObj{}

class中constructor相当于对象的初始化定义


class Parent {
    constructor(x, y){
        this.x = x
        this.y = y
    }
}

class通过extends进行继承


cl...]]></description><category></category></item><item><title><![CDATA[工作中关于vue的transition动画过渡的一个问题总结]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/93885978</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/93885978</guid><author>HamsterKnight</author><pubDate>Thu, 27 Jun 2019 16:25:37 +0800</pubDate><description><![CDATA[在公司的项目中，有一个列表页切换的需求

需求：

 进来，默认展示列表一，点击button2，列表一向左移出屏幕外，然后列表二向左移动，占据屏幕。

 点击button1，则相反。


&lt;div&gt;
      &lt;button class="button1"&gt;待完成&lt;/button&gt;
      &lt;button class="button2"&gt...]]></description><category></category></item><item><title><![CDATA[create-react-app创建react项目骨架，配置路径别名与antd的按需加载]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/89221639</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/89221639</guid><author>HamsterKnight</author><pubDate>Thu, 11 Apr 2019 22:22:45 +0800</pubDate><description><![CDATA[第一步
下载react-app-rewired和customize-cra
npm i react-app rewired customize-cra -D

第二步
下载 babel-plugin-import
npm i add babel-plugin-import -D

第三步
修改package.json里的配置
"scripts": {
  "start": "react-app-r...]]></description><category></category></item><item><title><![CDATA[利用formData上传input选中的文件]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/86542337</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/86542337</guid><author>HamsterKnight</author><pubDate>Wed, 30 Jan 2019 15:57:30 +0800</pubDate><description><![CDATA[&lt;input id="my_text" type="file" accept="image/*" multiple&gt;

accept属性来规定上传文件类型

multiple属性允许上传多个文件

如何获取input选中的文件流？

第一：获取input标签

let input = document.getElementById('my_input')

第二：通过files属性获取...]]></description><category></category></item><item><title><![CDATA[记录一次vue项目，局部引入外部插件]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/86541569</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/86541569</guid><author>HamsterKnight</author><pubDate>Fri, 18 Jan 2019 15:59:34 +0800</pubDate><description><![CDATA[首先将你需要的插件从gitHub上下载下来，然后放在component组件目录下，然后找到src下相应vue组件文件

目录结构如下：



引入组件之后，跟平常的vue组件一样注册使用就好了

...]]></description><category></category></item><item><title><![CDATA[关于vue组件内部导航守卫的一个记录]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/85070444</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/85070444</guid><author>HamsterKnight</author><pubDate>Tue, 18 Dec 2018 17:30:55 +0800</pubDate><description><![CDATA[
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例...]]></description><category></category></item><item><title><![CDATA[关于vue使用axios二次获取到数据后，页面数据没有发生变化]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/84549296</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/84549296</guid><author>HamsterKnight</author><pubDate>Mon, 26 Nov 2018 16:30:27 +0800</pubDate><description><![CDATA[最近用在做项目的时候，使用axios第一次获取到数据，可以成功渲染出来，数据发生变化，再次获取数据的时候，页面没有像想象中那样相应的重新渲染，不知道是不是因为数据层次太多，render函数没有自动更新，所以手动强制更新

tagManager.upDownTag(this.selectList, 'down').then(() =&amp;gt; {

   tagManager.getTagList(t...]]></description><category></category></item><item><title><![CDATA[关于使用vue-html5-editor,富文本插件，icon图标不显示的一个记录]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/83963714</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/83963714</guid><author>HamsterKnight</author><pubDate>Sun, 11 Nov 2018 22:56:27 +0800</pubDate><description><![CDATA[最近项目中用到了vue-html5-eidtor富文本插件，但是功能是实现了，但是icon图标无法正常显示

 

首先，已经确定正常引入和全局注册了vue-html-editor插件

 

 



 

 

富文本框能正常显示，但是功能的icon图标无法显示，

然后通过查找，发现是font-awesome控制着插件icon图标的显示，然后安装font-awesome

icon图标还是不...]]></description><category></category></item><item><title><![CDATA[学习记录：关于通过使用express，设置reffer和host获取qq音乐数据]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/83022887</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/83022887</guid><author>HamsterKnight</author><pubDate>Fri, 12 Oct 2018 10:33:57 +0800</pubDate><description><![CDATA[因为qq音乐歌手信息的获取，设置了reffer（设置了url的来源）和host(决定了虚拟机上的哪个站点)，

所以通过使用express配置路由，

通过axios来获取数据，

将数据返回给前端请求的路由地址

在webpack.dev.conf.js的before方法中配置路由地址

//这里


app.get('/getData', function (req, res) {
  var...]]></description><category></category></item><item><title><![CDATA[学习记录：在构建vue项目中利用jsonp 模块和Promise对象,封装自己的jsonp函数]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/82999372</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/82999372</guid><author>HamsterKnight</author><pubDate>Wed, 10 Oct 2018 17:02:16 +0800</pubDate><description><![CDATA[安装jsonp 模块

npm install jsonp

引入jsonp函数

import myJsonp from jsonp

export defalut function Jsonp (url ,data , option) // data为传入的参数对象，option就是原jsonp模板的opts

{

  url + = (url.indexOf('?')&amp;lt;0 ? '?'...]]></description><category></category></item><item><title><![CDATA[学习记录：js阻止默认事件，和事件冒泡]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/82993177</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/82993177</guid><author>HamsterKnight</author><pubDate>Wed, 10 Oct 2018 10:54:07 +0800</pubDate><description><![CDATA[html中某些标签，点击的时候，会执行默认的行为，

比如a标签，a标签被点击的时候，就会跳转到href中的地址

 

给dom对象绑定事件的方式，有两种

第一种：(Dom0) obj.onclick = fn

第二种： (Dom2)

ie浏览器:    obj.attachEvent(事件名称，fn)

特点：

非标准ie下没有捕获（ie6-ie10有捕获）

事件名称有on

thi...]]></description><category></category></item><item><title><![CDATA[原生js封装jsonp函数，调用百度搜索接口]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/82874994</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/82874994</guid><author>HamsterKnight</author><pubDate>Thu, 27 Sep 2018 23:32:34 +0800</pubDate><description><![CDATA[&amp;lt;!doctype html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;
    &amp;lt;title&amp;gt;jsonp封装&amp;lt;/title&amp;gt;

&amp;lt;/head&amp;gt;

&amp;lt;body&amp;gt;
    &amp;lt;input type=&quot;text]]></description><category></category></item><item><title><![CDATA[Jquery原理学习笔记]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/81841141</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/81841141</guid><author>HamsterKnight</author><pubDate>Sun, 19 Aug 2018 20:41:24 +0800</pubDate><description><![CDATA[jquery本质上是一个闭包

（function  myJquery (window, undefined){

// 调用的时候创建一个myJquery的对象实例

    var myJquery = function () {

      return new myJquery.prototype.init()

}

// 定义对象属性和扩展方法

myJquery.prototype...]]></description><category></category></item><item><title><![CDATA[css学习之创建半透明边框,多层边框，条纹背景]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/81489856</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/81489856</guid><author>HamsterKnight</author><pubDate>Tue, 07 Aug 2018 23:13:13 +0800</pubDate><description><![CDATA[1.创建半透明边框

说到创建半透明边框，

我第一反应就是

border: 10px solid hsla(0,0,100%, 0.5)；

 



得到的图像是这样的，我的目的是让透明边框将背景绿色部分显示

可以添加一个属性

border: 10px solid hsla(0,0,100%, 0.5)；

background-clip: padding-box,将子图层的背景限制在内...]]></description><category></category></item><item><title><![CDATA[vue-music笔记之歌手列表左右两栏联动学习记录]]></title><link>https://blog.youkuaiyun.com/HamsterKnight/article/details/81229157</link><guid>https://blog.youkuaiyun.com/HamsterKnight/article/details/81229157</guid><author>HamsterKnight</author><pubDate>Thu, 26 Jul 2018 22:54:38 +0800</pubDate><description><![CDATA[better-scroll实现左右两栏联动

首先对两栏进行基本样式的布局

给右侧字母栏，添加监听事件onShortcutTouchStart,首先传入一个事件参数，利用getData方法获取当前点击元素data-index的值

getData (el, name, val) {
  let prefix = 'data-'
  name = prefix + name
  if (val) ...]]></description><category></category></item></channel></rss>