陈大鱼头-CSDN博客

原创前端应该掌握的编译基础（基于 babel）

作者：陈大鱼头github： KRISACHAN开发息息相关虽然 Babel 团队在各种哭穷，但是 Babel 始终是我们前端在开发中不可或缺的重要工具。虽然我们只是 API 调用工，但是多了解一些总是会有好处的嘛 ☄️☄️☄️什么是编译器？编译器（compiler）是一种计算机程序，它会将某种编程语言写成的源代码（原始语言）转换成另一种编程语言（目标语言）。源代码（source code）→ 预处理器（preprocessor）→ 编译器（compiler）→ 汇编程序（assemb..

2021-06-29 23:33:37 321

原创你不知道的 CSS 进度条

作者：陈大鱼头github： KRISACHAN进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。常规版 — div 一波流这是比较常规的实现方式，先看效果：源码如下：<style> .progress1 { height: 20px; width: 300px; backgro..

2021-01-18 13:06:22 247

原创让Vue3 Composition API 存在于你 Vue 以外的项目中

作者：陈大鱼头github： KRISACHAN作为新特性 Composition API ，在 Vue3 正式发布之前一段时间就发布过了。距文档介绍， Composition API 是一组低侵入式的、函数式的 API，使得我们能够更灵活地「组合」组件的逻辑。不仅在 Vue 中，在其他的框架或原生 JS 也可以很好地被使用，下面我们就选取几个比较重要的 Composition API ，通过一些简单的例子来看看如何在其他项目中使用。注：本文仅列出各个分类下比较重要的 API，想要查看全部..

2020-10-07 17:25:47 1157 1

原创『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能

作者：陈大鱼头github： KRISACHAN去年的时候写过一篇文章纯CSS实现表单验证，在发表之后不久就有网友跟鱼头说，打算拿我这篇文章作团队内部分享。当时听到这个消息之后，在屏幕前的鱼头笑咧了嘴，但这位童鞋的下一段内容，就让我马上笑不起出来了。不过因为初始化状态是这样的：所以希望我能够改一下，改成这样：只有在进行输入且输入内容不对的时候才展示错误信息。这位童鞋：“所以这功能能实现吗？”我：“。。。。。。”既然有童鞋这么看得起鱼头，还打算拿鱼头的 DEMO 来作内部分..

2020-09-06 19:19:30 377

原创『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。

作者：陈大鱼头github： KRISACHAN前言CSS 选择器是 CSS 世界中非常重要的一环。在 CSS 2 之后，所有的 CSS 属性都是按模块去维护的。CSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。下面让我们一起来看看 Level 4 新推出的一些选择器。正文下面我们按照类型来划分逻辑组合（Logical Combinations）..

2020-07-21 13:49:10 758

原创『1W7字中高级前端面试必知必会』终极版

作者：陈大鱼头github： KRISACHANChrome浏览器进程在资源不足的设备上，将服务合并到浏览器进程中浏览器主进程负责浏览器界面显示各个页面的管理，创建以及销毁将渲染进程的结果绘制到用户界面上网络资源管理GPU进程用于3D渲染绘制网络进程发起网络请求插件进程第三方插件处理，运行在沙箱中渲染进程页面渲染脚本执行事件处理网络传输流程生成HTTP请求消息输入网址浏览浏览器解析URL生成HTTP请求信息..

2020-05-23 17:25:39 420

原创面试官：你可以用纯 CSS 判断鼠标进入的方向吗？

作者：陈大鱼头github： KRISACHAN前言在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下：<style>body { padding: 2em; text-align: center;}.block { po...

2020-04-29 11:13:49 7862 12

原创 LeetCode解题记录5 - 最长回文子串

作者：陈大鱼头github： KRISACHAN介绍：本仓库用于记录鱼头LeetCode解题，主要用Python3, JavaScript与TypeScript实现。题目描述：给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。示例 1:// 输入: "babad"// 输出: "bab"// 注意: "aba" 也是一个有效答案。示...

2020-04-08 18:22:07 522

原创【适合收藏】让你减少加班的15条高效JS技巧！

作者：陈大鱼头github： KRISACHAN鱼头辛苦总结的15条非常高效的JS技巧，掌握这15个JS技巧，让你减少加班次数，多抽出点时间来陪女（男）朋友。正文延迟函数delayconst delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))const getData = ...

2020-04-06 17:29:09 1072

原创面试官：你用纯CSS来写个游戏吗？

