-
TypeScript知识点
访问修饰符有哪些？public：公共的。类的所有成员，其子类以及该类的实例都可以访问； protected： 受保护的。该类及其子类的所有成员都可以访问它们。 但是该类的==实例无法访问==。 priva... -
TypeScript进阶
类型别名类型别名用来给一个类型起个新名字。 12345678910type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameRe... -
TypeScript基础
一、原始类型：avaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。 原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 S... -
重写与this有关的方法和关键字
call/apply/bind/typeof/new/instanceof 的实现1.call/apply/bind方法的调用：12345678// callfn.call(... -
数组方法重写
forEach12345678Array.prototype.myEach = function (fn) { var arr = this; var obj = arguments[1] || window; for (let... -
路由原理
路由原理hash路由（核心api：hashchange事件）利用a标签，并阻止默认事件。通过hashchange事件监听hash值的变化，替换掉目标区域的html内容 123456789<h1>hash 路由</h1>&l... -
函数柯里化
实现add(1)(2)(3) ==6 && add(1, 2, 3) == 6利用 toString() 或 valueOf() 123456789101112131415161718f... -
函数防抖和节流
函数防抖 节流或是防抖：限制函数的执行次数 概念节流（throttle）：减少一段时间的触发频率 防抖（debounce）：通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发 应用场景节流：滚动加载更多、搜索框搜的索联... -
对象拷贝
浅拷贝1.es3写法123456let originObj = {};let cloneObj = {};for(const key in originObj) { cloneObj[key] ... -
垃圾回收机制
项目中，如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。当某些代码操作不能被合理释放，就会造成内存泄漏。我们尽可能减少使用闭包，因为它会消耗内存。 浏览器垃圾回收机制/内存回收机制: 浏览...
$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
}
}
}
}
}