qishaoxuan / blog Goto Github PK

View Code? Open in Web Editor NEW

21.0 21.0 10.0 1.58 MB

JavaScript 81.82% TypeScript 16.87% HTML 1.31%

blog's Introduction

Hello World 👋

I'm ShaoXuan Qi

Full-time employee
Find my resume here!(China mainland)
I am working at ByteDance as a front-end engineer
Currently looking for a job，my resume
Chat with me about anything in this universe by [email protected](or [email protected])
Give me a STAR⭐, if you like my repositories!

blog's People

Contributors

Stargazers

Watchers

Forkers

bd2star hochenggang 18059103437 vtmtea shizhonghai gxh-developer fsh-k alanfortest liaochao1994

blog's Issues

模块 | blog

https://qishaoxuan.github.io/blog/js/module.html

blog from Qi

vue-cli打包路径问题

打包路径更改为相对路径：
修改config文件夹下index.js中
build: { assetsSubDirectory: './static', assetsPublicPath: './',}

使用ui框架时fonts路径不对问题
修改build文件夹下webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ extract: false, }) },})
extract修改为false

我会考什么 | blog

https://qishaoxuan.github.io/blog/interview/interview.html

blog from Qi

命名规则 | blog

https://qishaoxuan.github.io/blog/css/name.html

blog from Qi

getBoundingClientRect | blog

https://qishaoxuan.github.io/blog/youNeedToKnowJs/getBoundingClientRect.html

齐少轩的blog, blog from Qi

函数节流与防抖

官网上写了一个简单tab栏的轮播，但是触发切换的条件是鼠标悬停，这时会遇到两个问题：

一个是鼠标不停的晃动会不停的触发切换
如果设置了简单的动画开关则在动画结束前即使长时间停留在tab上也不会再触发动画

解决方法：

函数节流
动画队列

动画队列的实现相当简单，只是记得当时学jquery时不理解$.queue,结果需要的是否反倒直接自己写了一个，可能这就是念念不忘，必有回响吧...

所以这篇主要记录函数节流和顺带想起来的函数防抖

函数节流（throttle）

指某些代码不可以在没有间断的情况下连续重复执行

function throttle (method,wait=1000,context){
    clearTimeout(method.tid)
    method.tid = setTimeout(function(){
        method.call(context)
    },wait)
}

函数防抖（debounce）

指一个事件如果频繁触发，会隔一段时间执行一次

function debounce(fn,delay,mustRunDelay){
    var timer = null;
    var t_start;
    return function(){
        var context = this;
        var args = arguments;
        var t_curr = +new Date();
        clearTimeout(timer);
        if(!t_start){
            t_start = t_curr;
        }
        if(t_curr - t_start >= mustRunDelay) {
            fn.apply(context,args);
            t_start = t_curr
        } else {
            timer = setTimeout(function(){
                fn.apply(context,args);
            },delay);
        }
    } 
}

参考

javascript高级程序设计

lodash https://www.lodashjs.com/docs/4.17.5.html#debounce

选择器 | blog

https://qishaoxuan.github.io/blog/css/selector.html

blog from Qi

ios中有多个input标签，滑动停滞问题

给包含input标签的容器添加绝对或固定定位
添加 -webkit-overflow-scrolling: touch;

节流 & 防抖 | blog

https://qishaoxuan.github.io/blog/realize/throttleDebounce.html

blog from Qi

document.implementation | blog

https://qishaoxuan.github.io/blog/youNeedToKnowJs/implementation.html

齐少轩的blog, blog from Qi

利用css变量实现的悬停效果

css

 .button {
        width:200px;
        position: relative;
        appearance: none;
        background: #f72359;
        padding: 1em 2em;
        border: none;
        color: white;
        font-size: 1.2em;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        border-radius: 100px;
    }

    .button span {
        position: relative;
    }

    .button::before {
        --size: 0;
        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, #4405f7, transparent);
        transform: translate(-50%, -50%);
        transition: width .2s ease, height .2s ease;
    }

    .button:hover::before {
        --size: 400px;
    }

html

<div class="button"><span>hover me to change</span></div>

js

   document.querySelector('.button').onmousemove = (e) => {

      const x = e.pageX - e.target.offsetLeft
      const y = e.pageY - e.target.offsetTop

      e.target.style.setProperty('--x', `${ x }px`)
      e.target.style.setProperty('--y', `${ y }px`)

   }

原型继承 | blog

https://qishaoxuan.github.io/blog/js/inherit.html

blog from Qi

insertAdjacentHTML | blog

https://qishaoxuan.github.io/blog/js/insertAdjacentHTML.html

blog from Qi

只出现一次的数字 | blog

https://qishaoxuan.github.io/blog/leetcode/singleNumber.html

blog from Qi

关于addEventListener及移动端滑动优化

以前的addEventListener

element.addEventListener(type, listener[, useCapture ])

现在的addEventListener

addEventListener(type, listener[, options ])

第三个参数由一个Bollean参数useCapture变成了一个包含三个参数的配置对象option

现在的option参数默认配置为

{
    capture: false,//是否在事件冒泡时调用
    passive: false,//是否直接执行默认事件
    once: false ,//是否只执行一次
}

capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它，本文要说的重点为passive

passive属性的作用

passive是用来解决移动端网页滑动卡顿的参数

