qishaoxuan / blog Goto Github PK

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

blog from Qi

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`)

   }

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

齐少轩的blog, blog from Qi

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

blog from Qi

https://qishaoxuan.github.io/blog/basic/sort.html

blog from Qi

在做一个tab栏的切换时，因为不同栏的高度不同，导致页面的滚动条在切换中出现或消失使页面抖动，

另外，在居中布局的页面中，页面内容超出浏览器高度，也会出现页面抖动的情况

解决办法

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

   ​

2. 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/

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

齐少轩的blog, blog from Qi

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

齐少轩的blog, blog from Qi

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

齐少轩的blog, blog from Qi

我的浏览器的效果测试的（应该是360浏览器）效果

热租和旁边的火焰是一张图片，但是效果不一样

原因

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

解决

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

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

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

齐少轩的blog, blog from Qi

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

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

解决方法：

1. 函数节流
2. 动画队列

动画队列的实现相当简单，只是记得当时学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

IOS9下的safri支持ES6的新方法，但不支持箭头函数
IOS9会先解析script标签内的js，如果有不识别的js，则不会加载整个script标签内的内容

别问我为什么这年头还有IOS9的iphone

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

blog from Qi

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

blog from Qi

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

齐少轩的blog, blog from Qi

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

blog from Qi

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

blog from Qi

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

齐少轩的blog, blog from Qi

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

blog from Qi

先区分伪类和伪元素

伪类

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

伪元素

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

一些不太常用的伪类

1. :focus

   选择获得焦点的元素

2. :visited

   选择已访问的链接

3. :link

   选择未被访问的链接

4. :active

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

5. :lang

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

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

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

6. :required

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

7. :valid

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

8. :invalid

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

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

9. :not

   排除其他选择器

   ul > li:not(:last-child)::after {
    	float:left;
   }

   除了最后一个li其他都左浮动

   :not中可以写任意选择器

10. :nth-child

选择元素的第n个子元素

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

一些不太常用伪元素

1. ::selection

   设置选中文本的样式

2. ::placeholder

   设置表单元素placeholder属性的样式

3. ::first-letter

   设置段落的第一个字体的样式

4. :;first-line

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

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

齐少轩的blog, blog from Qi

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

齐少轩的blog, blog from Qi

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

blog from Qi

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

blog from Qi

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

blog from Qi

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

blog from Qi

• 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

  ​

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

blog from Qi

打包路径更改为相对路径：
修改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

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

blog from Qi

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

以前的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

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

blog from Qi