作者：陈大鱼头github： KRISACHAN前言不知道大家小时候有没有玩过一款游戏叫『井字棋』的。它长这样：（我赢了，快夸我 ~o(´^｀)o）上面的就是本次文章的最终结果，一个用纯CSS实现的AI井字棋游戏，Mmmm，虽然看起来有点蠢。。。地址在此：https://codepen.io/krischan77/pen/qBdYZLy游戏的规则比较简单，就是在一个九宫...

2020-03-29 18:58:00 4865 23

原创 JavaScript实现指定数量的并发限制

作者：陈大鱼头首发地址： https://github.com/KRISACHAN/ying-study/issues说明：鱼头的学习记录正文在网上看到这么一道题：这道题跟鱼头这篇记录『什么是时间分片（Time Slicing）？』有点相似，但不同的是这次是限制异步并发的数量。所以话不多说，我们先来康康实现首先我们来实现一个分割数组的函数~const group = (l...

2020-03-09 11:14:04 2369 1

原创什么是时间分片（Time Slicing）？

作者：陈大鱼头github： KRISACHAN根据W3C性能小组的介绍，超过50ms的任务就是长任务。图片来自使用 RAIL 模型评估性能根据上图我们可以知道，当延迟超过100ms，用户就会察觉到轻微的延迟。所以为了避免这种情况，我们可以使用两种方案，一种是Web Worker，另一种是时间切片（Time Slicing）。Web Worker我们都知道，JS是单线程，所...

2020-03-05 23:21:21 5910

原创忍法，scroll 翻滚之术！

作者：陈大鱼头github： KRISACHAN前言在日常的开发中，我们对 scroll 这个单词肯定不陌生。例如因为看不惯浏览器默认样式而用 JS 一顿猛如虎操作的自定义滚动条。或者是嗖~一下就到顶的回到顶部。又或者是想去哪点哪的标题导航。但是在过去的开发中，要实现这些功能并不是那么轻松的一件事情。例如我们要实现一个有滚动效果的回到顶部功能，我们可能需要...

2020-03-04 20:05:19 525 1

原创 5个提升你JS编码水平的实例

作者：陈大鱼头github： KRISACHAN虽然 2020 的今天，各种前端框架、工具林立，而这些框架跟工具也帮我们提前解决了不少麻烦的问题，但是工具始终是工具，扎实的基本功才是最核心的，现在一起来通过几个实际的代码片段来提高我们原生 JS 的编码水平。判断数据类型首先来提问一个：typeof是否能正确判断类型？答案是：不可以，因为由于历史原因，在判断原始类型时，typeof...

2020-01-09 13:36:06 5708 3

原创如何衡量一个人的 JavaScript 水平？

作者：陈大鱼头github： KRISACHAN前言之前刷知乎的时候，看到这么一个问题：“如何衡量一个人的 JavaScript 水平？”然后自己也不要脸地回答了一下这个问题。以下是我的答案：原文如下：A：看一个人写代码是否有规范，代码是否壮健，是否可拓展，可读性高不高，API设计是否合理。这些都是长年累月积累下来的且独立于编程语言以外的。远比把什么手写bind，原型链，闭...

2019-12-23 00:12:57 4736 6

原创从ES6到ES10的新特性万字大总结（不得不收藏）

从ES6到ES10的新特性万字大总结（不得不收藏）作者：陈大鱼头github： KRISACHAN介绍ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。历史版本至发稿日为止有九个ECMA-...

2019-12-19 01:12:51 6354 3

原创 Web开发中最该知道却从不重视的 —— Accessibility