对于浏览器来说，即便给触摸事件一个空函数，页面的滑动依然会变得卡顿，因为浏览器不能在事件未响应时知道监听函数是否有preventDefault，所以会先执行监听函数，这个执行的过程导致了页面的卡顿。passive参数是用来告诉浏览器，接下来的监听函数一定不会阻止默认行为，你可以放心大胆地去执行。

passive不能与preventDefault同时使用

需要注意的是*passive设置为true时，不能再事件监听函数中添加event .preventDefault()*同时使用时，浏览器会抛出警告

关于removeEventListener

在以前，如果设置了addEventListener(event, listener, true) ，那么删除该监听器必须为removeEventListener("foo", listener, true)，但是仅设置了passive的监听器是不需要的，移除仅需要removeEventListener("foo", listener)，但是设置了addEventListener("foo", listener, {capture: true})的参数依然需要removeEventListener("foo", listener, {capture: true})来进行移除

option支持的安全检测

从mdn复制的检测方法

var passiveSupported = false;

try {
  var options = Object.defineProperty({}, "passive", {
    get: function() {
      passiveSupported = true;
    }
  });

  window.addEventListener("test", null, options);
} catch(err) {}

使用时

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
https://www.cnblogs.com/ziyunfei/p/5545439.html

ch
- 数字 0 的宽度
rem
- 相对长度单位。相对于根元素（html）font-size计算值的倍数
em
- 相对长度单位。相对于当前对象内文本的字体尺寸。
- 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
ex
- 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
- 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- 测试记得设置line-height:1
vw
- 相对于视口的宽度。视口被均分为100单位的vw
- 100vw包含滚动条的宽度，而width:100%不包括滚动条的宽度
vh
- 相对于视口的高度。视口被均分为100单位的vh
vmax
- 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin
- 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
cm
- 厘米（Centimeters）。绝对长度单位。
mm
- 毫米（Millimeters）。绝对长度单位。
q
- 1/4毫米（quarter-millimeters）。绝对长度单位
in
- 英寸（Inches）。绝对长度单位。
pt
- 点（Points）。绝对长度单位。
pc
- 派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。
换算

1in = 72pt = 6pc = 96px = 2.54cm = 25.4mm

原因

图片是svg格式，浏览器解析了svg，热租文字的font-family不存在所以转成了默认字体

解决

把图片转成png或者jpg
把图片拖到编辑器里（我用的是webstrom，不知道vscode可不可以）,把字体的改成相近的

|省事第二种，不过要遵循设计稿还是转一下格式一下比较好

insertAdjacentHTML | blog

https://qishaoxuan.github.io/blog/youNeedToKnowJs/insertAdjacentHTML.html

齐少轩的blog, blog from Qi

记一些不太常用的伪类和伪元素

先区分伪类和伪元素

伪类

伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素
伪类使用一个冒号:

伪元素

伪元素简单来说就是不存在于DOM文档树中的虚拟的元素，它们和HTML元素一样，但是你又无法使用JavaScript去获取，如:before
伪元素使用两个冒号::

一些不太常用的伪类

:focus

选择获得焦点的元素
:visited

选择已访问的链接
:link

选择未被访问的链接
:active

选择活动链接,即当链接被点击时的状态

:lang

选取带有以指定值开头的 lang 属性的元素

div:lang(hello){
    background:red;
}

<p lang='hello'>enal</p>

:required

选择具有required 属性的表单元素
:valid

选择通过匹配正确的所要求的表单元素
:invalid

伪类指定一个不匹配指定要求的表单元素

6,7,8虽然能辅助表单验证，但好像并不能阻止提交，只能起到辅助提示的作用
:not

排除其他选择器
```
ul > li:not(:last-child)::after {
 	float:left;
}
```
除了最后一个li其他都左浮动

:not中可以写任意选择器
:nth-child

选择元素的第n个子元素

:nth-child(even) /* 下标为偶数的子元素 */
:nth-child(odd) /* 下标为奇数的子元素 */
:nth-child(3n)  /* 下标为3的倍数的子元素 */
:nth-child(-n + 4)  /* 下标小于4的子元素 */

一些不太常用伪元素

::selection

设置选中文本的样式
::placeholder

设置表单元素placeholder属性的样式
::first-letter

设置段落的第一个字体的样式
:;first-line

设置段落的第一行文字的样式

解决办法

html{
    padding-left: calc(100vw - 100%);
}

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

参考自张鑫旭的博客，自测时两种方法都可以，但是项目中第二种方法不会出现滚动条，可能是我在布局时设置的是body的高度为100%的原因

参考

http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

Promise | blog

https://qishaoxuan.github.io/blog/realize/promise.html

blog from Qi

qishaoxuan / blog Goto Github PK

blog's Introduction

Hello World 👋

I'm ShaoXuan Qi

blog's People

Contributors

Stargazers

Watchers

Forkers

blog's Issues

函数节流（throttle）

函数防抖 （debounce）

css

html

js

passive属性的作用

passive不能与preventDefault同时使用

关于removeEventListener

option支持的安全检测

参考

换算

原因

解决

先区分伪类和伪元素

一些不太常用的伪类

一些不太常用伪元素

参考

Recommend Projects

Recommend Topics

Recommend Org

函数防抖（debounce）