4 陈大鱼头

尚未进行身份认证

我要认证

高级前端工程师,《Hello CSS》系列作者

等级
TA的排名 4w+

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

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

2020-10-07 17:25:47

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

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

2020-09-06 19:19:30

『真香警告』这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

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

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

2020-05-23 17:25:39

面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

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

2020-04-29 11:13:49

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

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

2020-04-08 18:22:07

【适合收藏】让你减少加班的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

面试官:你用纯CSS来写个游戏吗?

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

2020-03-29 18:58:00

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

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

2020-03-09 11:14:04

什么是时间分片(Time Slicing)?

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

2020-03-05 23:21:21

忍法,scroll 翻滚之术!

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

2020-03-04 20:05:19

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

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

2020-01-09 13:36:06

如何衡量一个人的 JavaScript 水平?

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

2019-12-23 00:12:57

从ES6到ES10的新特性万字大总结(不得不收藏)

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

2019-12-19 01:12:51

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

leetCode解题记录2 - 两数相加(JS, TS, PY版)

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

2019-11-27 11:11:35

leetCode解题记录1 - 两数之和(JS,TS,PY版)

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

2019-11-27 11:10:32

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

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

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

2019-11-19 12:30:23

CSS的未来已来

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

2019-11-13 14:41:58

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 原力计划专属勋章
    原力计划专属勋章
    2019年《原力计划【第一季】》专属勋章,现已经开启第二季活动啦,小伙伴们快去参加吧
  • 原力探索
    原力探索
    参与《原力计划【第二季】——打卡挑战》的文章入选【每日精选】的博主将会获得此勋章。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。