作者：陈大鱼头github： KRISACHAN什么是Accessibility？[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuwaqhRF-1575898743242)(http://mds.is/content/images/2016/09/A11Y-3.png)]图片来自WHAT DOES A11Y EVEN MEAN?Accessibi...

2019-12-09 21:39:44 3148 6

原创 leetCode解题记录2 - 两数相加（JS, TS, PY版）

作者：陈大鱼头项目地址：ying-leetcode碎碎念：Mmmmm，不定期刷leetcode，会以JS TS PY的形式输出出来题目描述给出两个非空的链表用来表示两个非负的整数。其中，它们各自的位数是按照逆序的方式存储的，并且它们的每个节点只能存储一位数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。您可以假设除了数字 0 之外，这两个数都不...

2019-11-27 11:11:35 1103

原创 leetCode解题记录1 - 两数之和（JS，TS，PY版）

作者：陈大鱼头项目地址：ying-leetcode碎碎念：Mmmmm，不定期刷leetcode，会以JS TS PY的形式输出出来题目描述给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。给定 nums = [2, 7, ...

2019-11-27 11:10:32 1154

原创 leetCode解题记录4 - 寻找两个有序数组的中位数（JS, TS, PY版）

作者：陈大鱼头项目地址：ying-leetcode碎碎念：Mmmmm，不定期刷leetcode，会以JS TS PY的形式输出出来题目描述：给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请你找出这两个有序数组的中位数，并且要求算法的时间复杂度为 O(log(m + n))。你可以假设 nums1 和 nums2 不会同时为空。示例 1:nums1 = ...

2019-11-26 20:25:50 997

原创 leetCode解题记录3 - 无重复字符的最长子串(JS,PY,TS版)

作者：陈大鱼头项目地址：ying-leetcode碎碎念：Mmmmm，不定期刷leetcode，会以JS TS PY的形式输出出来题目描述：给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。示例 1:输入: “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。示例 2:输入: “bbbbb”输出: 1解释: ...

2019-11-19 12:31:10 870

原创 CSS的未来已来

作者：陈大鱼头github： KRISACHAN前言最近听说TypeScript3.7添加了对Optional Chaining的支持，然后就想着给鱼头的脚手架ying-template的TS版本升级，然后在命令行发现这样的一句信息：‘postcss-cssnext’ 已经被 'postcss-preset-env’代替了。详情请查看 https://moox.io/blog/d...

2019-11-13 14:42:16 1132

原创像监听页面一样监听戈多的动态

作者：陈大鱼头github： KRISACHAN不知道各位童鞋有木有看过《等待戈多》这部出名的荒诞戏剧。其剧情大概就是戈戈与狄狄等待戈多的过程中发生的一些琐事，一共两幕。等了这么多年，也不知道戈多现在在哪，赴约了没有。如果戈戈与狄狄像我们监听页面元素变化那样监听戈多的动态，是不是就不会出现空欢喜的状态？是不是就不用等得那么辛苦？是不是甚至可以主动去寻找戈...

2019-09-24 19:57:28 1231 1

原创我的 Input框不可能这么可爱

作者：陈大鱼头github： KRISACHAN<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过...

2019-09-03 13:27:35 126574 81

原创提升开发幸福感的10条JS技巧

作者：陈大鱼头github： KRISACHAN鱼头总结一些能够提高开发效率的JS技巧，这些技巧很实用，觉得挺好，想推荐给大家，所以有了这篇文章。生成随机UIDconst genUid = () => { var length = 20 var soupLength = genUid.soup_.length var id = [] for (var i = ...

2019-07-29 14:52:39 1565 2

原创【Hello CSS】第九章-如何画一个体验更好的动画？

作者：陈大鱼头github： KRISACHAN在上一节中，不走心地画了一些 CSS图案，本节就继续不走心地画动画。CSS的动画属性在CSS中，animation 、 transition 跟 transform 使我们常用于制作动画的属性，我们先来大致地来了解下这三个属性。transformCSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。...

2019-07-29 14:52:01 1100 1

原创【Hello CSS】第八章-CSS图形

作者：陈大鱼头github： KRISACHAN前言上一节留了一个问题：“为什么 currentColor 是驼峰命名？”。其实也有小伙伴答对了，原因就是因为 currentColor 是作为 SVG 的属性值存在，因此在 CSS 里就保留了这个驼峰写法，顺便提一个冷知识：“ currentcolor 这种全小写的方式也是允许的。 ”小知识分享完，本章开始分享 CSS图形，通过...

2019-07-23 20:07:56 940

原创【Hello CSS】第七章-CSS的继承与可变性

作者：陈大鱼头github： KRISACHAN继承继承（英语：inheritance）是面向对象软件技术当中的一个概念。在 CSS 中与层叠（英语：Cascade）一起描述了如何设置样式规则，并为所有元素的所有属性赋值。这两个属性同属规范 “ CSS Cascading and Inheritance Level ”。CSS中的继承实际上是父级元素对子元素的影响。...

2019-07-23 20:07:22 846

原创【Hello CSS】第六章-文档流与排版

作者：陈大鱼头github： KRISACHAN正常流什么是“正常流”？其实就是我们日常所说的“文档流”。在W3C官方文档里对应的是“normal flow”。正常流的盒子属于格式化上下文(FC)，在CSS2.2中可以是表格、块或内联。在CSS3中引入了flex跟grid，当然以后会引入得更多。块级盒子(block-level boxes) 与创建块级格式化上下文(B...

2019-07-23 20:05:47 924

原创【Hello CSS】第五章-CSS的选择器与函数

作者：陈大鱼头github： KRISACHAN在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟**CSS选择器（CSS Selectors）**相关的内容，有兴趣的请继续往下看。CSS选择器（CSS Selectors）啥叫选择器？简单来说就是通过一些定义来选中特定的HTML标签。biu~首先我...

2019-07-23 20:05:08 981

原创【Hello CSS】第四章-HTML的标签与语意

作者：陈大鱼头github： KRISACHAN上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。我们在序章的开头就简单的讲解了HTML的诞生历史，本篇不作详细讲解，有兴趣的可以去看wikipedia。HTML大事记首先我们简单地来看一下HTML的发展历程（具体各个版本的区别亦不做讲解）。19...

2019-07-23 19:59:11 918

原创【Hello CSS】第三章-浏览器的视图与坐标

作者：陈大鱼头github： KRISACHAN在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？现在各位看官有答案了吗？因为上一篇中有提到过CSS 逻辑属性的变革，从物理概念跳跃到了逻辑概念，也就是从top...

2019-07-23 19:49:53 1023

原创【Hello CSS】第二章-CSS的逻辑属性与盒子模型

作者：陈大鱼头github： KRISACHAN在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的渲染流程。本篇则会分享CSS的逻辑属性以及盒子模型。首先开篇之前先提个问题：为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？先不要急着往下翻，大家先思考...

2019-07-23 19:47:40 940

原创【Hello CSS】第一章-CSS的语法与工作流

作者：陈大鱼头github： KRISACHAN在上一篇【Hello CSS】的序章CSS起源中介绍了CSS的诞生原因以及发展历史，了解了CSS的存在意义。从正篇篇开始将会正式开始介绍CSS这门语言的特点与功能。本篇则主要介绍CSS的语法与CSS是如何工作的。CSS语法1. 基本规则CSS规则主要由两部分组成：选择器(selector)与声明(declarations)。选...

2019-07-23 18:29:26 971

原创【Hello CSS】序章-起源

作者：陈大鱼头github： KRISACHANHTML的诞生HTML是怎么来的？在1982年的时候，万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享，造了HTML(HyperText Markup Language) 超文本置标语言。在1991年3月，Tim Berners-Lee把HTML介绍给了给他在CERN(欧洲核子研...

2019-07-23 18:28:28 910

原创 JS数组中那些你知道或不知道的

作者：陈大鱼头github： KRISACHANJS中的Arrayecma-262中的定义：Array对象是一种特殊对象，它会对数组索引属性键进行特殊处理。每个Array对象都有一个不可配置的length属性，其最大值是232 - 1。Array()当且仅当不带参数调用Array构造函数时，此描述才适用。执行过程：定义 numberOfArgs 传递给此函数的调...

2019-07-23 16:44:40 1058

原创前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

作者：陈大鱼头github： KRISACHAN盒模型The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.CSS盒模型描...

2019-07-23 16:42:48 2040

原创纯CSS实现表单验证

作者：陈大鱼头github： KRISACHAN关于表单验证在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下一步的操作。例如这样：（以下例子来自优秀的开源UI库，element）<el-form :model="numberValidat...

2019-07-23 16:40:07 1078

原创 2019.7.15 - 7.21 我们 36人都学了些什么？

作者：陈大鱼头github： KRISACHAN如果不希望职业生涯过早结束，持续学习对于开发者来说是必不可少的。最近《前端面试之道》的作者为了让一些人能在这块地方记录自己学习到的内容而建立起了一个学习仓库。仓库地址如下：https://github.com/KieSun/today-i-learned这些内容通常会是一个小点，可能并不足以写成一篇文章。但是这个知识点可能很多人也...

2019-07-23 16:36:05 1265

原创前端进阶必备 — 手撕排序算法

作者：陈大鱼头 github：https://github.com/KRISACHAN 算法是什么？算法（Algorithm）已经是一个老生常谈的概念了，最早来自于数学领域。算法（Algorithm）代表着用系统的方法描述解决问题的策略机制，可以通过一定规范的输入，在有限时间内获得所需要的输出。如下图示便是算法：算法的好坏一个算法的好坏是通过...

2019-07-13 17:43:51 3630 5

空空如也

空空如也