-
JS事件循环机制
宏任务： script全部代码、setTimeout、setInterval、setImmediate（只有IE10支持）、I/O、UI Rendering、ajax、requestAnimationFrame。 微任务： Process.ne... -
深入浅出正则表达式
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具，合理的使用正则表达式能极大的提升项目开发效率。 注：本文针对熟悉或者有一些正则表达式使用经验但是不深入的人群，如果无毫基础请移步JavaScript RegExp 对... -
事件冒泡与捕获
1、事件冒泡与捕获JavaScript 事件分为三个阶段： 捕获阶段：事件从父元素开始向目标元素传播，从 Window 对象开始传播。 目标阶段：该事件到达目标元素或开始该事件的元素。 冒泡阶段：这时与捕获阶段相反，事件向父元素传播，直到 Wi... -
理解闭包
前言要理解闭包，我们需要了解js上下文环境和作用域链的知识，有兴趣的同学可以看看下面这两篇，或许对你有些许帮助： javascript中神奇的预编译javascript的作用域与作用域链 概念闭包就是能够读取其他函数内部变量的函数。 首先我们来了... -
JS类型
数据类型：7string, number, boolean, undefined, null, object, symbol typeof：7string, number, boolean, undefined, object, function... -
DOM尺寸
浏览器尺寸的兼容性一、浏览器兼容模式怪异模式和标准模式 BackCompat CSS1Compat 二、浏览器窗口可视区域尺寸IE8及以下： 标准：document.documentElement.clientWidth/clie... -
JS预编译
前言在说预编译原理之前，我们先来了解两个名词。GO(global object)：全局执行上下文；AO(activation object)： 活跃对象，函数执行上下文。预编译的过程跟这两个东西密切相关，其过程可归纳为两步：1.检查通篇的语法错误... -
《你不知道的JS上卷》
第一部分：作用域和闭包第1章：作用域1.1. 编译原理 所谓编译指的是：源代码执行之前进行的操作。 而对于 JS 而言，它的整个编译过程被粗略分为三大步： 分词 - ==词法分析== 解析 - ... -
CommonJS, AMD, CMD
1、异同对比 名称 AMD CMD CommonJs ES6 全称 Asynchronous Module Definition Common Module Definition CommonJs ECMAScript6.0 同步&... -
ES6-Class解析
1.实例和原型： ==实例属性现在除了可以定义在constructor()方法里面的this上面，也可以定义在类内部的最顶层。== ==类的方法，是定义在原型上的；==...
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color-1)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}