FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
> 大家都知道render函数在vue中非常重要，但其实本质上执行渲染工作的是h函数，本质上也就是createElement函数！ --哲华施沃硕德 下面来看个简单例子： 箭头函数： ```js h=>h(App) (function (h) { return h(App); }); ``` 调用了一个名为h的函数，并且返回对App的处理结果，但是不够直观，看个更加直观的例子： ```js var h = function(x){ console.log(x) }; (function (h) { return h('App'); }); console.log(h('App')); 结果：App...
- 初识calc() - calc()语法 - calc()笔记 - calc()常用语法 - 通过margin定位一个对象 - 自动填充容器 - 与CSS变量结合进行计算 - 与整数使用需要注意的 - 兼容性考虑 ### 初识calc() - 在声明一个CSS属性值时，calc()CSS函数可以对值进行计算 - 值类型可以是`,,,,,或` 常见calc()demo ```css width: calc(10px + 100px);...
- CSS layout存在的意义是什么？ - CSS layout包含哪些东西？ - display - Normal Flow - Flexbox - css-tricks的flex指南
 关键词： `多进程、单线程、事件循环、消息队列、宏任务、微任务` 看到这些词仿佛比较让人摸不着头脑，其实在我们的日常开发中，早就和他们打过交道了。 我来举几个常见的例子： - 我执行了一段js，页面就卡了挺久才有响应 - 我触发了一个按钮的click事件，click事件处理器做出了响应 - 我用setTimeout(callback, 1000)给代码加了1s的延时，1秒里发生了很多事情，然后功能正常了 - 我用setInterval(callback, 100)给代码加了100ms的时间轮训，直到期待的那个变量出现再执行后续的代码，并且结合setTimeout删除这个定时器 - 我用Promise，async/await顺序执行了异步代码 - 我用EventEmitter、new Vue()做事件广播订阅 - 我用MutationObserver监听了DOM更新 - 我手写了一个Event类做事件的广播订阅 - 我用CustomEvent创建了自定义事件 - 我······· 其实上面举的这些`click, setTimeout,...
暴力遍历是一个开发者们较容易想到的(开发速度快)、时间复杂度较高(耗性能)的算法，既有它的优点也有它的缺点。 这种解法常见于以下场景： 1. 进度时间短、重业务逻辑处理的代码 2. 性能要求低的代码（例如重渲染不重代码性能的前端、移动端） 3. 算法和数据结构薄弱，对自身代码质量认识不足，不求更优解只求不出bug的代码，直到出现性能问题 在这篇文章中，我将列举一些我在写前端和刷leetcode的过程中遇到的暴力遍历场景。 - 什么是暴力遍历？ - 初识暴力遍历 - 一个最简单的暴力遍历及算法图 - 前端开发中的暴力遍历场景 - 数组类：forEach、map、reduce - 对象类：Object.entries()和of - DOM类：querySelectorAll - Vue渲染同一个类型的节点：v-for - leetcode 暴力遍历 解法题目 -...
 - 前言 - 什么是CSSOM？ - 通过element.style修改行内样式 - 获得普通元素的计算样式 - 获得伪元素的计算样式 - CSSStyleDeclaration API - setProperty(),getPropertyValue()和item() - 使用removeProperty() - 获取和设置属性的优先级 - CSSStyleSheet Interface - 与Stylesheet Object一起工作 - 通过CSSOM获取@media规则 - 通过CSSOM获取@keyframes规则...
- 前言 - 基本用法 - 使用自定义属性的第一步 - 自定义属性的继承 - 自定义属性的回调值 - 有效性和值 - 无效的变量会发生什么 - 通过js中获取到的css变量值 - var()与rgba()配合实现复用变量 - vue实战: 通过颜色选择器切换热力图主题颜色 ### 前言 自定义属性（有时可以称为CSS变量或者层叠variables）是由CSS作者定义的实体，这些实体在一个document内可以被重用。一般按照自定义属性的符号设置（比如，`--main-color: black；`）然后使用var()函数使用。（例如`color: var(--main-color)`） 复杂的网站有大量的CSS，通常会有很多重复的值。例如，同一个颜色可能会被在几百个地方都用到，可以从全局搜索去一次性替换掉。自定义属性允许这个值存储在一个地方，然后再多个地方引用。另一个好处是语义标识符号。（semantic identifier）例如，`--main-text-color`比`#00ff00`更容易理解，尤其是这个值在其他的上下文中也存在时。 自定义属性遵循级联，会从父级继承它们的值。 ###...
 - 什么是排序？ - 初识 - 算法图 - JavaScript中的排序 - 普通排序 - 复杂排序 - 复杂排序函数封装 - lodash(v4.17.15)排序函数 - 从V8源码看sort() - 必会经典排序算法 - 冒泡排序（最大值置尾排序） - 选择排序（最小值置头排序） - 插入排序（寻找位置排序） - 归并排序（二分递归排序） -...
 >在代码的世界中，无论是什么语言，栈其实都是一种非常重要的数据结构。 >全球闻名的代码提问社区stack overflow就以栈（stack）溢出作为网站名的一个部分。 >在写代码或者是debug的过程中，相信你已经感受到了在函数调用栈的世界蹦蹦跳跳的快乐了。 >在学校里刷oj，刷LeetCode，进入社会参加笔试面试的过程中，相信你也感受到了栈的强大和易用。 这篇博文非常适合数据结构基础非常薄弱的同学食用，也欢迎基础扎实的同学指正和交流。 如果从未感受过stack的美妙和强大，这篇博文将非常适合你~ - 什么是栈？ - 数据结构图 - 入栈出栈图 - JavaScript中的栈 - 在js中，如何发现出栈LIFO的特性？ - 如何实现一个最小栈？ - 图解函数调用栈 - leetcode 栈 解法题目 - 20.有效的括号（easy） - 67.二进制求和（easy）...
 - 什么是对撞指针？ - 初识 - 算法图 - 对撞过程图 - JavaScript中的Array与对撞指针 - 在js中，如何定义对撞指针？ - 实现一个最简对撞指针 - leetcode 对撞指针 解法题目 - 7.整数反转（easy） - 9.回文数（easy） - 27.移除元素（easy） - 125.验证回文串（easy） - 167.两数之II-输入有序数组（easy） -...