FrankKai
FrankKai
- 前言 - 基本用法 - 使用自定义属性的第一步 - 自定义属性的继承 - 自定义属性的回调值 - 有效性和值 - 无效的变量会发生什么 - 通过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） -...
 之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看[前端webpack构建优化](https://github.com/FrankKai/FrankKai.github.io/issues/221) 但是随着时间的推移，这种优化产生的效果越来越弱化，**手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。** webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。 当你遇到这些坑时，通过搜索引擎找到我这篇文章，如果能够解决了手上的webpack配置问题，然后发自内心的感到 **”Save my day！“，”It helps me！“，”Solved my problem！“，”Works for me！“** ，我会感觉自己的这篇博文很有意义。 - 升级到 webpack 4 - 移除 CommonsChunkPlugin，默认使用 SplitChunksPlugin 分割代码 - 升级 html-webpack-plugin - 移除 extract-text-webpack-plugin，引入...
 >从0到1负责手上项目一年多了，webpack虽然是老生常谈的话题，但只有出现问题时，才会去思考怎么去优化。由于项目里引入了越来越多的依赖，所以本地开发编译过程越来越慢，因此才有了这一次的webpack优化。顺便对一些生产环境的静态资源也做了一些优化。 ### 一.HappyPack多线程编译 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 8核16线程 webpack 3.12.0 ThreadPool.size:16 本地构建速度： 51281ms（未引入happypack） 43750ms（引入happypack eslint-loader） 35862ms（引入happypack eslint-loader, vue-loader） 35476ms（引入happypack eslint-loader, vue-loader, babel-loader） 打包dist速度： 58192ms（未引入happypack） 49745ms（引入happypack eslint-loader） 46505ms（引入happypack...
- 测试localStorage存储限制 - 测试浏览器所有storage的限制 - PC: Chrome/Firefox/IE/Safari的localStorage/sessionStorage限制 - Mobile: Android Browser/iOS Browser的localStorage/sessionStorage限制 - PC端localStorage/sessionStorage限制至多10MB，如何使用更大的存储空间？ - Mobile端localStorage/sessionStorage限制至多10MB，如何使用更大的存储空间？（待实践） - V站讨论：[localStorage 和 sessionStorage 什么场景下存储达到上限呢？](https://www.v2ex.com/t/647457) ### 测试localStorage存储限制的网站 最大存储char数。 https://arty.name/localstorage.html ### 测试浏览器所有storage的限制 KB，MB细粒度测试localStorage，sessionStorage，IndexedDB，WebSQL和FileSystem的存储上限。 https://demo.agektmr.com/storage/ ###...
 现代化前端的全局引入是一个很有趣的东西。 先来看下以下几个场景： - 在webpack中，我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如`resolve: { alias: { '@': path.join(__dirname, '..', 'src') }}`。 - 在webpack中，我们也可以通过DefinePlugin将配置文件按照环境变量进行区分，高效的完成配置文件的按环境引入，无论是开发构建还是生产构建，都十分有用。 - 在vue中，我们可以将一个常用的方法或者库定义在Vue.ptototye上，可以通过直写属性，也可以通过vue中的plugin install上去。例如`Vue.prototype.$_ = lodash`，在应用了vue的应用上下文中，可以通过this.$_获得对lodash的引用。 - 在vue中，还有mixins，inject以及vuex等等这些全局绑定或者叫混入、注入方式的全局引入的实现。 来思考一个问题： ``` 如果我们再Vue.prototype上绑定了太多，太大的第三方库，会不会导致root vue过大？ 答案是肯定的。 有没有办法解决这个问题？ 你可能会说，我不用this.xxx。用到的vue单文件组件直接import或者require就好了。 如果数以百计，数以千计甚至是数以万计的.vue文件中用到了呢？一直引入吗？...
- 初识任务和微任务 - 什么是微任务？ - 常见的微任务队列有哪些？ - 任务 vs 微任务 - 如何理解任务？ - 如何理解微任务？ - 如何使用微任务？ - 队列微任务 - 什么时候使用微任务 - 使用Promise确保条件判断排序 - 避免发送重复请求 - 使用微任务的例子 - 最简微任务例子 - Timeout和微任务例子...